Contents
nullish coalescing演算子（??）とは？
JavaScriptのnullish coalescing演算子（??）は、nullまたはundefinedのみを条件として判定する論理演算子です。この演算子は2020年にES2020として導入され、値が明示的に「存在しない」状態にだけ反応します。falseや0、空文字などの偽値（falsy value）には影響を受けません。
定義と動作原理
??は、「左辺の値がnullまたはundefinedである場合に右辺の値を返す」というシンプルなロジックを持っています。例えば以下のように使用します：
|
1 2 3 4 5 6 7 8 9 10 |
const config = { api: { endpoint: null, timeout: 5000 } }; const url = config.api.endpoint ?? 'https://default.com'; console.log(url); // 'https://default.com' |
この例ではconfig.api.endpointがnullのため、デフォルト値として'https://default.com'を設定しています。一方で、timeoutは5000（真値）なので代入されません。
null/undefinedの判定ロジック
| 条件 | ??の結果 |
補足 |
|---|---|---|
null |
右辺を返す | 唯一のtrue条件 |
undefined |
右辺を返す | 変数未初期化時の状態 |
false |
左辺を返す | 偽値だがnull/undefinedではない |
0 |
左辺を返す | 数値の0はtrueと扱われる |
'' |
左辺を返す | 空文字列もtrueと判定される |
この特性により、「値が存在しない場合に限りデフォルト値を与える」という明確なロジックを実装できます。
??演算子と||演算子の違い
||演算子との最大の違いは、「偽値（false, 0, ''など）に対する反応」にあります。両者を比較することで、最適な使用シーンが明確になります。
判定条件の比較
| 演算子 | null/undefinedのみ判定 | 偽値も含む判定 |
|---|---|---|
?? |
✅ | ❌ |
|| |
❌ | ✅ |
具体的な動作例を比較します：
|
1 2 3 4 5 6 7 8 |
const value1 = false; console.log(value1 ?? 'デフォルト'); // false → false（左辺を返す） console.log(value1 || 'デフォルト'); // 'デフォルト'（右辺を返す） const value2 = 0; console.log(value2 ?? 'デフォルト'); // 0 → 0（左辺を返す） console.log(value2 || 'デフォルト'); // 'デフォルト'（右辺を返す） |
実務選定ガイド
| シナリオ | 推奨演算子 |
|---|---|
| 値の存在有無だけ確認したい時 | ?? |
| デフォルト値を偽値でも設定したい場合 | || |
デフォルト値設定の具体例
実際のコーディングシーンでは、オブジェクトや配列に??を使用して安全なデフォルト値を指定できます。
オブジェクトへの応用
APIレスポンスからデータを取得する際、プロパティが存在しない可能性がある場合：
|
1 2 3 4 5 6 7 8 9 10 |
const response = { user: { name: '山田太郎', address: undefined } }; const postalCode = response.user.address?.postal ?? '000-0000'; console.log(postalCode); // '000-0000' |
?.（オプショナルチェイン）と組み合わせることで、ネストしたプロパティも安全に参照できます。
配列の初期化パターン
配列がundefinedまたはnullの場合、空配列を初期値として指定します：
|
1 2 3 4 |
const data = null; const items = data ?? []; console.log(items); // [] |
このようにすることで、data.map(...)のような処理でエラーを回避できます。
nullish checkの応用シーン
状態管理での活用（React例）
Reactのstate初期値設定では、undefinedが混入する可能性のあるデータに対して??を使用します：
|
1 2 3 4 5 6 7 8 9 10 11 12 |
const [user, setUser] = useState(null); useEffect(() => { fetchData().then(data => setUser(data)); }, []); return ( <div> {user?.name ?? 'ゲスト'} </div> ); |
この場合、userがnull/undefinedの間は「ゲスト」と表示され、データが取得されたら実際の名前になります。
型ガードの簡略化（TypeScript）
TypeScriptでは??を使って型の明示的なチェックを省略できます：
|
1 2 3 4 |
function processInput(input: string | null): string { return input ?? 'empty'; } |
この関数はnullまたはundefinedが渡された場合にデフォルト値を返し、inputがstringである場合はそのまま返します。
ES2020導入時の注意点
ブラウザサポートとポリフィルの選択
ES2020導入時には、環境ごとのサポート状況を確認することが重要です。MDNの最新情報（2023年12月時点）によると、すべての主要ブラウザで??は実装済みです。
ただし、以下のような環境では注意が必要です：
- Node.js v14以前：ES2020をサポートしていないためpolyfillが必要
- IEや旧版モバイルブラウザ：使用不可（市場シェアが極めて小さい）
polyfillの検討
polyfillは??の動作を模倣するコードですが、Object.prototypeへのプロパティ定義は推奨されません。代わりに以下のような安全な方法が望ましいです：
|
1 2 3 4 |
function nullishCoalescing(value, def) { return value === null || value === undefined ? def : value; } |
注意: polyfillは開発環境でのみ有効化するべきです。本番環境ではES2020対応のエンジンを使用することを推奨します。
ポリフィルとトランスパイルの選択
ポリフィルの代替手段
- BabelやTypeScript: 現代的な構文を古い環境でも実行可能にするためのトランスパイラ
- Core JS: 一部の機能に特化したpolyfillライブラリ（
??はすでに標準仕様なので必要ない場合も）
モジュールバンドラーでの設定例
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
// webpack.config.js module.exports = { module: { rules: [ { test: /\.js$/, use: ['babel-loader'], exclude: /node_modules/ } ] } }; |
参考: Node.js v14は2022年4月にサポート終了しています。最新のNode.js LTSバージョン（例: v18 or v20）を使用することを強く推奨します。
MDN公式ドキュメントで深掘り
JavaScript nullish coalescing 演算子に関する最新情報や詳細な仕様は、MDN Web Docs を参照してください。演算子の使い方や実装例、ブラウザサポート状況などが網羅されています。
このドキュメントを活用することで、より深い理解と実務への応用力が養われます。