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
120
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
Deep Dive into ~/.claude/projects
hiragram
14
2.6k
MDN Web Docs に日本語翻訳でコントリビュートしたくなる
ohmori_yusuke
1
130
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
nrslib
2
860
High-Level Programming Languages in AI Era -Human Thought and Mind-
hayat01sh1da
PRO
0
800
今ならAmazon ECSのサービス間通信をどう選ぶか / Selection of ECS Interservice Communication 2025
tkikuc
21
4k
AI コーディングエージェントの時代へ:JetBrains が描く開発の未来
masaruhr
1
180
XP, Testing and ninja testing
m_seki
3
250
ISUCON研修おかわり会 講義スライド
arfes0e2b3c
1
450
Systèmes distribués, pour le meilleur et pour le pire - BreizhCamp 2025 - Conférence
slecache
0
120
Goで作る、開発・CI環境
sin392
0
240
코딩 에이전트 체크리스트: Claude Code ver.
nacyot
0
670
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
2
640
Featured
See All Featured
Automating Front-end Workflow
addyosmani
1370
200k
Side Projects
sachag
455
42k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
How to train your dragon (web standard)
notwaldorf
96
6.1k
Fireside Chat
paigeccino
37
3.5k
BBQ
matthewcrist
89
9.7k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
The Straight Up "How To Draw Better" Workshop
denniskardys
235
140k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
Adopting Sorbet at Scale
ufuk
77
9.5k
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