概要
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における「存在しない値」の扱いとは、
“空白に意味を与えるための設計戦略”である。