こんにちは。TypeScriptの世界へようこそ。
日々、フロントエンドの最前線でコードを書いていると、「型」という相棒がいかに私たちの背中を守ってくれているかを痛感します。
今日は、TypeScriptの心臓部とも言える「`strictNullChecks`」という設定について、お話しさせてください。「なんか設定ファイルにあるよね」くらいの認識かもしれませんが、これ、実はあなたのコードが「突然落ちる」のを防ぐための最強の防波堤なんです。
—
TypeScriptの「優しい嘘」と「厳しい現実」
まずは、少し想像してみてください。あなたは今、オンラインショップの「注文確認画面」を作っています。
ユーザーが名前を入力してくれたら、画面に「〇〇様、ありがとうございます！」と表示する。この時、もしユーザーが名前を入れ忘れていたら……？
- JavaScriptの感覚： 「まあ、とりあえず空っぽのまま進んじゃおうぜ！ 画面が真っ白になっても知らんけど！」
- TypeScriptの感覚（strictNullChecksがOFFの場合）： 「えっ、名前がないの？ まあいいや、とりあえず『文字列』ってことにしておくから、後で何かあっても自己責任でよろしく！」
この「とりあえずOKにしておく」という優しさが、実は後で「Cannot read property ‘length’ of null」という、エンジニアにとって最も胃が痛くなるエラーを引き起こすんです。
`strictNullChecks` は「空っぽ」を許さない厳格な番人
`tsconfig.json` にある `strictNullChecks: true` という設定は、TypeScriptに「『ないもの（nullやundefined）』を『あるもの』として扱うな！」と厳しく命じるスイッチです。
これを入れると、TypeScriptはこう言います。
「おい、このデータは『空っぽ（null）』かもしれないぞ！ それなのに『文字列として扱おう』とするなんて危ないよ。ちゃんとチェックしたの？」
実例で見てみましょう
まずは、この設定が効いている環境でのコードを見てください。
// 名前を入れる変数。nullかもしれない（まだ入力されていない）と想定します
let userName: string | null = null;
// 普通に長さを調べようとすると……？
// TypeScriptがここで全力で止めてくれます！
// 「エラー：userName は ‘null’ の可能性があります」
console.log(userName.length);
// だから、ちゃんとチェックしてあげる必要があるんです
if (userName !== null) {
// ここに来たということは、userName は間違いなく「文字列」だと確定した！
console.log(userName.length); // これなら安心です
} else {
console.log(“まだ名前が入力されていません”);
}
なぜこの「面倒くささ」が必要なのか？
「いちいち `if` 文でチェックするの、面倒くさいな……」と感じるかもしれませんね。でも、この「面倒くささ」こそが、あなたのコードを「壊れないコード」に変える魔法なんです。
例えば、お買い物をするとき。
「カバンの中には必ず財布が入っている」と思ってレジで開けたら、実はカバンが空っぽだったら……大パニックですよね。
`strictNullChecks` は、カバンを開ける前に「ちゃんと財布が入ってるか確認してね」と毎回肩を叩いてくれる親切な店員さんなんです。最初はうるさく感じるかもしれませんが、この店員さんがいるおかげで、私たちは「レジの前で恥をかかずに済む（＝本番環境でユーザーにエラーを出さずに済む）」のです。
初学者のあなたへ：つまずいた時の処方箋
もし、既存のプロジェクトでこの設定をONにして、真っ赤なエラー画面に囲まれてしまったら……「大丈夫ですよ！」と声を大にして言いたいです。
それは、あなたがこれまで「潜在的に抱えていたバグ」をTypeScriptが見つけてくれた証拠です。焦る必要はありません。
1. `| null` や `| undefined` を型に足す： 「このデータは空っぽかもしれない」という可能性を型で表現してあげましょう。
2. `if` 文でガードする： 上記の例のように、値がある時だけ処理するようにコードを書き換えます。
3. オプショナルチェーン（`?.`）を使う： `userName?.length` のように書けば、「値があれば長さを出す、なければ `undefined` を返す」というスマートな書き方もできます。
最後に：TypeScriptはあなたの敵ではなく、一番の理解者
TypeScriptの厳しさは、あなたを責めているわけではありません。
「動けばいい」というコードから、「安心して動かせる」コードへ。そのステップアップを支えてくれる最高のガイドです。
`strictNullChecks: true` を設定することは、最初のうちは少し窮屈に感じるかもしれません。でも、数ヶ月後のあなたが「あの時この設定にしておいて本当によかった……」と、深夜のデバッグで救われる日が必ず来ます。
まずは小さなプロジェクトから、この「厳格さ」を体験してみてください。あなたの書くコードは、もっと強くなれます。大丈夫、一歩ずつやっていきましょう！
コメント