TypeScriptコードの漸進的改善 / Progressive Improvement of TypeScript Code

by Medley Inc.

Slide 1

Slide 1 text

Slide 2

Slide 2 text

Slide 3

Slide 3 text

Slide 4

Slide 4 text

Slide 5

Slide 5 text

Copyright© Medley, Inc. ALL RIGHTS RESERVED. 5 typescript-eslintのルール⾒直しによって TypeScriptコードを漸進的に改善する実践例をご紹介します。本LTの要旨当てはまる⽅は注⽬！ ● 現状のLinterの設定に満⾜していない ● Linterにどんなルールがあるのか詳しくない ● 望ましいコードに対する共通理解をチームで形成したい

Slide 6

Slide 6 text

Copyright© Medley, Inc. ALL RIGHTS RESERVED. 6 typescript-eslint[2] ● TypeScriptのためのESLintプラグイン ● TypeScript特有の機能や構⽂をサポートした約120のルールを提供*2024/05時点 ESLint[1] ● JavaScriptやTypeScriptのためのオープンソースの静的解析ツール ● コードの誤り検出やコーディング規約の遵守のために利⽤される ● ルールの選択やプロジェクト固有の設定による柔軟なカスタマイズが可能背景：ESLintとtypescript-eslint [1]Find and fix problems in your JavaScript code - ESLint - Pluggable JavaScript Linter, https://eslint.org/ [2]typescript-eslint, https://typescript-eslint.io/

Slide 7

Slide 7 text

Slide 8

Slide 8 text

Copyright© Medley, Inc. ALL RIGHTS RESERVED. 8 背景：typescript-eslintルールの⾒直しが必要になった理由個々人の嗜好やスキルセットに依存せず一貫性のあるTypeScriptコードを実装する重要性が高まったチーム規模の拡大 ● バックグラウンドの異なる新しいメンバーが多数ジョイン ● 人数が増えたことで、今までよりも強いコーディング規約が必要になったコラボレーションして作り上げる文化 ● 得意領域の異なる様々なスキルセットのメンバーがTypeScriptを実装する ● 得意/不得意に関係なく、一貫性のある TypeScriptコードを書ける環境が必要 typescript-eslintルールの見直し・改善へ

Slide 9

Slide 9 text

Copyright© Medley, Inc. ALL RIGHTS RESERVED. 9 チームで挑むTypeScriptコードの漸進的改善改善の3STEP 1. 現状のルール設定を把握する 2. ルール読み合わせ会を通して必要なルールを議論する 3. 必要と判断したルールを error レベルで有効にする体制 ● ⼈数：4名 ● ルール読み合わせ会の頻度：20分/週 ● コード改善作業の頻度：各々⼿すきのタイミング

Slide 10

Slide 10 text

Slide 11

Slide 11 text

Copyright© Medley, Inc. ALL RIGHTS RESERVED. 11 STEP2：読み合わせ会を通して必要なルールを議論する【20分/週】oﬀ 設定のルールについて、公式ドキュメントの正誤例を見ながら有効にすべきかを議論チームで挑むTypeScriptコードの漸進的改善 ✓ 望ましいコードフォーマットに関する共通理解を形成できる ✓ 知らないルールや⾔語仕様を知る機会になる

Slide 12

Slide 12 text

Slide 13

Slide 13 text

Copyright© Medley, Inc. ALL RIGHTS RESERVED. 13 約3ヶ⽉間の改善活動を振り返ってチームで挑むTypeScriptコードの漸進的改善元々有効だったルールの数 37/118 将来的に有効にしたいルールの数 98/118 私達に必要だった typescript-eslint のルール設定 ● type-checked系のShared Conﬁg[*]に内包されているルールは概ね有効にしたい ○ 既存コードとの兼ね合いで導⼊の費⽤対効果が低いルールは個別で無効化する⽅針 ● Shared Conﬁgに⼊ってないルールも半数を有効にしたいメンバーの声 ● コードレビューで細かい指摘が減って嬉しい！ ● コードリーディング時の負荷が軽減されて嬉しい！ ● 良いコード/悪いコードについて議論できて楽しい！ [*] recommended-type-checked, stylistic-type-checked, strict-type-checked

Slide 14

Slide 14 text

Slide 15

Slide 15 text

Copyright© Medley, Inc. ALL RIGHTS RESERVED. 15 まとめ：ESLintルール読み合わせ会を通したTypeScriptコードの改善改善の3STEP 1. 現状のルール設定を把握する 2. ルール読み合わせ会を通して必要なルールを議論する 3. 必要と判断したルールを error レベルで有効にする ESLintルール読み合わせ会の効果 ● 望ましいコードフォーマットに対する共通認識をチームで形成できる ● 事前に議論済みのためスムーズに変更を取り込める３ヶ⽉間の改善活動の振り返り ● type-checked系のShared Conﬁg(recommended-type-checked, stylistic-type-checked, strict-type-checked)のルールは将来的に概ね有効にしていく⽅針 ● コードの可読性やレビュー効率の向上を実感している