Nullish coalescing（??） — const v = a ?? 'default'
JavaScript の Nullish coalescing 演算子 ?? は「値が null または undefined のときだけ、代わりの値を使う」ための演算子です。
初心者は「空っぽ（null/undefined）のときだけデフォルト値を入れる」と覚えると理解しやすいです。
基本のコード例
const a = null;
const v = a ?? "default";
console.log(v); // → "default"
??→ 左側がnullまたはundefinedのときに右側を返す。- 左側が
0や""（空文字）なら「値あり」とみなされ、そのまま返す。
よく使うテンプレート集
デフォルト値を設定
function greet(name) {
const userName = name ?? "ゲスト";
console.log(`こんにちは ${userName}`);
}
greet("Aki"); // → "こんにちは Aki"
greet(null); // → "こんにちは ゲスト"
greet(undefined); // → "こんにちは ゲスト"
オブジェクトのプロパティにデフォルト
const settings = { theme: null };
const theme = settings.theme ?? "light";
console.log(theme); // → "light"
配列の要素にデフォルト
const arr = [10, null, 30];
console.log(arr[0] ?? 0); // → 10
console.log(arr[1] ?? 0); // → 0
console.log(arr[2] ?? 0); // → 30
例題: APIレスポンスの安全な利用
function printUser(data) {
const name = data?.user?.name ?? "不明";
const age = data?.user?.age ?? "不明";
console.log(`名前: ${name}, 年齢: ${age}`);
}
printUser({ user: { name: "Mika", age: 25 } });
// → 名前: Mika, 年齢: 25
printUser({});
// → 名前: 不明, 年齢: 不明
- 効果:
??を使うと「値がなければデフォルト」を簡単に書ける。 ?.（オプショナルチェイニング）と組み合わせるとさらに安全。
実務でのコツ
||との違い:||は「falsy（falseっぽい値: 0, “”, false, null, undefined）」なら右側を返す。??は「null または undefined のときだけ」右側を返す。
console.log(0 || 100); // → 100 （0はfalsy）
console.log(0 ?? 100); // → 0 （0は値あり）
- ユーザー入力や設定値に便利: 「未指定ならデフォルト」を簡単に書ける。
- APIレスポンスや外部データ: 欠けている値を補うのに最適。
ありがちなハマりポイントと対策
||と混同する:"" || "default"→"default""" ?? "default"→""- → 空文字や 0 を「有効な値」と扱いたいなら
??を使う。
- 古い環境では使えない: ES2020 以降の構文。古いブラウザでは Babel などで変換が必要。
練習問題（ページネーション設定）
function setupPagination({ page, perPage } = {}) {
const currentPage = page ?? 1;
const itemsPerPage = perPage ?? 20;
console.log(`page=${currentPage}, perPage=${itemsPerPage}`);
}
setupPagination(); // → page=1, perPage=20
setupPagination({ page: 3 }); // → page=3, perPage=20
setupPagination({ perPage: 5 }); // → page=1, perPage=5
直感的な指針
??= 「null/undefinedなら右側を使う」。||= 「falsyなら右側を使う」。- デフォルト値を設定する場面で大活躍。
- 初心者は「ユーザー名」「設定値」「配列要素」で練習すると理解が深まる。
これを覚えれば「安全にデフォルト値を設定する」コードが書けるようになり、エラーや意図しない挙動を減らせます。