概要

null と undefined は「どちらも値がないもの」として混同されがちだが、
それぞれは意味的にも設計的にも異なる存在であり、明確に分離すべき制御上の概念である。

JavaScriptは柔軟な動的型言語であるがゆえに、
この曖昧な「存在しない状態」に明示的な設計を与えないと、バグ・誤解・予期せぬ挙動を引き起こす。

本稿では、null と undefined の定義・違い・使い分けの指針、および設計への反映戦略を明確にする。

1. `undefined`：未定義であることのシグナル

let a;
console.log(a); // → undefined（値が代入されていない）

✅ 「未設定・未定義・まだ何も決められていない」状態
✅ 関数の戻り値がない場合の暗黙的な返却値でもある

2. `null`：意図的に「空」を示す値

const result = getUser() || null;

✅ 「値が存在しないことを明示的に表す」ために使う
✅ データベースや外部APIとの値の整合に使われやすい

3. 使い分けの原則

状況	使うべき値
未初期化の変数	`undefined`
存在しないことを明示したい	`null`
関数の引数が未指定	`undefined`
空を返す設計（空オブジェクト・空結果）	`null` もしくは `[]`, `{}`

4. 明示的に意図を示す条件式の書き方

if (value === null) {
  // 明示的に「空」であることを判定
}

if (typeof value === 'undefined') {
  // 変数が未定義かどうかを明確に判定
}

❌ if (!value) のような曖昧な記述は避ける
✅ === null / typeof === 'undefined' を使って明示する

5. API設計や戻り値の明確化：どちらを返すべきか

function findUserById(id) {
  return db[id] ?? null; // 見つからなければ null
}

✅ 「見つからなかった」＝ null（明示的な空）
❌ undefined は返却すべきでない（意味が曖昧になる）

6. default値の明示と安全なfallback

const name = user.name ?? 'ゲスト'; // null or undefined 両方を対象

✅ ??（nullish coalescing）で null / undefined を安全に処理
❌ || は 0 や空文字も false 扱いしてしまう → 不適切なfallback

設計判断フロー

① 値が未定義なのか、空であることを意図しているのか？

② 引数未指定・戻り値なしの状態を `undefined` で許容するか？

③ 明示的に「存在しない」ことを表したいなら `null` を使っているか？

④ 条件式やdefault値の処理で曖昧な `!value` や `||` を使っていないか？

⑤ API/戻り値設計で `undefined` を返していないか？

よくあるミスと対策

❌ 関数が何も返さず `undefined` が意図せず戻る

→ ✅ 「該当なし」なら null を明示的に return

❌ `value || 'default'` で 0 や `''` を弾いてしまう

→ ✅ value ?? 'default' を使用し null/undefined のみに限定

❌ `== null` で両方比較して意図が不明瞭

→ ✅ === null or typeof === 'undefined' に明確に分離

結語

null と undefined の設計とは「ないことをどう表現するか」ではない。
それは**“ないことの意味をどう設計に落とし込み、状態と意図を一貫して管理するか”**の問題である。

undefined は「未設定・未定義」
null は「意図的に空」
曖昧さを排除し、コードの状態設計を言語化することで、予期せぬ挙動を防止できる

JavaScriptにおける「存在しない値」の扱いとは、
“空白に意味を与えるための設計戦略”である。