Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Mita.ts 導入してみたいtypescript-eslintのルール
Search
yub0n
August 28, 2024
Programming
0
130
Mita.ts 導入してみたいtypescript-eslintのルール
2024/08/28
https://mitats.connpass.com/event/327507/
yub0n
August 28, 2024
Tweet
Share
Other Decks in Programming
See All in Programming
print("Hello, World")
eddie
2
530
Kiroで始めるAI-DLC
kaonash
2
620
Cache Me If You Can
ryunen344
2
3k
詳解!defer panic recover のしくみ / Understanding defer, panic, and recover
convto
0
250
AIでLINEスタンプを作ってみた
eycjur
1
230
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
410
@Environment(\.keyPath)那么好我不允许你们不知道! / atEnvironment keyPath is so good and you should know it!
lovee
0
120
🔨 小さなビルドシステムを作る
momeemt
4
690
プロポーザル駆動学習 / Proposal-Driven Learning
mackey0225
2
1.3k
Processing Gem ベースの、2D レトロゲームエンジンの開発
tokujiros
2
130
アセットのコンパイルについて
ojun9
0
130
250830 IaCの選定~AWS SAMのLambdaをECSに乗り換えたときの備忘録~
east_takumi
0
400
Featured
See All Featured
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
Unsuck your backbone
ammeep
671
58k
We Have a Design System, Now What?
morganepeng
53
7.8k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.2k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Building Adaptive Systems
keathley
43
2.7k
Code Reviewing Like a Champion
maltzj
525
40k
The Straight Up "How To Draw Better" Workshop
denniskardys
236
140k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.1k
Building an army of robots
kneath
306
46k
Producing Creativity
orderedlist
PRO
347
40k
Designing Experiences People Love
moore
142
24k
Transcript
導入してみたい typescript-eslintのルール Yud ai Su zu ki / @yu b0n
2024.08.28
自己紹介 2022年3月 atama plus株式会社 入社 スクラムチームでエンジニアリングや プロダクトマネジメントに取り組みつつ、 フロントエンド刷新プロジェクトのオーナー、 フロントエンドギルド (≒委員会)
のマスター を務める。 Y udai Suz uki @yub0 n 2
会社紹介
ⓒ atama plus Inc. 4 AI教材「atama+」を開発。 一人ひとりの 「得意」「苦手」を分析し、 学習をパーソナライズします。
ⓒ atama plus Inc. ミッション 5 「基礎学力」の習得 「基礎学力」の習得 「社会でいきる力」の習得 学習を一人ひとり最適化し、「基礎学力」を最短で身につけ、
そのぶん増える時間で、「社会でいきる力」を伸ばす。 そんな新しい学びを数億人の生徒に届け、社会のまんなかから変えていきます。
本題
ⓒ atama plus Inc. その開発環境、 ESLint入ってますか? 7
ⓒ atama plus Inc. ESLintとは • https://eslint.org/ • JavaScriptのコードをチェックしてくれる静的解析ツール •
コードが正しく書かれているか、バグがないかなどを自動で見つけて教えてく れる メリット • コードの書き方を揃えて認知負荷を軽減できる • 不要なコードを消してレビュー工数を削減できる • 踏みやすい落とし穴を回避してバグ発生を防止できる • モジュールの境界・依存関係を明確にして治安を維持できる 導入してみたいtypescript-eslintのルール 8
ⓒ atama plus Inc. typescript-eslint • https://typescript-eslint.io/ • ESLintのデフォルトのJavaScript parserはTypeScript
固有の構文をネイティブ に読み取ることができない • =TypeScriptの構文を解析できるようにしたESLint atama plusにおいてもESLintルールの強化に向けて調査を行ったので、 みなさんが「知らなかったけど、導入してみたくなる...!」 というラインを狙ってtypescript-eslintのルールをご紹介していこうと思います。 導入してみたいtypescript-eslintのルール 9
コードの書き方を揃えて 認知負荷を軽減できるルール
ⓒ atama plus Inc. コードの書き方を揃えて認知負荷を軽減できるルール prefer-includes 文字列や配列に値が含まれているかの確認の際に indexOfで判定する方法とincludesで判定する方法があります。 導入してみたいtypescript-eslintのルール 11
array.indexOf(value) !== -1; array.includes(value); →includesはES2016に追加されたメソッドで、 (好みもあるかもしれませんが一般的に)includesを利用したほうが 直感的でわかりやすいです。
ⓒ atama plus Inc. コードの書き方を揃えて認知負荷を軽減できるルール prefer-includes 文字列や配列に任意の値が含まれているかの確認の際に ES2016から追加されたincludesを利用することを強制できます。 導入してみたいtypescript-eslintのルール 12
incorrect array.indexOf(value) !== -1; str.indexOf(value) !== -1; correct array.includes(value); str.includes(value);
ⓒ atama plus Inc. コードの書き方を揃えて認知負荷を軽減できるルール その他のおすすめ prefer-find 配列の中で条件に一致する最初の項目を返す際に filter()[0]ではなくfindで行うことを強制できます。 prefer-optional-chain
nullableなオブジェクトからプロパティを取り出す際に、 論理積演算子(&&)ではなくオプショナルチェーン(?.)を利用することを強制でき ます。 導入してみたいtypescript-eslintのルール 13
不要なコードを消して レビュー工数を削減できるルール
ⓒ atama plus Inc. 不要なコードを消してレビュー工数を削減できるルール no-unnecessary-condition 以下のコードではitemsがT[]型なのでnullableな値にはなり得ないですが、 if文で不要なチェックを行っています。 →おそらく配列が空かどうかのチェックをしたかったが、 誤った実装をしています。
導入してみたいtypescript-eslintのルール 15 function head<T>(items: T[]) { if (items) { return items[0].toUpperCase(); } }
ⓒ atama plus Inc. 不要なコードを消してレビュー工数を削減できるルール no-unnecessary-condition 型情報を元にif文での不要な分岐をチェックできます。 今回の例では本来やりたかった配列が空かどうかのチェックが 間違っていたことに気づくことができます。 導入してみたいtypescript-eslintのルール
16 incorrect function head<T>(items: T[]) { if (items) { return items[0].toUpperCase(); } } correct function head<T>(items: T[]) { if (items.length) { return items[0].toUpperCase(); } }
ⓒ atama plus Inc. 不要なコードを消してレビュー工数を削減できるルール その他のおすすめ no-unnecessary-boolean-literal-compare 不要なブール値とブールリテラルの比較をチェックできます。 たとえば以下の例では、someConditionがtrueであるかの比較は不要なので、 エラーや警告を出すことができます。
導入してみたいtypescript-eslintのルール 17 incorrect declare const someCondition: boolean; if (someCondition === true) { } correct declare const someCondition: boolean; if (someCondition) { }
踏みやすい落とし穴を回避して バグ発生を防止できるルール
ⓒ 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'); }
ⓒ atama plus Inc. 踏みやすい落とし穴を回避してバグ発生を防止できるルール strict-boolean-expressions bool型が期待される式で非bool型の使用を禁止します。 今回の例では0という数値がfalsyな値として意図せず判定されてしまうことを 防ぐことができます。 導入してみたいtypescript-eslintのルール
20 incorrect declare const num: number | undefined; if (num) { console.log('num is defined'); } correct const num: number | undefined = 0; if (num != null) { console.log('num is defined'); }
ⓒ 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]
ⓒ atama plus Inc. 踏みやすい落とし穴を回避してバグ発生を防止できるルール require-array-sort-compare string型のArray以外で引数なしのsortメソッドの使用を禁止します。 今回の例では文字列の要素としてソートされて 意図しない順序になってしまうことを防ぐことができます。 導入してみたいtypescript-eslintのルール
22 incorrect const array: number[]; array.sort(); correct const array: number[]; array.sort((a, b) => a - b);
ⓒ 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]'
モジュールの境界・依存関係を明確にして 治安を維持できるルール
ⓒ atama plus Inc. モジュールの境界・依存関係を明確にして治安を維持できるルール no-restricted-imports 以下のコードではdeprecatedされたモジュール(deprecated-foo)からimportさ れたり、ラッパーを用意してるにも関わらず直接外部ライブラリ(@bar- library)からimportが行われています。 →いつまで経ってもdeprecatedされたモジュールが呼び出され続けたり、用意さ
れたラッパーが使われないという状況が発生してしまいます。 導入してみたいtypescript-eslintのルール 25 import foo from 'deprecated-foo'; import { bar } from '@bar-library';
ⓒ atama plus Inc. モジュールの境界・依存関係を明確にして治安を維持できるルール no-restricted-imports 指定されたモジュールのimportを禁止します。 今回の例ではdeprecatedされたモジュール(deprecated-foo)からのimportや ラッパーを用意してるにも関わらず外部ライブラリ(@bar-library)から 直接importをされてしまうことを防ぐことができます。
※別途no-restricted-importsに関するeslintrcの設定が必要です。 導入してみたいtypescript-eslintのルール 26 incorrect import foo from 'deprecated-foo'; import { bar } from '@bar-library'; correct import foo from 'new-foo'; import { bar } from 'bar-lib-wrapper';
ⓒ 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';
ⓒ atama plus Inc. 以上です! みなさんおすすめのESLintプラグインやルールも ぜひ教えてください! 28
ともに “ Wow students. ”を届ける仲間を募集しています! 「atamaplus 採用」 @atamaplus_dev