【入門編】 undefinedとnullの厳密な違い – JavaScript実践ガイド

やあ、こんにちは。JavaScriptの世界へようこそ。
コードを書いていると、必ずと言っていいほど「あれ、この値って何もないってこと？それともまだ決まってないだけ？」と迷う瞬間がやってくるよね。

特に、`undefined` と `null`。この二つは、初心者にとって最大の「最初の壁」と言ってもいい。現場のベテランだって、この二つの使い分けをいい加減にしていると、後で手痛いバグに足元をすくわれることがあるんだ。

今日は、この二つの正体を「日常のシーン」に例えながら、スッキリと整理してみよう。大丈夫、難しくないから安心してついてきてね。

—

まずはイメージから入ろう。あなたがネットショッピングで注文した荷物を待っていると想像してみて。

注文したけれど、配送業者がまだ荷物を積み込んでいない状態。そもそも「中身が何であるか」すら決まっていない、あるいは準備すら始まっていない状態のことだね。JavaScriptの世界では、「変数は作ったけど、中身をまだ何も入れていない」という状態がこれにあたる。

配送業者が「お届け物です」と箱を持ってきてくれた。ワクワクして開けてみたら、中身は空っぽ。でも、その箱には「この中には何も入っていない」というメッセージが明確にある。「何もない」という状態を、あえて自分で指定したのが `null` なんだ。

—

実際にコードで確認してみよう。エディタを開いて、こんな風に確かめてみて。

// undefined: 宣言したけど、値を入れていない状態
let myPackage;
console.log(myPackage); // 結果: undefined

// null: 「空ですよ」とあえて指定した状態
let myBox = null;
console.log(myBox); // 結果: null

// 比較してみると面白いことがわかる
console.log(myPackage === myBox); // 結果: false（別物なんです！）

ここで大切なのは、「コンピュータは勝手に `undefined` を使うけれど、`null` は人間（プログラマー）が使う」というルールだ。

—

「どちらも『何もない』なら、どっちでもいいんじゃない？」と思うよね。僕も昔はそう思っていたよ。でも、現場ではこんなトラブルが起きるんだ。

例えば、ユーザーのプロフィール情報を扱うとき：

let nickname = undefined; // まだ設定していない（初期状態）
let favoriteColor = null; // 以前は設定していたけど、今は「設定なし」にしたい

// もしこれらが同じだと、
// 「初期設定が終わっていないユーザー」と
// 「あえて何も表示しない設定にしたユーザー」の区別がつかなくなるよね。

もし、あなたが「ニックネームが未設定ならデフォルトを表示する」という機能を作るとしたら、`undefined` かどうかで判定すればいい。逆に「好きな色がない人は非表示にする」なら、`null` をチェックすればいい。

このように、「なぜ何もないのか」という理由をコードに持たせることが、バグを減らす最高の防御策になるんだ。

—

ベテランたちがよくやるミスに、`typeof` という判定ツールがあるんだけど、これには一つだけ注意が必要なんだ。

console.log(typeof undefined); // 結果: ‘undefined’
console.log(typeof null); // 結果: ‘object’ （！？）

なんと、`typeof null` を実行すると `’object’` という答えが返ってくる。これはJavaScriptという言語が生まれた時に混入した「歴史的なバグ」なんだけど、今となっては修正できない仕様なんだ。

「`null` を判定するときは `typeof` を使っちゃダメ！ `=== null` で直接比較しよう」と覚えておけば、君はもう一段上のエンジニアだ。

—

最初はピンとこなくても大丈夫。書いていくうちに、「あ、今はここで `null` を入れておかないと混乱するな」という感覚が必ず芽生えてくるから。

コードは、ただ動けばいいものじゃない。未来の自分や、一緒に働く仲間への「手紙」のようなものなんだ。`null` を使うときは、「ここは意図的に空にしてあるんだよ」というメッセージを添える気持ちで書いてみてほしい。

それだけで、君の書くコードはずっと優しく、そして強くなるはずだよ。応援しているからね！