JavaScriptで条件分岐やデフォルト値の設定を行う際、によく使われる「Nullish coalescing演算子（??）」と「三項演算子（? :）」。
「どちらを使えばいいの？」「どう違うの？」と疑問に思う方も多いのではないでしょうか。
本記事では、それぞれの基本的な概念から具体的な動作の違い、そして実務で迷わないための使い分けのポイントまでエビデンス（仕様）に基づいて分かりやすく解説します！
1. それぞれの基本概要
まず、2つの演算子の役割を簡潔におさらいしましょう。
- Nullish coalescing演算子（
??）:
「null または undefined」の場合のみ右辺の値を返します。 - 三項演算子（
? :）:
条件式の真偽（Boolean）によって返す値を切り替えます。
2. 決定的な違い：判定基準の厳格さ
最大の決定的な違いは、「何をもってデフォルト値を適用するか（Falsyな値の扱い）」です。
JavaScriptには、Boolean評価で false とみなされるFalsy（偽値）が存在します。
主なFalsyな値は null, undefined, 0, ""（空文字）, false, NaN の6つです。
| 演算子 | null / undefined | 0 や “”（空文字） | false |
??（Nullish） | 右辺を返す | 左辺（そのまま） | Left side (そのまま) |
? :（三項演算子） | 条件次第（Falsyなら偽側） | 条件次第（Falsyなら偽側） | 条件次第（Falsyなら偽側） |
3. コード例で見る動作比較
実際にコードを書いて動作を比較してみましょう。
パターンA: ユーザーの設定値が「0」の場合
数値の 0 や空文字 "" が「有効な値」として意味を持つシチュエーションです。
JavaScript
const userCount = 0; // ユーザーが意図して「0」を設定
// 1. Nullish coalescing演算子 (??)
const result1 = userCount ?? 10;
console.log(result1); // 結果: 0 (0はnull/undefinedではないため保持される)
// 2. 三項演算子 (? :) でFalsyチェックした場合
const result2 = userCount ? userCount : 10;
console.log(result2); // 結果: 10 (0はFalsyのため「10」に上書きされてしまう！)?? を使うことで、「未設定（null/undefined）」のときだけデフォルト値を適用し、「0」という正しい設定値を維持できます。
パターンB: 明確な条件分岐を行う場合
?? は単純な「存在チェック」しかできませんが、三項演算子は任意の条件式を評価できます。
JavaScript
const score = 85;
// 三項演算子なら柔軟な条件指定が可能
const grade = score >= 80 ? "合格" : "不合格";
console.log(grade); // 結果: 合格
// ?? ではこのような数値の比較評価はできません4. どちらを使うべき？使い分けのガイドライン
実務での使い分けは非常にシンプルです。以下の基準で選択しましょう。
??を使うべき場面- オプションの設定値や関数の引数などで、「デフォルト値（初期値）」を設定したいとき
0や""（空文字）、falseなどのFalsyな値を「有効な入力値」としてそのまま受け入れたいとき
? :を使うべき場面- 「Aが5以上ならX、それ以外はY」のように複雑な条件式（Boolean評価）で結果を分岐させたいとき
- 条件に応じて返したい値が異なる処理を1行でシンプルに書きたいとき
まとめ
??（Nullish coalescing演算子）:nullとundefinedだけを判定するデフォルト値設定の専門家? :（三項演算子）: 任意条件の真偽で値を切り替える条件分岐の万能選手
両者の特性を正確に理解して使い分けることで、バグの少ない読みやすいJavaScriptコードを記述できるようになります。
コメント