【JavaScript】Null合体演算子の書き方と使い方の基本

この記事では、JavaScriptのNull合体演算子（??）の基本的な使い方を解説します。変数の値が null や undefined の場合に、あらかじめ決めた初期値を簡単に設定する方法を学びます。よく似た論理和演算子（||）との違いや、0や空文字を有効な値として扱いたい場合の使い分けも、サンプルコードを使って分かりやすく紹介します。

作成日: 2025年12月21日更新日: 2025年12月21日

開発環境

OS: Windows10
Editor: Visual Studio Code
JavaScript: ES6以降

JavaScriptのNull合体演算子（Nullish Coalescing Operator）とは

Null合体演算子（??）は、JavaScriptで使われる演算子の一つです。この演算子は、左側にある値が null または undefined のどちらかであった場合に、右側にある値を返します。

もし左側の値が null や undefined 以外（例えば、数値の0や空の文字列''など）であれば、そのまま左側の値を返します。

この動作は、変数に「値が設定されていなかった場合の初期値（デフォルト値）」を設定したいときによく利用されます。

具体的なコードで見ていきましょう。


1// nameがundefinedなので、右側の'ゲスト'が採用される
2let name;
3const displayName = name ?? 'ゲスト';
4
5console.log(displayName); // 出力結果: 'ゲスト'

もしnameに値が入っていれば、その値がそのまま使われます。


1// nameに値があるので、左側の'田中'が採用される
2let name = '田中';
3const displayName = name ?? 'ゲスト';
4
5console.log(displayName); // 出力結果: '田中'

よく似た演算子（||）との違い

JavaScriptには、Null合体演算子（??）と似た動きをする論理和演算子（||）があります。しかし、この二つには重要な違いがあります。

?? は、左の値が null または undefined の時だけ右の値を返します。
|| は、左の値が falsy（偽と判定される値） の時に右の値を返します。falsyな値には null, undefined に加えて、 0, ''(空文字), false などが含まれます。

例えば、0という数値を有効なデータとして扱いたい場合、|| を使うと意図しない結果になることがあります。


1let itemCount = 0; // 商品の個数が0個
2
3// || を使うと、0がfalsyと判定されるため、右側の10が代入されてしまう
4const displayCount1 = itemCount || 10;
5console.log(displayCount1); // 出力結果: 10
6
7// ?? を使うと、0はnullでもundefinedでもないので、そのまま左側の0が採用される
8const displayCount2 = itemCount ?? 10;
9console.log(displayCount2); // 出力結果: 0

このように、0や空文字を「値が無い」のではなく「有効な値」として扱いたい場面で、Null合体演算子（??）は非常に便利です。

Null合体演算子の書き方

Null合体演算子（??）は、左側の値が null または undefined の場合に、右側の値を採用するための記述方法です。これにより、変数に初期値やデフォルト値を簡単に設定できます。


1変数 = 左の値 ?? 右の値;

この式は、以下のように動作します。

まず、?? の左側にある「左の値」を評価します。
もし「左の値」が null または undefined でない場合は、その値がそのまま「変数」に代入されます。
もし「左の値」が null または undefined である場合は、「右の値」が「変数」に代入されます。

プログラミングでは、変数の値が null (意図的に空に設定されている状態) や undefined (まだ値が設定されていない状態) の場合に、代わりに別の値（デフォルト値）を使用したい場面がよくあります。ここでは、その処理を実現するための2つの方法を比較し、より簡潔に記述できる「null合体演算子 (??)」について学習します。

サンプルコード

javascript/chapter10/index.html

このHTMLファイルは、これから見ていく2つのJavaScriptファイル (script01.js と script02.js) をブラウザで実行するために使用します。<body> タグ内で <script> タグを使ってJavaScriptファイルを読み込んでいます。


1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="UTF-8" />
5    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6    <title>JavaScriptチュートリアル</title>
7  </head>
8
9  <body>
10    <h1>JavaScriptチュートリアル</h1>
11    <script src="./script01.js" defer></script>
12    <script src="./script02.js" defer></script>
13  </body>
14</html>
15

javascript/chapter10/script01.js

このファイルでは、変数が null の場合にデフォルト値を設定する方法を学びます。 username という変数が null であった場合に、「ゲスト」という文字列を表示させる例です。従来の if 文を使った書き方と、null 合体演算子 (??) を使った書き方を比較しています。?? を使うと、コードが非常に短く、分かりやすくなることが確認できます。


1// 例: ユーザー名の表示
2// username が null または undefined でなければその値を使い、そうでなければ「ゲスト」を表示する
3
4// username が null の場合
5let username = null;
6
7// if文を使用する場合
8let displayName;
9if (username !== null && username !== undefined) {
10  displayName = username;
11} else {
12  displayName = "ゲスト";
13}
14console.log("if文を使用した結果:", displayName);
15
16// null合体演算子を使用する場合
17displayName = username ?? "ゲスト";
18console.log("null合体演算子を使用した結果:", displayName);
19

javascript/chapter10/script02.js

このファイルでは、オブジェクトのプロパティが存在しない (undefined) 場合にデフォルト値を設定する方法を学びます。 data というオブジェクトに name プロパティが存在しないため、data.name は undefined になります。この場合に、「不明」という文字列を設定する例です。 null 合体演算子 (??) は、変数が null の場合だけでなく undefined の場合にも同じように機能するため、プロパティが存在しない場合のデフォルト値設定にも非常に有効です。


1// 例: オブジェクトのプロパティが存在しない場合のデフォルト値の設定
2// dataオブジェクトの 'name' プロパティが存在する場合はその値を使い、そうでなければ「不明」を表示する
3
4// オブジェクトの設定
5const data = {
6  age: 25,
7};
8
9// if文を使用する場合
10let userName;
11if (data.name !== undefined && data.name !== null) {
12  userName = data.name;
13} else {
14  userName = "不明";
15}
16console.log("if文を使用した結果:", userName);
17
18// null合体演算子を使用する場合
19userName = data.name ?? "不明";
20console.log("null合体演算子を使用した結果:", userName);
21

おわりに

今回は、Null合体演算子（??）の基本的な使い方について解説しました。この演算子を使えば、変数の値が null や undefined の場合に、if文よりもはるかに短く、分かりやすく初期値を設定できます。論理和演算子（||）とは異なり、0や空文字を「値が無い」とは見なさずにそのまま扱える点が重要なポイントです。この便利な演算子を使いこなして、より安全で読みやすいコードを目指しましょう。