Upgrade to Pro — share decks privately, control downloads, hide ads and more …

導入してみたいtypescript-eslintのルール/Mita.ts

atama plus
September 30, 2024
48

 導入してみたいtypescript-eslintのルール/Mita.ts

2024年8月28日に開催されたTypeScriptのコミュニティ「Mita.ts」にて弊社の鈴木(dev)が登壇しました。

▼イベント情報
https://mitats.connpass.com/event/327507/

▼Tech Blogはこちら
https://zenn.dev/p/atamaplus

atama plus

September 30, 2024
Tweet

More Decks by atama plus

Transcript

  1. ⓒ atama plus Inc. ミッション 5 「基礎学力」の習得 「基礎学力」の習得 「社会でいきる力」の習得 学習を一人ひとり最適化し、「基礎学力」を最短で身につけ、

    そのぶん増える時間で、「社会でいきる力」を伸ばす。 そんな新しい学びを数億人の生徒に届け、社会のまんなかから変えていきます。
  2. ⓒ atama plus Inc. ESLintとは • https://eslint.org/ • JavaScriptのコードをチェックしてくれる静的解析ツール •

    コードが正しく書かれているか、バグがないかなどを自動で見つけて教えてく れる メリット • コードの書き方を揃えて認知負荷を軽減できる • 不要なコードを消してレビュー工数を削減できる • 踏みやすい落とし穴を回避してバグ発生を防止できる • モジュールの境界・依存関係を明確にして治安を維持できる 導入してみたいtypescript-eslintのルール 8
  3. ⓒ atama plus Inc. typescript-eslint • https://typescript-eslint.io/ • ESLintのデフォルトのJavaScript parserはTypeScript

    固有の構文をネイティブ に読み取ることができない • =TypeScriptの構文を解析できるようにしたESLint atama plusにおいてもESLintルールの強化に向けて調査を行ったので、 みなさんが「知らなかったけど、導入してみたくなる...!」 というラインを狙ってtypescript-eslintのルールをご紹介していこうと思います。 導入してみたいtypescript-eslintのルール 9
  4. ⓒ atama plus Inc. コードの書き方を揃えて認知負荷を軽減できるルール prefer-includes 文字列や配列に値が含まれているかの確認の際に indexOfで判定する方法とincludesで判定する方法があります。 導入してみたいtypescript-eslintのルール 11

    array.indexOf(value) !== -1; array.includes(value); →includesはES2016に追加されたメソッドで、 (好みもあるかもしれませんが一般的に)includesを利用したほうが 直感的でわかりやすいです。
  5. ⓒ atama plus Inc. コードの書き方を揃えて認知負荷を軽減できるルール その他のおすすめ prefer-find 配列の中で条件に一致する最初の項目を返す際に filter()[0]ではなくfindで行うことを強制できます。 prefer-optional-chain

    nullableなオブジェクトからプロパティを取り出す際に、 論理積演算子(&&)ではなくオプショナルチェーン(?.)を利用することを強制でき ます。 導入してみたいtypescript-eslintのルール 13
  6. ⓒ atama plus Inc. 踏みやすい落とし穴を回避してバグ発生を防止できるルール strict-boolean-expressions 以下のコードではnumが定義されているか(= undefinedではないか)どうかを if文で判定しています。 →num

    = 0のケースもfalsyなので、条件分岐の中に入らず 想定外の不具合を生んでしまいます。 導入してみたいtypescript-eslintのルール 19 declare const num: number | undefined; if (num) { console.log('num is defined'); }
  7. ⓒ atama plus Inc. 踏みやすい落とし穴を回避してバグ発生を防止できるルール require-array-sort-compare 以下のコードではnumberの配列を引数なしでsortメソッドを 呼び出しています。 →引数なし(= ソート順を定義する関数がない)の場合は、

    どんな型の要素でも文字列として認識されてソートされてしまいます。 導入してみたいtypescript-eslintのルール 21 const array: number[]; array.sort(); // [1, 2, 10, 3, 20].sort(); -> [1, 10, 2, 20, 3]
  8. ⓒ atama plus Inc. 踏みやすい落とし穴を回避してバグ発生を防止できるルール その他のおすすめ restrict-plus-operands 型が異なる変数を+演算子で結合されるのを禁止できます。 導入してみたいtypescript-eslintのルール 23

    const fn = (a: string, b: number) => a + b; // fn(“1”, 1); -> “11” restrict-template-expressions テンプレートリテラルにstring型以外の変数を埋め込むことを禁止できます。 const arg1 = { name: 'Foo' }; // `arg1 = ${arg1 || null}` -> 'arg1 = [object Object]'
  9. ⓒ atama plus Inc. モジュールの境界・依存関係を明確にして治安を維持できるルール その他のおすすめ explicit-module-boundary-types exportされた関数およびクラスのpublic classメソッドに明示的な戻り値と引 数の型を要求します。

    導入してみたいtypescript-eslintのルール 27 incorrect export function test() { return; } export const arrowFn = () => 'test'; correct export function test(): void { return; } export const arrowFn = (): string => 'test';