nullish coalescing(??)とは何か
nullish coalescing(??)は「左側が undefined または null のときだけ、右側の“デフォルト値”を使う」演算子です。ここが重要です:0、空文字(””)、false は“有効な値”として扱い、置き換えません。つまり「本当に“欠損”のときだけ補う」ための、最も安全な既定値の書き方です。
const cfg = { retry: 0, label: "" };
const r = cfg.retry ?? 3; // 0(尊重される)
const l = cfg.label ?? "N/A"; // ""(尊重される)
const t = cfg.timeout ?? 5000; // 5000(undefined → 既定値)
JavaScript||(論理OR)との違い(ここが重要)
|| は「falsy(false, 0, “”, NaN, null, undefined)」のとき右側を採用します。0 や “” を有効値として使いたい場面で、意図せず上書きしてしまうのが典型的なバグです。?? は null/undefined のときだけ既定値を使うため、0・””・false を“尊重”できます。
const price = 0;
const a = price || 100; // 100(意図せず上書き)
const b = price ?? 100; // 0(期待どおり)
JavaScriptネスト構造での定番パターン(?. と併用)
欠損でも落ちない取得+既定値
オプショナルチェーン(?.)で安全に辿り、?? で既定値を適用します。読みやすさと堅牢性の両立ができます。
const theme = settings?.prefs?.theme ?? "light";
const zip = order?.customer?.address?.zip ?? "(unknown)";
const items = order?.items ?? []; // 無ければ空配列で処理を続行
JavaScript0・””・false を尊重した既定値
例えばページ番号(0 は有効)、検索クエリ(空文字は有効)など、意図どおりに扱えます。
const page = params?.page ?? 0;
const q = params?.q ?? "";
const flag = cfg?.enabled ?? false;
JavaScript代入版(??=)で“その場で補完”
??= は「左辺が null/undefined の場合に限り、右辺を代入」します。初期化や設定の補完に便利です。
const cfg = {};
cfg.timeout ??= 5000; // timeout が欠損なら 5000 を入れる
cfg.theme ??= "light";
JavaScriptここが重要です:||= は偽値(0、””、false)まで上書きしてしまいます。0・””・false を保持したいなら ??= を使います。
実践レシピ(よく使う整形と既定値)
APIレスポンスの整形
外部入力は欠損が混ざります。?? で明確な既定値を与えると、後段処理がシンプルになります。
function toPublicUser(u) {
return {
id: u?.id ?? -1,
name: u?.profile?.name ?? "(unknown)",
email: u?.contacts?.email ?? null,
tags: u?.tags ?? []
};
}
JavaScript設定の合成(後勝ちの合体+最終既定)
スプレッドで合成した後、欠損だけ ?? で補います。
const defaults = { timeout: 3000, retry: 2, theme: "light" };
const cfg = { ...defaults, ...userCfg, ...runtime };
const timeout = cfg.timeout ?? 3000; // 念押しの既定
JavaScript安全な数値演算(0 を尊重)
0 も有効値として使い、欠損だけ既定に置き換えます。
const retries = options?.retries ?? 0;
const next = retries + 1;
JavaScriptよくある落とし穴と回避策(重要ポイントの深掘り)
|| と ?? の混同
「0・””・false を上書きしたくない」なら必ず ?? を使う。|| は“偽値すべて”で既定値が発動します。
?? の結合順序と評価
?? は||や&&と一緒に書けません(優先順位の混乱を避けるため)。必要なら括弧で明示します。
const val = (a ?? b) || c;
JavaScriptnull/undefined 以外は“そのまま通る”ことを忘れない
NaN や不正文字列のような“値はあるが意味的に不正”なものは ?? では補えません。型検証や範囲チェックを併用しましょう。
まとめ
nullish coalescing(??)は「欠損(undefined/null)のときだけ既定値」を採用する、実務で最も安全な既定値演算子です。0・””・false を尊重できる点が最大の利点で、ネストでは ?. と組み合わせるのが定石。初期化には ??= を使い、|| とは使い分ける。結合や評価は括弧で明確化し、意味的な不正値には別途バリデーションを行う。これを押さえれば、初心者でも意図どおりで壊れにくい“既定値設計”が自然に書けます。
