こんにちは!TypeScriptの世界へようこそ。
初めてこの言語に触れたとき、「なんか急に怒られるんだけど……」と画面の前で頭を抱えたことはありませんか?大丈夫です、それはあなたがTypeScriptの「優しさ」に触れた証拠。
今日は、多くの初心者が最初にぶつかる壁、`null` と `undefined` について、現場のリアルな視点からお話ししますね。
—
1. 「何もない」にも種類がある? TypeScriptの優しい「お節介」
まず、想像してみてください。あなたは今、冷蔵庫の中身を確認しています。
- `null` は「冷蔵庫の中が空っぽ(意図的に空にしている)」
- `undefined` は「冷蔵庫を開けてみたけど、そもそも中身を確認する棚自体がない(未定義)」
JavaScriptの世界ではこの2つを適当に扱っても動いてしまうのですが、TypeScriptは「おいおい、そんな適当なことしてると後でバグるよ!」と、厳しいけれど愛のあるチェックをしてくれます。これが `strictNullChecks`(厳密なnullチェック)という設定です。
2. strictNullChecks:TypeScriptの「安全装置」
現代のTypeScript開発では、`strictNullChecks` をオンにするのが当たり前です。これをオンにすると、TypeScriptは「値が確実に入っていると保証できないものには、安易に触らせない」というルールを適用します。
例えば、`string` 型の変数には、文字列しか入れられません。ここに `null` や `undefined` を突っ込もうとすると、TypeScriptは全力で止めてきます。
// strictNullChecks がオンだとこうなります
let userName: string = “たろう”;
// userName = null; // エラー!「文字列を期待してるのに空っぽなんてダメ!」
// userName = undefined; // エラー!「未定義のものを入れるなんてダメ!」
// もし「名前があるかもしれないし、ないかもしれない」なら?
// ここで「ユニオン型(|)」の出番です!
let nickname: string | null = “たろう”;
nickname = null; // これならOK!「あ、今回は空っぽなのね」と納得してくれます。
3. なぜ「ユニオン型」を使うのか?
「えー、毎回 `string | null` って書くの面倒くさい!」と思いましたか?
でも、これこそがTypeScriptの強みなんです。
例えば、APIからユーザーデータを取得するとき、「ユーザーが存在しない(null)」というケースは実務では本当によくあります。ユニオン型を使って「この値は `string` か `null` の可能性があるぞ」と明示しておくことで、コードを書くときに「あ、nullの可能性を処理しないと!」と自分自身に注意喚起できるのです。
実践:nullチェックの書き方
安全に扱うための、現場で最も使われるパターンです。
function printName(name: string | null) {
// もし null だったら何もしない、というガードをかけます
if (name === null) {
console.log(“名前は登録されていません”);
return;
}
// ここまで来れば、TypeScriptは name が絶対に string だと理解しています
console.log(“こんにちは、” + name.toUpperCase() + “さん!”);
}
printName(“Taro”); // こんにちは、TAROさん!
printName(null); // 名前は登録されていません
4. `any` や `unknown` との付き合い方
初心者のうちは、エラーが出るのが怖くてつい `any`(何でもあり!)を使いたくなりますよね。でも、`any` は「TypeScriptの安全装置を全部外す」という禁じ手です。
- `any`: 「何でもいいからエラー出さないで!」という逃げ道。現場では極力避けます。
- `unknown`: 「今はまだ正体がわからないけど、使う前にちゃんと中身を確かめるから大丈夫!」という、`any` の誠実版。
もし「データが何者かわからない」ときは、`any` ではなく `unknown` を使ってみてください。そして、先ほどの `if` 文のように「中身を確かめる(型ガード)」という手順を踏む。このひと手間が、あなたの書くコードを世界一堅牢なものにします。
—
最後に:つまずくのは、あなたが前に進んでいる証拠
最初は「なんでこんなに厳しいの?」と思うかもしれません。でも、TypeScriptがエラーを吐いてくれるのは、あなたがコードを実行して「画面が真っ白になって動かなくなった!」という悲劇を未然に防いでくれているからなんです。
nullやundefinedとの付き合い方は、TypeScriptという相棒との信頼関係の第一歩です。
「あ、今は何もない状態もあり得るな」と一呼吸置いて、`| null` を付け足してあげる。そんな丁寧な積み重ねが、いつの間にかあなたのコードを「バグ知らず」の傑作へと変えてくれますよ。
もしまたエラーで詰まったら、いつでもここに戻ってきてくださいね。あなたのコーディングライフを、心から応援しています!

コメント