概要
JavaScriptでは null や undefined による**「落ちるコード」**が頻発する。
こうした問題を回避する手段として登場したのが、
-
??（nullish coalescing operator） -
?.（optional chaining operator）
これらは「記法の糖衣」ではなく、可読性と防御性を両立させるための設計記法である。
本記事では、2つの構文の違い・設計上の役割・使用指針を明確にする。
対象環境
ES2020 以降（モダンブラウザ / Node.js 14+）
1. nullish coalescing operator ??
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 も無視してしまう
✅ ?? が適しているケース
- 数値
0を許容したいとき - 空文字
''を許容したいとき - false を意味ある値とみなすとき
2. optional chaining operator ?.
const username = user?.profile?.name;
✅ 意味：
左側のオブジェクトが null または undefined の場合に、安全にundefinedを返す
✅ 適用可能な対象：
- プロパティアクセス：
obj?.prop - ネスト：
obj?.nested?.value - 関数呼び出し：
fn?.() - 配列アクセス：
arr?.[index]
❌ 従来の記述と比較
// 従来
const name = user && user.profile && user.profile.name;
// optional chaining
const name = user?.profile?.name;
→ ✅ 可読性、保守性が劇的に向上
両者の組み合わせ
const name = user?.profile?.name ?? '名無し';
-
userやprofileが存在しない →undefined -
nameがnullまたはundefined→'名無し'
→ 防御とフォールバックの完全セット
使用判断フロー
① 値が null/undefined なら他の値を返したい → `??`
② オブジェクトが存在するかを安全にチェックしたい → `?.`
③ 両方使って“安全な取得 + フォールバック”をしたい → `?.` + `??`
実務ユースケース
✅ ユーザーデータ取得
const email = user?.contact?.email ?? '未登録';
✅ 関数が存在するかチェックしてから呼ぶ
callback?.(data);
✅ 配列アクセス
const firstItem = list?.[0] ?? 'なし';
よくある落とし穴
❌ ?? は false, 0, '' を“nullish”とみなさない
const value = 0 ?? 10; // ✅ → 0
const value = '' ?? 'X'; // ✅ → ''
❌ optional chaining は “存在チェック” だけであり、エラーを握りつぶすわけではない
const len = user?.name.length; // ❌ name が undefined だと still error
→ ✅ user?.name?.length と書く必要がある
結語
?? と ?. は、JavaScriptの防御的設計において最も洗練された構文的武器である。
- null や undefined による「落ちるコード」を未然に防ぐ
- フォールバックとセーフアクセスを意図的に分離できる
- 何を許容し、何を守り、どこにデフォルトを与えるかを明確に表現できる
記法を使いこなすことが目的ではない。
可読性・意図・安全性を高次元で成立させることが、設計の本質である。