JavaScriptでforEach, filter, map, reduceとか - QiitaDeleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
vim-prettier を作った - Memo
tl;dr GitHub - heavenshell/vim-prettier: Prettier-Eslint-Cli for Vim Prettier と言う JavaScript のフォーマッターがある。 こいつ単体ではお仕事で設定している ESlint の設定とは関係なくフォーマットするが、prettier-eslint と言うのがあり、これを使えば ESLint の設定通りにフォーマットしてくれる。 で、フォーマッターはエディタから設定したくなる。 オフィシャルのドキュメントには以下のように使えばいいよとある。 autocmd FileType javascript set formatprg=prettier\ --stdin autocmd BufWritePre *.js :normal gggqGお手軽だけど、同期的に動く。 そして Prettier は速くはない。 当然
Jest · 🃏 Delightful JavaScript Testing ドキュメント
スナップショット機能で大きなオブジェクトを容易に追跡できるテストを作成できます。スナップショットはテストと一緒に、あるいはインラインに埋め込んだ状態で表示できます。
JavaScriptテスト自動化キホンのキ - Qiita
のように、ひたすら泥臭いコードを書くハメになる可能性があります。（これは極端な例ですが） また、このままではテスト実行後の結果がとても分かり辛いです。 どんなテストに成功したのか/失敗したのか、全体でどれだけテストがあって、どれだけパスしたのか。 はたまた失敗した場合に、どんな部分がNGだったのか。 これらを解決するためにあるのが、テストフレームワークと呼ばれるものです。 Javaで言えばJUnit、RubyではRSpec、PHPではPHPUnitやPHPSpecなどが該当します。 こういったテストフレームワークを使うことで、テストを簡潔に分かりやすく書けるようになります。 また、こんな感じでテスト結果も見やすく出力してくれます。 （下図はRSpecでのテスト実行結果の様子です） テストの成否具合や実施内容、問題となる内容が詳しく出力されていますね。 さて、このテストフレームワークですが、
prettier時代のESLintの設定 - Qiita
'use strict' const OFF = 0 const WARNING = 1 const ERROR = 2 module.exports = { parser: 'babel-eslint', parserOptions: { ecmaVersion: 7, sourceType: 'module', ecmaFeatures: { jsx: true, experimentalObjectRestSpread: true, }, }, env: { browser: true, node: true, es6: true, }, extends: [ 'plugin:unicorn/recommended', 'plugin:react/recommended', 'plugin:import/errors', 'prettier', 'prettier/flowtype'
5000人調査でわかった！世界のフロントエンド開発者が使うツールはこれだ
次々とリリースされるJavaScriptライブラリーにフレームワーク、進化を続けるCSSモジュール……と、変化の激しいフロントエンド開発界隈。いま開発者たちに実際に使われているのはどんなツール？ 開発経験は2年以上ありますか？ 高度なCSSスキルとしてSassやAutoprefixerの使用も含まれていますか？ JavaScriptの知識は十分にあり、Gulp、nmp、jQueryを使いこなせていますか？ そうであれば一般的な開発者だそうです。Ashley Nolan氏によるフロントエンド開発ツールのアンケート調査によれば。 気になる結果を見る前に…… この種のアンケート調査は新たなツールを見つけたり、知識不足の分野の把握に役立ちます。執筆時点で5254件の回答が寄せられていて、アンケート調査としてはかなりのサンプル数です。ただ、結果を疑いようのない真実だと受け取るには慎重になるべきです。
oratta.net - oratta リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
jQueryでURLとパラメータを取得する方法：location
jQueryで現在表示中のページのURLとそのパラメータを取得する方法を説明します。 if文を使うことで、URLやそのパラメータによって表示を切り替えることができるので頻繁に見る処理です。 locationを使用した方法 jQueryでも、JavaScriptでデフォルトで用意されているLocationオブジェクトを利用できます。 Locationオブジェクトでは、「location.プロパティ」のようにプロパティ（パラメータなど）を指定することで、簡単にURLとその情報を取得できます。 JavaScriptにおけるlocationのサンプル たとえば以下のURLが表示中だとします。 「http://www.example.com:8080/page.html?page=2#pagetop」 URLやドメイン、パラメータを取得する例は以下のようになります。 URLを取得する URLの全体を
JavaScript,jQueryの爆速コーディング、デバッグ方法論の勧め～実践向け逆引き(windows,chrome向け)～ - Qiita
※2017/4/21にオンロード時のデバッグ方法8を追記しました！ こんにちは！エイチーム引越し侍の加藤です！ みなさんJavaScript書いてますか？ console.logめっちゃ使うよねーって人は目からうろこのデバッグ方法を、 ケース毎に紹介していこうと思います。(僕はconsole.log使いません) サーバーにデバッグ用のコードをアップロードすること無いので、 消さずに意図に反してリリースしてしまう危険性がないのもお勧めです。 前提知識 F12で出てくるデベロッパーツール(Elements, Console, Source, Network)の知識 Ctrl+Shift+Fで外部ソース(js,css)に対して一括検索ができる HTML、CSSはElementsから直接修正⇒確認ができる jsはSourceから直接修正できる(Ctrl+Sで保存したらその状態で実行できる) jsは
Document: hasFocus() メソッド - Web API | MDN
DocumentコンストラクターDocument()インスタンスプロパティactiveElementadoptedStyleSheetsalinkColor 非推奨; all 非推奨; anchors 非推奨; applets 非推奨; bgColor 非推奨; bodycharacterSetchildElementCountchildrencompatModecontentTypecookiecurrentScriptdefaultViewdesignModedirdoctypedocumentElementdocumentURIdomain 非推奨; embedsfeaturePolicy Experimental fgColor 非推奨; firstElementChildfontsformsfragmentDirectivefullscreen 非推奨; fullscreenEl
JavaScript：日付の差分日数を求める - 覚え書き.com
日付の差分日数（例：開始日「2014/04/01」、終了日「2014/04/30」なら所有日数「30」）を求めるJavaScriptのサンプルです。 HTMLサンプル 開始日付：<input id="txt1DateDifferenceSample" type="text" name="txt1DateDifferenceSample" value="2014/04/01"/> 終了日付：<input id="txt2DateDifferenceSample" type="text" name="txt2DateDifferenceSample" value="2014/04/30"/> 開始～終了までの所要日数：<input id="txt3DateDifferenceSample" type="text" name="txt3DateDifferenceSample" />
はじめてajaxを使うときに知りたかったこと - Qiita
はじめに 今更ですが最近ajaxを少し触るようになりました。 jQueryを使えば簡単にajax通信ができるため、単純なものであればそれほど実装は難しくないかと思います。 ですが少し複雑なことをやろうとしてみると、急にハードルが上がる気がします。 そこで自戒を込めて、ajax初心者の方に対してはじめにこれを知りたかったと思えるんじゃないかというものをまとめてみたいと思います。 ※jQueryを利用したajax通信を想定しています 目次 処理の順番を意識する $.ajax()の省略メソッドを知る イベントを知る デバッグ方法を知る 通信状況を想定する（タイムアウトを設定する） 連続クリックを防止する ← [New!] 連続通信を防止する ← [New!] 処理の順番を意識する ajaxを使用する場合は、非同期通信で処理したいケースがほとんどかと思います しかし単純にそのまま書いただけでは処理
Javascriptで表示・非表示の切り替え（style）
この記事は公開から１年以上経過しており、内容が古くなっている可能性があります。 単純ですが、よく使用するプログラムなので。 要するに、javascriptによるstyleの切り替えです。 <script> function show_block(){ if(document.getElementById(“hoge”).style.display == “”){ document.getElementById(“hoge”).style.display = “none”; }else{ document.getElementById(“hoge”).style.display = “”; } } </script> <p><a href=”javascript:void(0)” onclick=”show_block();”>表示切替</a></p> <div id=”hoge” styl
既存のコードの理解が捗るChrome DevToolsの使い方 - kitak blog
jQuery系ライブラリによるDOM操作が中心のプロジェクトにがっつり機能を追加する機会があった。 そのJavaScriptのコードは他の人から引き継いだコードで、一応引き継ぎ時にディレクトリ構成、設計、実装方針について共有を受けたが、それでもいざ手を入れようとすると自分自身のコードの理解が進んでおらず「えーっと...」となってしまった。 上記以外にも、長年、多くの人が触れてきたJavaScriptのコードに機能を追加する、修正するのはなかなか難しいのではないか、と思う。最初は、ちょっとしたユーザビリティの向上のために書かれたスクリプトが、気がつけば多数のDOM操作、至る所で宣言される変数、どこから実行されるか分からない関数群で無秩序に膨れ上がり、頭を抱えることになる(そうならないようにするのがウェブフロントエンジニアがいるひとつの理由ですが…)。 これらのケースでは、まずは修正、あるいは
Riot はミニマルで Web Components のような UI ライブラリ - Qiita
古典的な構成のサービスを AWS Lambda + S3 で動作するサーバーレスアーキテクチャで再構築し、そのフロントエンドに Riot を採用しました。 プロジェクトは WWD JAPAN.com として公開しています。 React や Angular などに代表される JavaScript の UI ライブラリのうち、Riot はミニマルな API と HTML 標準に近い文法を採用しているのが特徴です。 Riot はコンポーネントベースの UI 開発から複雑さを取り除き、楽しさを与えます。 TL;DR Riot はこれまでの UI ライブラリと比べて以下の点で異なります。 必要最小限の API 少ないボイラープレート Web Components ( HTML Template ) に似た文法 React のコードと比較してみます。 ToDo アプリケーションを React で書くと
スパム対策 JavaScript/jQuery を使った迷惑メール対策 | Web Design Leaves
スパム対策 JavaScript/jQuery を使った迷惑メール対策 CATEGORY: jQuery | TAG: Mail 2013年6月4日 ウェブ上にメールアドレスを掲載すると、スパム（迷惑）メー「ルが届くようになることがあります。 迷惑メール（スパム）に使われるメールアドレスは、ロボット（自動巡回プログラム）によって自動収集されていて、ソースを分析し、メールアドレスのような文字列（@ や mialto が含まれたもの）を集めているようです。 以下はメールアドレス収集プログラムに収集されるのを防止する方法（スパム対策）の１つの例です。 追加情報 2013年6月4日に最初に掲載した方法は、かなり無駄が多かったので全面的に書き換えました。2015年8月29日 目次 メールアドレス用のリンク メールアドレスをウェブ上に掲載する場合、a 要素を使ってリンク先として href 属性値に「m
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JSON.stringifyを改めて調べる。 - Qiita
GitHub - heavenshell/vim-prettier: Prettier-Eslint-Cli for Vim
JavascriptのChromeでのデバッグ方法個人的まとめ2016 - Qiita
JQueryで読み込み時とリサイズ時にブラウザサイズに横幅を合わせる - Qiita
