JavaScriptの「何もない」をめぐる冒険：nullとundefinedの迷宮を攻略しよう
こんにちは。フロントエンドの現場で長年コードと向き合ってきたアーキテクトです。
プログラミングを始めたばかりの頃、JavaScriptの「何もない」を表す2つの存在、`null`（ヌル）と `undefined`（アンデファインド）に混乱した経験はありませんか？
「どっちも『空っぽ』ってことでしょう？」と油断していると、ある日突然、画面が真っ白になったり、予期せぬエラーで足元をすくわれたりするのがこの二人の恐ろしいところ。今日は、この少し厄介で、でも愛すべき「何もない」たちの正体と、現場で生き残るための安全な判定術を解説します。
—
1. 「何もない」にも種類がある？
まずは、この二人のキャラクターを身近な例でイメージしてみましょう。
- `undefined`（未定義）：
「まだ中身が入る箱を用意しただけで、中身を何も入れていない状態」。
例えば、お買い物カゴを手に取ったけれど、まだ商品を一つも選んでいない状態です。JavaScriptでは、変数を宣言したけれど値を代入していないと、自動的にこの「デフォルトの空っぽ」が設定されます。
- `null`（ヌル）：
「意図的に『ここには何もありません』と宣言した状態」。
お買い物カゴをレジに持っていったとき、店員さんに「このカゴは空であることを証明するために使います」と明示的に空の札を置くようなイメージです。
どちらも「中身がない」ことは同じですが、「まだ決まっていない（undefined）」のか、「あえて何も入れないことに決めた（null）」のかという、意志の強さが違うと覚えておいてください。
—
2. 伝説のバグ？ `typeof null` が ‘object’ になる理由
さて、ここからがJavaScriptの歴史が残した「ミステリー」です。型を調べる定番の `typeof` 演算子を使ってみると、面白いことが起こります。
console.log(typeof undefined); // 結果: ‘undefined’
console.log(typeof null); // 結果: ‘object’ ←！？
なぜ `null` が「オブジェクト（物体）」になってしまうのか？
実はこれ、JavaScriptが誕生した1995年、わずか10日間で設計された際の名残と言われています。当時、`null` は「空のオブジェクトへのポインタ」として扱われていたという説が濃厚です。
この仕様はあまりに有名で、修正しようとすると世界中の古いWebサイトが壊れてしまうため、あえて直さずにそのまま残されています。「仕様という名の歴史的遺産」ですね。なので、「`typeof null` が ‘object’ になるのはJavaScriptの仕様上の愛嬌」と割り切ってしまうのが、現役エンジニアとしての賢い付き合い方です。
—
3. 現場で「安全に」判定するための鉄則
では、この二つをどうやって見分ければいいのでしょうか？ 現場でよく使われる、最も安全で堅実な判定パターンを紹介します。
「厳密等価演算子(===)」を使うのが正解
「==」ではなく「===」を使うのが鉄則です。なぜなら、「==」は型が違っても無理やり変換して比較しようとするお節介な奴だからです。
// 【良い例】厳密等価演算子を使う
const data = null;
if (data === null) {
console.log(“これは意図的にnullに設定されています”);
}
const emptyBox = undefined;
if (emptyBox === undefined) {
console.log(“これはまだ定義されていません”);
}
// 【応用】null か undefined どちらか一方でもあれば判定したい場合
// 魔法のテクニック：null と undefined は == null で判定できる
if (data == null) {
console.log(“null か undefined のどちらかです！”);
}
一番下の例、`data == null` に驚きましたか？
実はこれ、JavaScriptの仕様で `null == undefined` は `true` になるというルールを逆手に取ったテクニックです。「細かいことはいいから、とにかく空っぽかどうかだけ知りたい！」というとき、現場では非常によく使われる「枯れたテクニック」なんです。
—
最後に：つまずくのは当たり前です
ここまで読んでいただき、ありがとうございます。
`null` と `undefined` の違いは、ベテランエンジニアでもうっかり間違えてバグを生むことがあるほど、実は深い沼です。
「またtypeofの結果で罠にハマっちゃった！」と落ち込む必要なんて全くありません。むしろ、そうやって一つずつ壁を乗り越えていくことこそが、フロントエンド・スペシャリストへの第一歩なのです。
もし迷ったら、この記事を読み返して「ああ、そういえば昔のJavaScriptの愛嬌だったな」と思い出してくださいね。あなたのコーディングライフが、少しでもエラーから解放されますように！
コメント