コードを整えよう

Transcript

1. コードを整えよう らり
2. コードを整えるとは? 人が書いたコードって、他の人が見たら見にくい ↓ なので、コードの書き方やコーディングルールをある程度統一させよう
3. どうやって整える? • ESlint ◦ コードを実行する前に明らかなバグを見つけたり、括弧やスペースの使い方などのスタイルを統一 • Stylelint ◦ cssのためのlinter • Prettier ◦ コードのフォーマットを統一する
4. linterとformatterの違いって何? • linterはコードの品質を守るためのもの • formatterはコードの整形を行うためのもの なので、lintとformatは別々に行う必要がある 一般的にはlinterを通して品質を担保したあと、整形を行う https://prettier.io/docs/en/integrating-with-linters.html
5. ESlintってなあに? コードの一貫性を高め、バグを回避することを目的としたもの 過去に似たようなものとして、JSLintやJSHintがあったが、ここでは省略
6. ESlintの利点 • 変な書き方によるバグも回避される • ルールが決まるため、共同開発でそれぞれの個性が出にくいため読みやすい • 上記理由により、改修も簡単 • 自分でルールを追加できるため、きまりが作りやすい • typescriptとの連携も出来るため、型による間違いも見つけれる • ドキュメントがめちゃめちゃ丁寧
7. ESlintの欠点 • JSのバージョンが上がったらルールを見直す必要がある ◦ 年に1回程度なので、そこまで気にしなくていい • ルールの数が尋常じゃないぐらい多いからいちいち見てられない ◦ とりあえず”eslint:recommended”を入れておけば問題ない ◦ 最近はフレームワークの構築時に一緒に入っている • ルールが厳しいと、よしなになコードが書けない ◦ 一般的なルールは、大体その書き方は良いとされていないものを防ぐ目的なので、それでひっかか る方が悪い ◦ recommendedしかいれてないのにひっかかるのであればなおさら
8. ESlintをどうやって入れる? 公式の入門ページがあるので、そちらをご覧ください https://eslint.org/docs/latest/use/getting-started
9. ESlintでどんなことができるの?
10. ESlintでどんなことができるの? これは、スター・ウォーズのキャラクター、ヨーダの 話し方と同じように、「赤が色と等しい場合」と解釈 されるため、ヨーダ条件と呼ばれます。オペランド を配置する他の方法と比較してください。 これが書かれているものだけ、 --fixで修正され る
11. ESlintでどんなことができるの? if(color == “red”)だと、color = “red”って書いてもエラーがでない でも、if(”red” == color)だと、”red” = colorって書いた時にエラーがでるよね だから普段からそういう書き方にしようぜ(意訳) ちなみに、no-cond-assignっていうルールでカッコ内の代入を止めれます
12. 他には? • require-await ◦ 非同期な関数を呼び出す際、 awaitをちゃんと付けてないと怒られる • eqeqeq ◦ ==を許さない(===にする) • no-console ◦ console.xxxを許さない • @typescript-eslint/no-explicit-any ◦ anyを許さない • import/order ◦ importの順番をソートしてくれる (アルファベット順とか ) コード以外にもファイル名の付け方から 1ファイル当たりの行数も指定できる
13. Stylelintってなあに? linterのcss版 利点と欠点は大体ESlintと同じ 最近ではフレームワークの標準インストールで入ってくる
14. Stylelintのデカい欠点 css-in-jsに対応しなくなった 色んな書き方があるため、追いきれないことが原因らしい We've also deprecated the postcss-css-in-js custom syntax. It was not possible to maintain a monolithic custom syntax that attempted to support every CSS-in-JS library and syntax, as there are so many of them and each with variations in syntax. https://stylelint.io/migration-guide/to-15/
15. Stylelintをどうやって入れる? 公式の入門ページがあるので、そちらをご覧ください https://stylelint.io/user-guide/get-started
16. Stylelintでどんなことができるの?
17. Stylelintでどんなことができるの?
18. Stylelintでどんなことができるの?
19. 他には? • block-no-empty ◦ セレクタ指定内にプロパティがない場合にエラー • color-no-invalid-hex ◦ 16進数があっているかチェック • declaration-block-no-duplicate-properties ◦ プロパティが重複している場合エラー • no-duplicate-at-import-rules ◦ importで読み込むファイルが同じだとエラー • unit-disallowed-list ◦ 許可しない単位を指定 ◦ svhとかまだ使えないので、何も知らずに使うことを予め止めれる CSSでやりがちなミスは基本的に全部これで解決できる
20. linterの注意点 linterはコードの品質を守るための手段の1つであり、コードを実行するまえに色んな ルールを元に、コードのチェックを行うものである なので、修正を行うものではない なんでもかんでも--fixをつければ直る訳ではない linterでエラーが出て、--fixを付ければ直せるものは直す 直らないものは手動で修正する必要がある
21. Prettierってなあに? コードの整形を行うためのもの Community Pluginsを入れればJS以外にも整形を行うことが出来る
22. Prettierの利点 • コードフォーマットを統一できる • フォーマットが決まっているので、人に書き方の差分が生まれたりしない
23. Prettierの欠点 • push前にPrettierがかかっているかが分からない ◦ huskyで修正は出来るが、 pushした人が書いていない書き方になるので、ちょっと違和感がある • ESlintと干渉する設定がいくつかある ◦ 最近はほぼ気にしなくてよくなった
24. Prettierをどうやって入れる? 公式の入門ページがあるので、そちらをご覧ください https://prettier.io/docs/en/install.html
25. Prettierでどんなことができるの? 公式の設定一覧ページがあるので、そちらをご覧ください https://prettier.io/docs/en/options.html
26. Prettierでどんなことができるの? • セミコロンを付けるか否か • シングルクオーテーションとダブルクオーテーション • インデントをタブかスペースか • インデントの数 • 折り返しの文字数
27. Prettierでどんなことができるの? • 行末の改行コード ◦ 最近ではあまり気にされないが、未だに根付いている問題 ◦ 開発環境やエディタ、 gitの設定によりいくらでも変更される 行末の改行コードを開発環境側で統一するのはとても大変なため、そもそものコード側 で統一した方が楽
28. 他には? • @prettier/plugin-pug ◦ pugの整形を行う ◦ divを使わない等 なんかコードの見た目整えたいな～は大体なんとかなる
29. linterやformatterを入れていない人へ 自分が必ずミスのない、読みやすいコードが書けるという自信があるのであれば入れて いなくても問題ない(必ず強制されるものではないため) ただ、人は完璧ではないため、機械的に修正や整形、品質を担保してくれるなら入れ得 でしかなため、初期設定のままでも入れておいた方がいい 入れてくれ～たのむ～
30. 他にすること • スタイルガイドを読む ◦ 色んな所が出している ◦ スタイルガイドは、ある思想に基づいて作られているため、破綻しにくい ◦ 書いてあることは、ほぼ linterとformatterで設定できる • 他のOSSのコードを覗く ◦ 大体ESlintが入っているため、どんな設定がよく使われているかわかる
31. スタイルガイド googleが出しているスタイルガイド https://google.github.io/styleguide/jsguide.html MDNが出しているガイドライン https://developer.mozilla.org/en-US/docs/MDN/Writing_guidelines/Writing_style_g uide/Code_style_guide/JavaScript
32. スタイルガイド Airbnbが出しているスタイルガイド https://mitsuruog.github.io/javascript-style-guide/ node.jsが出しているスタイルガイド http://popkirby.github.io/contents/nodeguide/style.html
33. 課題 • これは絶対入れておくべきだろうという設定を探してくる • 実際に入れた時につまづいた知見