1. 導入：なぜこの演算子が重要なのか？
JavaScriptで開発をしていると、「値が空っぽ（nullやundefined）だった場合に、代わりの値を設定したい」という場面によく遭遇します。これまでの書き方では、予期せぬ挙動に悩まされることがありました。今回紹介する「Nullish coalescing operator（??）」を使えば、非常にシンプルかつ安全に「デフォルト値」を設定することができ、コードの可読性が格段に向上します。
2. 基礎知識：Nullish coalescing operator（??）とは？
この演算子は「Null合体演算子」と呼ばれます。左辺が「null」または「undefined」の場合にのみ、右辺の値を返します。
似たような機能を持つ「論理和演算子（||）」との最大の違いは、「0」や「空文字（””）」をどう扱うかという点です。「||」は0や空文字を「偽（false）」とみなして無視してしまいますが、「??」はそれらを「有効な値」として尊重します。この違いが、バグを防ぐための大きな鍵となります。
3. 実装・解決策：どう使い分けるか？
変数の値が「未定義（null/undefined）」のときだけデフォルト値を代入したいなら、迷わず「??」を使いましょう。例えば、ユーザーの入力値やAPIから取得したデータなど、「0」という数値そのものが重要な意味を持つ場合に、従来の「||」を使うと意図しないデフォルト値で上書きされてしまう問題を防げます。
4. サンプルプログラム：実際に動かしてみよう
以下のコードをブラウザのコンソールなどに貼り付けて、動作の違いを確認してみてください。
// ユーザーが入力した数値を想定（今回は0を指定）
const userInput = 0;
// 【NG例】論理和演算子（||）を使う場合
// 0 は false と判定されるため、意図せずデフォルト値の 10 が入ってしまう
const resultBad = userInput || 10;
console.log("|| の結果:", resultBad); // 表示: 10
// 【OK例】Null合体演算子（??）を使う場合
// 0 は null/undefined ではないので、0 がそのまま採用される
const resultGood = userInput ?? 10;
console.log("?? の結果:", resultGood); // 表示: 0
// null の場合は両方ともデフォルト値が選ばれる
const emptyValue = null;
console.log("null の場合:", emptyValue ?? "デフォルト値"); // 表示: デフォルト値
5. 応用・注意点：現場での活用と落とし穴
現場の開発では、APIから返ってくるデータが「0」なのか「null」なのかを厳密に区別する必要がある場面が非常に多いです。
注意点として、IE（Internet Explorer）などの古いブラウザでは対応していない可能性があるため、モダンブラウザ向けのアプリケーションや、ビルドツール（BabelやTypeScriptなど）を使用している環境で活用してください。また、「??」と「&&」を混ぜて書く際は、必ず括弧「()」を使用して評価の順序を明示しないとエラーになる仕様があるため、複雑な式を書く際は注意が必要です。
これからは「とりあえず||を使おう」ではなく、「0や空文字を正しく扱いたいときは??を使おう」という意識を持つだけで、あなたの書くコードはより堅牢になります！