IntelliJ loves JavaScript #jbnight

JetBrains東京Nightで発表した資料です。
(画像の部分は主にGifを使っていたので実際に試すことをお勧めします)

Transcript

1. IntelliJ loves JavaScript ヤフー株式会社 狩野 和博
2. ⾃⼰紹介 Kazuhiro Karino (狩野 和博) Tw: @nana4gonta • ヤフー株式会社 CTO室SWAT • 社内のフロントエンド開発のサポート • その他フロントエンドに関わること 1
3. 今⽇知ってほしいこと 2
4. IntelliJ(WebStorm)とJavaScriptの関係 • IDEの持つ機能だけで開発に必要なものはほぼ揃う • 様々な拡張機能を⼊れなくて良い • 良いコードを書くためのサポートをしてくれる • 外部ツールの結果を逐次表⽰ • より良いコードのためにIntelliJの静的解析 3
5. JavaScript開発のサポート • IDEが基本的な機能を持っている • シンタックスハイライト • 補完 • 静的検査 • 最近の開発環境にも対応 • Babel、TypeScript • React、Angular • ESLint、flow • Mocha、Karma 4
6. 今回話さない内容 • Nodeアプリケーションのデバッグ • テストとの連携 • 端々に出てくるライブラリ・ツールの説明 5
7. 今回話す内容 • ES2016を書き始めるために • 開発をサポートする補完機能の強化 • バグ発⾒のための静的検査 • (若⼲)フレームワークサポート 6
8. ES2016を書き始めるために • IntelliJで必要な設定変更は2点 • シンタックスの有効化 • 機能の有効化 7
9. ES2016の有効化 • シンタックスの有効化 • Preferences > Languages & Frameworks > JavaScript • 機能の有効化 • Preferences > Languages & Frameworks > JavaScript > Libraries 8
10. ES2016の有効化 • シンタックスの有効化 • ES2016の新規構⽂でエラーを出さないように • 予約語などを補完できるように • 機能の有効化 • PromiseやWeakMapなどPolyfillが必要な機能で警告を抑制 • 上記機能を補完できるように • ライブラリとしてimportする場合はチェックを⼊れなくて良い • ビルド時にPolyfillを読み込む場合はチェックを⼊れる 9
11. 補完機能の強化 10
12. 補完機能 • 補完はコードを書く上での強⼒なサポーター • typo防⽌ • 脳のバッファを減らす • JavaScriptの補完を強化する⽅法は3つ • 型に基づく補完 • TypeScriptの型定義ファイル • JSDocによる型アノテーション 11
13. 型に基づく補完 • デフォルトでは型と名前をもとに候補の⼀覧が表⽰される • 機能を有効にすることで補完候補を絞ることができる 12
14. 型に基づく補完の有効化 • 設定は以下の場所に • Preferences > Languages & Frameworks > JavaScript • Only type-based completionにチェック 13
15. 型に基づく組み込み値の補完 • Only type-based completionを有効化 • 組み込みの値、関数に関して補完はほぼ完璧 14
16. ライブラリの補完 • ライブラリの補完は組み込み値に⽐べて弱い • 補完してほしい内容が出にくい、出てこない 15
17. 型定義による補完機能の強化 • TypeScriptの型定義ファイルをダウンロード • Preferences > Languages & Frameworks > JavaScript > Libraries • Download... を選択 16
18. 型定義による補完機能の強化 • TypeScriptの型定義ファイルをもとに補完が効くようになる 17
19. メンバ変数の補完 • メンバ変数も⽂脈から判定できない場合に補完が弱い そもそもこんな雑なコードは書かないというのは置いといて… 18
20. JSDocによる補完 • 補完を効かせたい変数にJSDocの型アノテーションを書く • @type, @param, @returnといった変数や返り値の型に関わるもの • PHPやRubyなどでもドキュメントコメント補完は有効 • ただし⽂脈で補完できない ≒ 読みにくいコードの可能性あり 19
21. 静的検査 20
22. 静的検査 • コード品質の確保 • バグになりそうな部分の発⾒ • プロジェクトでのコードスタイルの統⼀化 • IntelliJ上で扱えるのは3つ • Inspection • ESLint、JSHintなどの外部ツール • flowを利⽤した型検査 21
23. Inspection • エディタの右端にある⻩⾊や⾚⾊のアレ • バグになりそうな部分を教えてくれる 22
24. Inspectionの設定 • 設定は以下の場所に • Preferences > Editor > Inspections 23
25. Inspectionの設定の種類 • 設定は豊富 • Code style issues • Control flow issues • Probable bugs • etc... • Control flow issuesやProbable bugsは要チェック 24
26. ESLint • JavaScript向けの構⽂チェッカーの結果を逐次表⽰ 25
27. ESLintの設定 • 設定は以下の場所に • Preferences > Languages & Frameworks > JavaScript > Code Quality Tools > ESLint • Enableにチェック • ESLint package: ESLintのあるnode_modulesのパスを⼊⼒ 26
28. ESLintとReformat Code • IntelliJにはReformat Codeという便利なものがあるが... • IntelliJ内で設定し、IntelliJ内で完結するCode Styleベース • PredefinedにGoogleとかAirBnBとかあると嬉しい… • スタイルフォーマットは管理しやすいESLintに寄せたい • ESLintを設定しただけでは--fixオプションが使えない • できれば保存時にコードを直してほしい 27
29. File Watchers • ファイル形式を指定し、コマンドを実⾏するIntelliJプラグイン • gulpやeslint-watch、それらが使っているchokidar-cliもある • 快適にコードを書くためにはFile Watchersのほうが良い • 外部ツールはエディタ画⾯への反映のタイミングが悪い • IntelliJのフォーカスを外してフォーカスし直す必要がある • File Watchersはその場で反映される 28
30. ESLintとFile Watchers • 以下のように設定 • 必ずImmediate file synchronizationのチェックは外す 29
31. ESLintとFile Watchers • 保存時に eslint --fix editing_file.js としてコードが修正される • ファイル形式ごとなのでJSXを扱う場合は別途作成すること • Immediate file synchronization • チェックしたままだとタイプするごとにeslintが⾛る • 鬱陶しくなるので外すこと 30
32. flow • ES2016のシンタックス有効化と同じところにある • Preferences > Languages & Frameworks > JavaScript • flow を選択 • IntelliJのStableはESLintのようにツールチップ表⽰できない • 最近リリースされたWebStorm 2016.3では表⽰できる 31
33. WebStorm 2016.3とflow • 最近StableになったWebStormとflowの組み合わせは良い • IntelliJに来るのはもう少し先のはず... • 型の間違いをエディタ上で指摘してくれる 32
34. フレームワークサポート 33
35. React • JSXの構⽂をエラーにしないためにシンタックスの設定 • Preferences > Languages & Frameworks > JavaScript • JSX または flow を選択 • WebStormにはスタータープロジェクトがある • Create React Appを利⽤したWeb⽤のもの • React Native⽤もある • IntelliJはStatic Webの⼦カテゴリにWeb⽤スターターがある 34
36. Angular • React同様、WebStormにはスタータープロジェクトがある • Angular 1⽤とAngular 2⽤があるので注意 • Angular 2⽤はTypeScriptで作成されるので注意 • IntelliJは先にAngularJSプラグインを⼊れる • ⼊れたあとStatic Webの⼦カテゴリにスターターが表⽰される • 開発サポート • ng2- で始まるSnippet • angular-cliを利⽤したコードジェネレート 35
37. まとめ 36
38. IntelliJのJavaScriptサポートまとめ • ES2016のサポートもOK • 補完機能もOK • 型とドキュメントを利⽤した補完強化 • 静的検査もOK • 組み込みのInspectionでバグ発⾒の可能性アップ • ESLintの結果を表⽰と逐次修正でコードのブラッシュアップ • flowで型チェックして堅牢なコードに • フレームワークもOK • React、Angularの取っ掛かりもある 37
39. 最後に 38
40. 39 Yahoo! JAPANでは⼀緒に活躍したい エンジニアを募集しています ご清聴ありがとうございました
41. 参考資料 40 • IntelliJ IDEA 2016.2 Help • Configuring JavaScript Libraries • Code Inspection • Using JavaScript Code Quality Tools Using ESLint • Using the Flow Type Checker • Using AngularJS • Using Angular CLI • New Project: React Starter Kit • Using ReactJS in JavaScript and TypeScript
42. 参考資料 • WebStorm 2016.3 Help • Using the Flow Type Checker • New Project: React Starter Kit • その他 • How can I run eslint --fix on my JavaScript in Intellij-IDEA, Webstorm, other JetBrains IDEs? 41