TypeScriptの「見えない落とし穴」を埋める：`noUncheckedIndexedAccess`という最強の守護神
現場でコードレビューをしていると、必ず一度は遭遇する「あー、またやってしまったか」というバグがあります。そう、配列のインデックスアクセスによる `undefined` 問題です。
「配列の要素数は分かっているはず」「このAPIレスポンスなら必ず値があるはず」。そう信じて書いた `const item = items[0]` が、ランタイムで牙を剥く。JavaScriptの歴史上、どれだけのエンジニアがこの「意図せぬundefined」で頭を抱えてきたことか。
今回は、TypeScriptの知られざる隠し玉、`tsconfig.json` の `noUncheckedIndexedAccess` について、なぜこれが「現場のプロ」に必須の設定なのか、深掘りしていきます。
—
なぜデフォルトのTypeScriptは「嘘」をつくのか
TypeScriptは本来、型安全を保証するツールです。しかし、実はデフォルト設定では、配列のインデックスアクセスに対して「甘い顔」をします。
const names: string[] = [“Alice”, “Bob”];
const name = names[99]; // コンパイラは「string」だと信じ込む
console.log(name.toUpperCase()); // ランタイムで “TypeError: Cannot read properties of undefined”
ブラウザのJavaScriptエンジン（V8など）から見れば、存在しないインデックスへのアクセスは単に `undefined` を返すだけの仕様です。しかし、TypeScriptのデフォルト設定では、`names[99]` は `string` 型であると「嘘」をついてしまいます。
この「言語レベルの嘘」を修正し、コンパイラに「配列のアクセスには常に `undefined` が紛れ込む可能性がある」と認識させるのが、`noUncheckedIndexedAccess` の役割です。
—
導入するだけで世界が変わる
`tsconfig.json` にこの一行を加えるだけで、TypeScriptは現実主義者になります。
{
“compilerOptions”: {
“noUncheckedIndexedAccess”: true
}
}
この設定をONにした瞬間、あなたのプロジェクトの既存コードから、ありとあらゆる「潜在的なバグ」が赤色の波線として浮かび上がってくるはずです。少し冷や汗が出るかもしれませんが、それはチームが一段上の堅牢性を手に入れた証拠です。
—
実務でどう書くか：ベストプラクティス
この設定を導入すると、コンパイラは `names[i]` を `string | undefined` 型として扱います。これに対する最もスマートな対処法は、型ガードを適切に活用することです。
現場でそのまま使える、安全なアクセスパターンを共有します。
/
- 実務で使える安全なアクセス例
/
const items: string[] = [“Apple”, “Banana”];
// 1. オプショナルチェーンを使う（一番手軽）
const item1 = items[0]?.toUpperCase();
// 2. if文でガードする（確実な制御フロー）
const item2 = items[1];
if (item2 !== undefined) {
// このブロック内では item2 は string 型として推論される
console.log(item2.toUpperCase());
}
// 3. 配列の分割代入とデフォルト値
const [first = “Unknown”] = items;
console.log(first.toUpperCase()); // 安全に処理可能
—
なぜこの設定が「伝説的」なのか
この設定を有効にすると、コードの「防御的プログラミング」が強制されます。
- APIレスポンスの疎結合化: バックエンドの仕様変更で配列が空になる可能性がある場合、型定義がそれを自動的に警告してくれます。
- 「とりあえずany」からの脱却: `any` で型を誤魔化していた箇所が、インデックスアクセスを修正する過程で、より適切なインターフェース設計へとリファクタリングされる好循環が生まれます。
もちろん、最初は「面倒くさい」と感じるかもしれません。しかし、「型定義が安全と言ったから安全だ」という信頼関係をコンパイラと結ぶことこそが、大規模開発を破綻させないための、最も泥臭く、かつ最も尊い努力なのです。
最後に：明日の現場へ
もし今、あなたが担当しているプロジェクトの `tsconfig` がデフォルトのままだとしたら、今日がリファクタリングのチャンスです。
まずは `noUncheckedIndexedAccess: true` を入れてみてください。そして、真っ赤になったエディタを一つずつ、丁寧に修正していく。その作業こそが、あなたのコードを「ただ動くもの」から「壊れない資産」へと昇華させるプロセスです。
さあ、エディタを開いて、プロジェクトをより強固なものにしましょう。現場からは以上です。
コメント