こんにちは！フロントエンドの現場を渡り歩いてきた、シニアアーキテクトの私です。
JavaScriptを学び始めの頃って、不思議な壁にぶつかりますよね。「あれっ、エラーは出ないのに、画面に何も表示されない……」「`undefined` と `null` って、どっちも『何もない』って意味じゃないの？」と、夜な夜なコードを睨みつけた経験、誰しも一度や二度はありませんか？
大丈夫ですよ、安心してください。ここを通り過ぎる誰もが一度は首をかしげる、JavaScriptの「ちょっと愛嬌のある仕様」なんです。
今日は、この `undefined` と `null` のお話を、身近な例えを交えながら、現場のリアルな感覚とともにお届けしますね。肩の力を抜いて、コーヒーでも飲みながら読んでいってください。
—
1. 「空っぽ」の箱にも、2種類あるんです
JavaScriptの世界では、「中身がない状態」を表現するために、`undefined` と `null` という、よく似た2つの特別な値が用意されています。
「なんで2つもあるの？ 1つでよくない？」って思いますよね。実はこの2つ、私たちが日常生活で使う「あるシチュエーション」にそっくりなんです。
📦 `undefined` は「まだ開けていない、送り主不明の箱」
`undefined` は、JavaScriptが「まだ値が入れられていませんよ（未定義）」と勝手に判断したときにつけるラベルです。
例えるなら、Amazonで注文した荷物が届いて、まだ段ボール箱を開けていない状態です。「中に何が入っているかは、開けてみないとわからない（＝まだ定義されていない）」。そんな「未着手・未知の状態」を指します。
🗑️ `null` は「きれいに中身を捨てて、空っぽになったゴミ箱」
一方で `null` は、人間（プログラマー）が意図的に「ここはあえて『何もない状態』にしておくね！」と設定する値です。
例えるなら、キッチンのゴミ箱を思い浮かべてみてください。中のゴミをきれいに捨てて、「今は完全に空っぽですよ」と分かっている状態です。システム的には「値が存在しないこと」をあらかじめ人間が明示しているわけですね。
—
2. コードで見てみましょう
百聞は一見にしかず。実際のJavaScriptのコードで、この2つの違いを肌で感じてみましょう。
以下のコードを、お使いのブラウザの開発者ツール（Console）などに貼り付けて試してみてくださいね。
// 【1】undefined の世界
// 変数を作っただけで、中身をまだ入れていない状態
let userBox;
console.log(userBox); // 出力: undefined （「まだ中身が決まってないよ！」とJSが教えてくれる）
// 【2】null の世界
// 「今はログインしていないので、ユーザー情報はありません」と意図的に空っぽを代入する
let currentUser = null;
console.log(currentUser); // 出力: null （「意図的に空っぽにしています」）
どうでしょう？ `undefined` は「JavaScript側のシステムが勝手につける初期値」、`null` は「私たちが意思を持って教える『空っぽ』のサイン」というニュアンスが伝わったでしょうか？
—
3. 実務ではどう使い分ける？（現場のガイドライン）
「じゃあ、実務ではどう使い分けたらいいの？」という疑問が湧いてきますよね。現場のチーフとして、私なりのシンプルな指針をお伝えします。
基本ルール：自分で明示するときは `null` を使おう
プログラムの中で、「データがまだ取得できていない」「選択が解除された」という状態を表現したいときは、`null` を代入してあげるのがクリーンで安全です。
// フォームの入力値を管理するイメージ
let selectedColor = null; // 「まだユーザーは色は選んでいない」という状態を明確にする
// ユーザーが赤色を選んだら……
selectedColor = “red”;
// その後、選択をリセット（クリア）したくなったら……
selectedColor = null; // また意図的に「空っぽ」に戻す！
逆に、`undefined` を自分でコードに書くことは、実務ではほとんどありません（変数に `undefined` を代入するような書き方は、コードの意図が曖昧になるため避けるのがプロの作法です）。`undefined` は、あくまで「あ、JavaScriptが初期値として勝手に入れてくれたんだな」と受け取るだけで十分ですよ。
—
4. やりがちな「落とし穴」に気をつけて！
ここで、初学者の皆さんが一番ハマりやすいポイントをこっそりシェアしておきますね。
JavaScriptには、値を比較するときに使う `==`（等価演算子）というものがあります。これを使うと、ちょっとびっくりする現象が起きます。
console.log(null == undefined); // なんと、結果は true （等しいと判定されちゃう！）
「えっ、別物だって言ったのに！」と驚きますよね。ざっくり言うと、`==` はおせっかいに型を変換して比較しちゃう性質があります。
そのため、実務ではこの2つを厳密に区別するために、型までしっかり比較してくれる `===`（厳密等価演算子） を使うのが鉄則です！
console.log(null === undefined); // 結果は false （「うん、別物だね！」と正しく判定される）
「何かと比べる時は、必ず `===` を使おう」――これだけでも、バグの9割は防げるようになりますよ。本当にすごい魔法の記号です。
—
さいごに
`undefined` と `null`。
最初は「なんでこんな似たようなやつが2つもあるんだ！」とイライラするかもしれませんが、つきあっていくうちに、それぞれの「性格」が分かって可愛く思えてくるから不思議です。
- `undefined` ＝ JavaScriptくんが「まだ何も決まってないよ〜」と教えてくれる未着手のサイン
- `null` ＝ 私たちが「ここは意図的に空っぽにしておくね」と意思表示するクリアのサイン
この違いさえフワッと掴めていれば、今日からもう「型迷子」になることはありません。焦らず、自分のペースで一歩ずつ進んでいきましょう。あなたのコーディングライフを、私はいつも応援しています！
コメント