フロントエンドの最前線で戦う諸君、お疲れ様。
コードを書いていると、ふと遭遇する「あれ？なぜこうなるんだ？」という瞬間。JavaScriptには、言語仕様の歴史という名の「呪い」がいくつか潜んでいる。その代表格が、今回取り上げる `null` と `undefined` 、そして悪名高い `typeof null` の挙動だ。
これらを「なんとなく」で扱っていると、大規模なアプリケーションでは必ず足元をすくわれる。今日は、この泥沼にハマらないための、プロとして知っておくべき「型判定の真実」を伝授しよう。
—
1. なぜ `typeof null` は ‘object’ なのか？
まず、この話を避けては通れない。JavaScriptの初期実装において、値は「型タグ（3ビット）」と「実際の値」で構成されていた。当時のオブジェクトの型タグは `000` であり、`null` は（ポインタの先が何も存在しないことを示す）ヌルポインタとして `0x00` すなわち `000` と表現されていた。
つまり、ブラウザのエンジンは「値がオールゼロならオブジェクトである」と判定していたんだ。
ECMAScriptの策定段階で「これはバグだ」と修正案が出たこともあったが、あまりにも多くの既存Webサイトがこの挙動に依存していたため、破壊的変更を避けるためにそのまま放置された。いわば、Webの互換性を守るための「歴史的な遺産」というわけだ。この事実は、我々エンジニアが「`typeof` を過信してはならない」という教訓でもある。
—
2. null と undefined の「厳密な」関係性
現場でよく議論になるのが、「どっちを使えばいいのか？」という点だ。
- `undefined`: 「値がまだ代入されていない」という、JavaScriptのシステム上のデフォルト状態。
- `null`: 「意図的に空である」ことを示す、開発者が代入する値。
実務においては、「未定義は `undefined` 、空っぽであることは `null`」と明示的に使い分けるのが美しいコードの鉄則だ。
比較演算子の罠
ここで重要なのが、`==`（等価演算子）を使うべきではない理由だ。`null == undefined` は `true` になる。一見便利そうだが、これは型変換を伴う曖昧な比較であり、バグの温床でしかない。
必ず `===`（厳密等価演算子） を使え。型も値も完全に一致していることだけを信頼するんだ。
—
3. 実務で使える「型判定」のベストプラクティス
では、どうやって安全に判定するか。現場でそのまま使える、信頼性の高いパターンを提示しよう。
/
- 実務で使える安全な判定パターン
/
// 1. undefined の判定
// undefined はグローバル変数として上書きできる可能性があるため、
// 確実に判定するには void 0 を使うのが古参のテクニックだ
const isUndefined = (val) => val === void 0;
// 2. null の判定
// typeof では ‘object’ になるため、直接比較が最強
const isNull = (val) => val === null;
// 3. 「空っぽ（null か undefined）」をまとめて判定する最強のショートハンド
// 厳密等価演算子を使うことで、0 や false は除外される
const isNil = (val) => val === null || val === undefined;
// 4. オブジェクトのみを判定したい場合（配列やnullを除外）
const isPlainObject = (val) => {
return typeof val === ‘object’ && val !== null && !Array.isArray(val);
};
// — 検証 —
console.log(isNil(null)); // true
console.log(isNil(undefined)); // true
console.log(isNil(0)); // false (0は空ではない)
console.log(isNil(”)); // false (空文字は空ではない)
—
4. チーフアーキテクトからのアドバイス
実務において型判定に迷ったときは、常に「自分以外の誰かが、意図しないデータを渡してきたらどうなるか？」を想像してほしい。
TypeScriptを使っていれば多くの型エラーは防げるが、APIレスポンスなどの外部データは「型安全」の範疇外だ。ランタイムで予期せぬデータが流れてきたとき、`typeof null === ‘object’` に翻弄されて `null.property` を参照し、アプリケーションがクラッシュする……これはフロントエンド開発で最も恥ずべき事故の一つだ。
「`null` は `object` ではなく、ただの `null` である」
この認識をコードの端々に浸透させること。そうすれば、君の書くコードは、歴史に翻弄されない、堅牢で美しいものになるはずだ。
何か詰まったら、いつでも聞いてくれ。現場からは以上だ。
コメント