【実務・中級編】 compilerOptions.strictNullChecks – TypeScript実践ガイド

「`strictNullChecks`をONにしない」という選択肢は、現代のフロントエンド開発には存在しない

フロントエンドの現場で「TypeScriptを導入しているのに、なぜかランタイムエラーで落ちる」という事態に遭遇したことはないだろうか？その原因の8割は、Nullポインタ参照……つまり、`undefined`や`null`が混入してはいけない場所に滑り込んでいることだ。

TypeScriptを導入する最大の動機は、型安全による「安心感」にあるはずだ。しかし、`tsconfig.json`で `strictNullChecks: false` にしているプロジェクトは、言わば「ブレーキの効かない高級車」に乗っているのと同じ。どれだけ型定義をこねくり回しても、その型はザルであり、実行時にはいつ爆発してもおかしくない脆弱性を抱えている。

今回は、TypeScriptの心臓部とも言える `strictNullChecks` について、現場のリアリティを交えながら深掘りしていこう。

—

なぜブラウザは「undefined」を許してしまったのか

まず、少しだけ技術的な背景を整理しよう。JavaScriptという言語は、設計時に「`null`や`undefined`へのアクセスをエラーにしない」という設計思想（というより妥協）をとった。ブラウザの実行エンジン（V8など）は、プロパティアクセス時にそれが`undefined`であっても、即座にプロセスを殺すのではなく、`undefined`を返すか、あるいはプロパティアクセスで例外を投げるという挙動をする。

TypeScriptの `strictNullChecks` は、この「JavaScriptの甘え」を言語レベルで断ち切るための強力なスイッチだ。これをONにすると、`string`型は「絶対に`string`である」ことが保証され、`string | undefined` と明示しない限り、`undefined`を代入することはコンパイルエラーになる。

この「コンパイル時に検知する」というプロセスこそが、デバッグコストを劇的に下げ、リリース後の「白い画面（ホワイトアウト）」を防ぐ唯一の武器となる。

—

実践：現場で直面する「型ガード」の活用術

`strictNullChecks` をONにすると、最初はコンパイルエラーの嵐に襲われるはずだ。「今まで動いていたコードが動かない！」と焦るかもしれないが、それは「今までたまたま動いていた（＝潜在的なバグが放置されていた）」に過ぎない。

中級者として、これをスマートに切り抜けるには「型ガード（Type Guards）」を使いこなすことが必須だ。

現場でよくある「APIレスポンスの型安全処理」の例

/
interface User {
id: string;
email?: string; // emailは存在しない可能性がある
}

function sendWelcomeEmail(user: User) {
// strictNullChecks: true の場合、以下のコードはエラーになる
// console.log(user.email.toUpperCase()); // エラー: ‘user.email’ is possibly ‘undefined’.

// 【正解1】型ガードで絞り込む（もっとも安全な方法）
if (user.email) {
// このスコープ内では、TSは自動的に email を string と推論する
console.log(user.email.toUpperCase());
}

// 【正解2】オプショナルチェーンで安全にアクセスする
// undefinedの場合は undefined が返るだけで、エラーにはならない
const emailUpper = user.email?.toUpperCase();

// 【正解3】Null合体演算子でデフォルト値を注入する
const email = user.email ?? “no-email@example.com”;
console.log(email.toUpperCase());
}

—

「非Nullアサーション」という禁断の果実

コードを書いていると、どうしても「ここは絶対に値があるはずだ！」と確信できる瞬間がある。その時に使いたくなるのが `!`（非Nullアサーション演算子）だ。

const element = document.getElementById(“app”)!; // ! をつけることで「絶対にnullじゃない」とTSに強制する

これを使えば一瞬でエラーは消える。しかし、これは多用厳禁だ。
`!` を使うということは、TypeScriptに対する「責任放棄」と同義である。もし万が一その値が`null`だった場合、実行時にブラウザは容赦なくクラッシュする。

シニアからのアドバイス：
`!` を使いたくなったときは、コードの構造を見直すチャンスだ。本当にそこは`null`になり得ないのか？それとも、親コンポーネントからのデータフローが曖昧なのか？泥臭くても、`if`文や`filter`メソッドで正しく絞り込む方が、結果としてチームのコードベースは長生きする。

—

まとめ：今日から始める一歩

もし、今関わっているプロジェクトで `strictNullChecks` がOFFになっているなら、今日すぐにでも `true` に書き換えてみてほしい。

1. 段階的に有効化する: `tsconfig.json` を変更して `tsc` を走らせると、数百〜数千のエラーが出るはずだ。心が折れそうになるが、まずは「影響範囲が狭いファイル」から修正を始めるのがコツだ。
2. 無理な型アサーションは避ける: `as any` や `!` で逃げないこと。面倒でも型定義を正しく書くことが、後々の自分を救う。
3. チームを啓蒙する: なぜこれが必要なのかをメンバーに語れるようになれば、君はもう一段上のエンジニアだ。

`strictNullChecks` は、単なる設定項目ではない。それは「品質に対するチームの意思表明」だ。TypeScriptの恩恵を最大限に受けて、安心してコードを書き、ぐっすりと眠れる夜を手に入れよう。