はじめに
はじめまして、フロントエンドエンジニアで最近はMyReferプロダクトの開発を担当している佐久間です。 MyReferフロントエンドの技術刷新の取り組みの一環としてTypeScriptの設定（TSConfig）を厳格化しました。 TSConfigの厳格化が必要な理由や、その対応プロセス、直面した課題、そして学んだことについて共有します。
TSConfigの厳格化とは
TypeScriptには多くの設定オプションがありますが、中でもstrictオプションは、型チェックをより厳密に行うための重要な設定です。これを有効にすると、次のような利点があります。
- 型安全性の向上: 暗黙のany型やnull、undefinedの扱いが厳密にチェックされ、型に関する誤りや潜在的なエラーを事前に発見できます。例えば、
noImplicitAnyを有効にすることで、明示されていない型を見逃さずに修正できます。 - バグの早期発見: 型のミスを減らし、予期せぬ動作を防げます。特に、
strictNullChecksを有効にすると、nullやundefinedの誤った扱いが明らかになり、修正することでバグを防止できます。 - コードメンテナンスの向上: コードの品質が高まり、メンテナンス性が向上します。新しいコードの追加や既存コードの変更が容易になり、開発効率も上がります。
当時のプロダクトの背景
当初は新規の開発を優先していたため、厳密な型チェックの設定を見送っていました。その結果、一部の型の安全性が保証されず、潜在的なバグのリスクが残っていました。さらに、フロントエンドのメンバーが増えてきたこともあり、個人のスキルに依存しない開発体制を整える必要が生じました。
対応方針
私たちのプロダクトでstrict: trueを設定したところ、459ファイルで2601件ものコンパイルエラーが発生しました。一度に全てのオプションを有効にするのは現実的ではないため、次のステップで対応を進めました。
- オプションごとの影響調査:
strict: trueにする前に、strict: trueにすることで有効化される各オプションを個別に有効化し、その影響範囲と対策を検討しました。 - タスクの分担: 各オプションごとにタスクを分け、チームメンバーで並行して作業を進めました。
- 小まめなリリース: 対応が完了したオプションごとにリリースを行い、問題が発生した場合の影響を最小限に抑えました。
strict: trueのオプション
| オプション | 概要 | プロダクトのエラー数 |
|---|---|---|
| noImplicitAny | 暗黙のany型を禁止する | Found 230 errors in 131 files. |
| strictNullChecks | nullやundefinedのチェックを厳しくする |
Found 1898 errors in 373 files. |
| strictFunctionTypes | 引数型の変性のチェックを厳しくする | Found 31 errors in 18 files. |
| strictBindCallApply | bind、call、applyの型チェックを厳しくする |
エラー無し |
| strictPropertyInitialization | クラスプロパティの初期化を必須にする | エラー無し |
| noImplicitThis | thisの型注釈を必須にする | Found 3 errors in 2 files. |
| useUnknownInCatchVariables | 例外捕捉catch(e)のeをunknown型として扱う |
Found 412 errors in 156 files. |
| alwaysStrict | JavaScriptのstrictモードを有効にする | エラー無し |
www.typescriptlang.org typescriptbook.jp
各オプションをチケットに分けることで作業を分担し、複数人で一気に進めることができました。
特に大変だったのは、noImplicitAnyとstrictNullChecksへの対応です。エラー数が多いのと、一括置換できるものでは無かったため、anyやnull、undefinedになっている箇所を一つ一つ修正していきました。
対応した結果
- 厳格な型チェックを導入することで、開発時点で潜在的なバグを早期に発見できるようになりました。
- ただし、リリース後に対応に関連する新たなバグを生み出してしまいました。次回以降は大規模な変更を行う際には、テストをさらに網羅的に行い、リリースの影響範囲をより慎重に管理して進めようと思います。
まとめ
- TSConfigの厳格化はプロジェクトの品質とメンテナンス性を向上させることができる。
- あとから導入する場合はオプションごとに対応するなど分割すると作業を進めやすい。
- 大規模な変更は段階的に導入し、影響範囲を管理することで、リスクを最小限に抑える。
最後に
お読みいただきありがとうございました。TalentXのフロントエンドチームでは、このような技術の刷新を日々行っています。 現在、TalentXでは一緒に働く仲間を募集しています。カジュアルな面談も行っていますので、興味のある方はぜひご応募ください！
