概要

JavaScriptでは null や undefined による**「落ちるコード」**が頻発する。
こうした問題を回避する手段として登場したのが、

これらは「記法の糖衣」ではなく、可読性と防御性を両立させるための設計記法である。
本記事では、2つの構文の違い・設計上の役割・使用指針を明確にする。

対象環境

ES2020 以降（モダンブラウザ / Node.js 14+）

const value = input ?? 'default';

「input が null または undefined のときだけ 'default' を返す」

const value = input || 'default'; // ← falsy 値すべてに反応

console.log(0 || 'default');  // 'default' ❌
console.log(0 ?? 'default');  // 0 ✅

→ || は 0, '', false も無視してしまう

const username = user?.profile?.name;

左側のオブジェクトが null または undefined の場合に、安全にundefinedを返す

// 従来
const name = user && user.profile && user.profile.name;

// optional chaining
const name = user?.profile?.name;

→ ✅ 可読性、保守性が劇的に向上

const name = user?.profile?.name ?? '名無し';

→ 防御とフォールバックの完全セット

① 値が null/undefined なら他の値を返したい → `??`
② オブジェクトが存在するかを安全にチェックしたい → `?.`
③ 両方使って“安全な取得 + フォールバック”をしたい → `?.` + `??`

const email = user?.contact?.email ?? '未登録';

callback?.(data);

const firstItem = list?.[0] ?? 'なし';

const value = 0 ?? 10;   // ✅ → 0
const value = '' ?? 'X'; // ✅ → ''

const len = user?.name.length; // ❌ name が undefined だと still error

→ ✅ user?.name?.length と書く必要がある

?? と ?. は、JavaScriptの防御的設計において最も洗練された構文的武器である。

記法を使いこなすことが目的ではない。
可読性・意図・安全性を高次元で成立させることが、設計の本質である。