noUncheckedIndexedAccess、3時間、1万円。 / noUncheckedIndexedAccess, 3 Hours, 10,000 JPY.

2026年6月10開催「TSKaigi  Night talks 〜after conference〜」で登壇した際の発表資料です。
https://findy.connpass.com/event/392420/

Transcript

1. © kaonavi, inc. noUncheckedIndexedAccess、 3時間、1万円。 2026.06.10
2. © kaonavi, inc. 1 鈴木 僚太 (uhyo) 株式会社カオナビ　 CTO室 フロントエンドエキスパート フロントエンドの開発環境改善や 開発効率向上が仕事。 発表者紹介
3. © kaonavi, inc. 今日の発表内容 noUncheckedIndexedAccessは、TypeScriptコードの 型安全性に寄与する重要なコンパイラオプションです。 しかし、特に昔からやっているプロジェクトでは、この オプションをオンにしていない ことが多くあります。
4. © kaonavi, inc. 今日の発表内容 noUncheckedIndexedAccessを、プロジェクトの途中から オンにすることはとても大変なことでした。 しかし、今は違います。 弊社では、AIに1万円課金することで3時間で有効化を完了するこ とができました。 （ただし、とりあえず型エラーを抑制しただけで、根本解決は引き続き）
5. © kaonavi, inc. noUncheckedIndexedAccessとは インデックスシグネチャ による要素アクセスについて、 結果に自動的にundefined型を含める機能。 // arr: number[]; obj: Record<string, string> // noUncheckedIndexedAccess なしの場合 const num = arr[100]; // number const str = obj.foo; // string
6. © kaonavi, inc. noUncheckedIndexedAccessとは インデックスシグネチャ による要素アクセスについて、 結果に自動的にundefined型を含める機能。 // arr: number[]; obj: Record<string, string> // noUncheckedIndexedAccess ありの場合 const num = arr[100]; // number | undefined const str = obj.foo; // string | undefined
7. © kaonavi, inc. 有効化はとても大変 従来undefinedの可能性を考慮していなかった箇所で、 undefinedの可能性が出現する。 undefinedの可能性を考慮した型に直さないと型エラーが 発生。 弊社アプリでは数千件の型エラー が！
8. © kaonavi, inc. 有効化はとても大変 型エラーの例:
9. © kaonavi, inc. 対応方針① 根本対応はランタイムも含めた直しが伴うが、 それだと永遠に終わらない。 そこで、!を使った暫定対応 で型エラーを消すことを目標と する。
10. © kaonavi, inc. 対応方針① 暫定対応で型エラーを消した↓
11. © kaonavi, inc. 対応方針② 数千件のエラー箇所に手で!を付けて回るのは厳しい。 エラー発生箇所 ＝ ! 付与箇所ではないため、 スクリプトでの自動修正も困難。
12. © kaonavi, inc. 対応方針② それならAIに修正してもらおう ！！！ （弊社はClaude Codeを主に使用しています）
13. © kaonavi, inc. 対応方針② しかし、単純にAIに「数千件のエラー全部直して！ 😁👊」 と頼むだけだと、時間と金がとてもかかる ことが予想される。 そこで、ファイル単位でサブエージェントにアサインする 方法を考えた。 （当時はAgent Teamsもworkflowもまだ無かったよ！）
14. © kaonavi, inc. 具体的な方法 大量に出力された型エラーを、ファイル単位で分解 し、 別々のファイルに書き込む。 （foo.tsの型エラーを記録したファイル、bar.tsの型エラーを 記録したファイル……が生成される） （もちろんAIがそのためのスクリプトを書きました）
15. © kaonavi, inc. 具体的な方法 ファイルごとにサブエージェントを起動し、 「このファイルの型エラーを!を使用して修正して！」と 依頼する。 数百件のサブエージェント が起動することになる。
16. © kaonavi, inc. ポイント: コスト削減 ファイル単位でサブエージェントに分解することで、 各エージェントのコンテキストの最小化 を図る。 さらに、ファイル単位のタスクは十分に単純なので、 モデルとしてHaikuを使用。
17. © kaonavi, inc. ポイント: 終了判定 各サブエージェントに、「エラーの修正が完了したら担当の エラーメッセージファイルを消去 する」と指示した。 これにより、サブエージェントの作業が終わったかどうかを 「ファイルが消えているかどうか 」で判定できる。 リトライ性も高い。
18. © kaonavi, inc. 結果 大量のサブエージェントが起動し、数十分程度 で全エラーの 修正が自動的に行われた！ このあと検証なども含め、作業時間の合計が3時間くらい。 AI代はHaikuの利用が功を奏したのか、1万円以内になった。
19. © kaonavi, inc. うまくいかなかった点 Haikuに「!を使用してエラーを修正して」と指示したら、 !!obj[key] のような修正をしてきた。とんちか？ また、数カ所指示に反してランタイムの修正をしてきた 箇所もあった。（その後の検証作業で検出） Haikuの使用はケチりすぎたかも？
20. © kaonavi, inc. まとめ noUncheckedIndexdedAccessの有効化は、 昔はすごく困難な仕事でしたが、 AIを活用すれば3時間で終了するタスクになりました。 まだ有効化していない人は明日有効化しよう！