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

TSKaigi 2024
https://tskaigi.org/talks/YTakahashii

スポンサーLT「チームで挑むTypeScriptコードの漸進的改善」
髙橋 佑太（株式会社メドレー 医療プラットフォーム本部 エンジニア）

Transcript

1. Copyright© Medley, Inc. ALL RIGHTS RESERVED. 1 チームで挑むTypeScriptコードの漸進的改善 2024年5⽉11⽇ 株式会社メドレー 医療プラットフォーム本部 プロダクト開発室 CLINICS開発第⼆グループ 髙橋 佑太
2. Copyright© Medley, Inc. ALL RIGHTS RESERVED. 2 ⾃⼰紹介 髙橋 佑太 / Yuta Takahashi 2021年に新卒⼊社 クラウド診療⽀援システムCLINICSの開発に従事 Webフロントエンドの設計を考えるのが好き 好きなプログラミング⾔語はTypeScript
3. Copyright© Medley, Inc. ALL RIGHTS RESERVED. 3 メドレーのミッション
4. Copyright© Medley, Inc. ALL RIGHTS RESERVED. 4 事業とプロダクト
5. Copyright© Medley, Inc. ALL RIGHTS RESERVED. 5 typescript-eslintのルール⾒直しによって TypeScriptコードを漸進的に改善する実践例をご紹介します。 本LTの要旨 当てはまる⽅は注⽬！ • 現状のLinterの設定に満⾜していない • Linterにどんなルールがあるのか詳しくない • 望ましいコードに対する共通理解をチームで形成したい
6. 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/
7. Copyright© Medley, Inc. ALL RIGHTS RESERVED. 7 背景：クラウド診療⽀援システムCLINICSの開発 開発年数 8年⽬ エンジニア⼈数 14名以上 TypeScriptとCLINICS Webフロントエンドでバージョン2系の頃から TypeScriptを活⽤
8. Copyright© Medley, Inc. ALL RIGHTS RESERVED. 8 背景：typescript-eslintルールの⾒直しが必要になった理由 個々人の嗜好やスキルセットに依存せず 一貫性のあるTypeScriptコードを実装する重要性が高まった チーム規模の拡大 • バックグラウンドの異なる 新しいメンバーが多数ジョイン • 人数が増えたことで、今までよりも強い コーディング規約が必要になった コラボレーションして作り上げる文化 • 得意領域の異なる様々なスキルセットの メンバーがTypeScriptを実装する • 得意/不得意に関係なく、一貫性のある TypeScriptコードを書ける環境が必要 typescript-eslintルールの見直し・改善へ
9. Copyright© Medley, Inc. ALL RIGHTS RESERVED. 9 チームで挑むTypeScriptコードの漸進的改善 改善の3STEP 1. 現状のルール設定を把握する 2. ルール読み合わせ会を通して必要なルールを議論する 3. 必要と判断したルールを error レベルで有効にする 体制 • ⼈数：4名 • ルール読み合わせ会の頻度：20分/週 • コード改善作業の頻度：各々⼿すきのタイミング
10. Copyright© Medley, Inc. ALL RIGHTS RESERVED. 10 STEP1：現状のルール設定を把握する 【初回のみ】スプレッドシートにすべてのルールと現在の設定値を整理 チームで挑むTypeScriptコードの漸進的改善 ✓ https://typescript-eslint.io/rules/ の⼀覧をコピー&ペーストして作成
11. Copyright© Medley, Inc. ALL RIGHTS RESERVED. 11 STEP2：読み合わせ会を通して必要なルールを議論する 【20分/週】off 設定のルールについて、 公式ドキュメントの正誤例を見ながら有効にすべきかを議論 チームで挑むTypeScriptコードの漸進的改善 ✓ 望ましいコードフォーマットに関する共通理解を形成できる ✓ 知らないルールや⾔語仕様を知る機会になる
12. Copyright© Medley, Inc. ALL RIGHTS RESERVED. 12 STEP3：必要と判断したルールを error レベルで有効にする 【スキマ時間】ルール単位で有効化 チームで挑むTypeScriptコードの漸進的改善 ✓ warnレベルだと無視されがちなため error レベルで有効化することを重視 ✓ 事前に議論済みのためスムーズに変更を取り込める
13. Copyright© Medley, Inc. ALL RIGHTS RESERVED. 13 約3ヶ⽉間の改善活動を振り返って チームで挑むTypeScriptコードの漸進的改善 元々有効だったルールの数 37/118 将来的に有効にしたいルールの数 98/118 私達に必要だった typescript-eslint のルール設定 • type-checked系のShared Config[*]に内包されているルールは概ね有効にしたい ◦ 既存コードとの兼ね合いで導⼊の費⽤対効果が低いルールは個別で無効化する⽅針 • Shared Configに⼊ってないルールも半数を有効にしたい メンバーの声 • コードレビューで細かい指摘が減って嬉しい！ • コードリーディング時の負荷が軽減されて嬉しい！ • 良いコード/悪いコード について議論できて楽しい！ [*] recommended-type-checked, stylistic-type-checked, strict-type-checked
14. Copyright© Medley, Inc. ALL RIGHTS RESERVED. 14 約3ヶ⽉間の改善活動を振り返って チームで挑むTypeScriptコードの漸進的改善 ルールの有効化は着実に進行中
15. Copyright© Medley, Inc. ALL RIGHTS RESERVED. 15 まとめ：ESLintルール読み合わせ会を通したTypeScriptコードの改善 改善の3STEP 1. 現状のルール設定を把握する 2. ルール読み合わせ会を通して必要なルールを議論する 3. 必要と判断したルールを error レベルで有効にする ESLintルール読み合わせ会の効果 • 望ましいコードフォーマットに対する共通認識をチームで形成できる • 事前に議論済みのためスムーズに変更を取り込める ３ヶ⽉間の改善活動の振り返り • type-checked系のShared Config(recommended-type-checked, stylistic-type-checked, strict-type-checked)のルールは将来的に概ね有効にしていく⽅針 • コードの可読性やレビュー効率の向上を実感している
16. Copyright© Medley, Inc. ALL RIGHTS RESERVED. 16