【入門編】 compilerOptions.strictNullChecks – TypeScript実践ガイド

こんにちは。フロントエンドの現場で長年コードと向き合っていると、ふと「なぜあんなに苦労したんだろう」と思う瞬間があります。その筆頭が、今回お話しする`strictNullChecks`という設定です。

「TypeScriptを始めたけど、なんだかエラーばかり出る」「`null`とか`undefined`って何なの？」と頭を抱えていませんか？大丈夫、その悩みはあなたが立派なエンジニアへの階段を登っている証拠です。今日は、この少し厳格な「門番」について、一緒に紐解いていきましょう。

—

そもそも「null」や「undefined」って何者？

たとえ話として、「冷蔵庫の中身」を想像してみてください。

型がある状態（`string`など）：冷蔵庫に「牛乳」が入っている。
`null`：冷蔵庫を開けたら「空っぽ」だった。でも、冷蔵庫自体はそこにある。
`undefined`：そもそも冷蔵庫を買うのを忘れていた（未定義）。

JavaScriptという言語は、とても大らかで優しい言語です。昔は「空っぽの冷蔵庫」を渡されても、「とりあえず中身の牛乳を飲んで！」と命令すると、エラーにならずに「中身がないよ！」と慌ててプログラムが止まってしまうことがよくありました。

これが、実務で一番怖い「予期せぬ実行時エラー（Runtime Error）」の原因です。

—

`strictNullChecks` は「最強の用心棒」

`tsconfig.json` にある `strictNullChecks: true` という設定は、いわば「空っぽの冷蔵庫を渡されるのを未然に防ぐ、最強の用心棒」です。

これを `true` にしておくと、TypeScriptは「おい！その変数、中身が空っぽ（null/undefined）かもしれないだろ！ちゃんと確認してから使え！」と、コードを書いている最中に厳しく注意してくれるようになります。

設定の場所

プロジェクトのルートにある `tsconfig.json` を開いてみてください。

{
“compilerOptions”: {
// ここが true になっていれば、安全装置がONです
“strictNullChecks”: true
}
}

—

実際にコードで見てみよう

例えば、「ユーザーの名前を表示する」という単純な処理を考えてみます。

// 名前が入っているかもしれないし、空っぽかもしれないデータ
const userName: string | null = null;

// strictNullChecks: true だと、ここで TypeScript が怒ります！
// 「userName は null かもしれないから、そのまま使うのは危険だよ！」
console.log(userName.length);

もし設定が `false` なら、このコードは動いてしまいます。そして、いざブラウザで実行した瞬間にアプリが真っ白に……なんてことが起こります。

では、どうすればいいのでしょうか？答えは簡単。「中身があるときだけ使う」という確認を挟むだけです。

const userName: string | null = “太郎”;

// if 文で「空っぽじゃないこと」を確認してあげる（型ガードと呼びます）
if (userName !== null) {
// この中では、TypeScript は「あ、この変数は絶対に中身が入ってるね！」と安心してくれる
console.log(userName.length);
} else {
// 空っぽだった時のケアもできる
console.log(“名前は登録されていません”);
}

—

なぜ、わざわざ面倒な設定をするの？

「エラーを出すなんて、厳しすぎるよ！」と感じるかもしれません。でも、想像してみてください。

何万行もある大きなアプリを作っているとき、どこでデータが消えてしまうか、全てを頭の中に記憶しておくのは人間には不可能です。この設定をオンにしておけば、「もし空っぽだったらどうする？」という問いを、常にプログラムが代わりに投げかけてくれるようになります。

結果として、リリース後に「画面が動かなくなった！」と冷や汗をかく回数が劇的に減るのです。

—

最後に：つまずいても大丈夫

最初は、このエラーの多さに「もう嫌だ！」と思うこともあるでしょう。でも、それはTypeScriptがあなたを守ろうと一生懸命に叫んでいる声です。

`null` や `undefined` が出たら、「あ、ここでデータが消える可能性があるんだな」と立ち止まる。
`if` 文で確認してあげる。
あるいは、`userName?.length`（オプショナルチェーン）という便利な書き方で、「中身があったら長さを出して、なかったら無視してね」とスマートに書く。

こうやって一つずつ丁寧に向き合っていけば、気づいたときには、あなたは「壊れにくい堅牢なコードを書くスペシャリスト」になっています。

焦らず、一歩ずつ。何かあったら、いつでもコードを見直してみてくださいね。応援しています！