JavaScriptで使えるnull合体演算子の実践例10選

●null合体演算子とは？
●null合体演算子の実践的な使用例
●よくあるエラーと対処法
●null合体演算子の応用例
まとめ

●null合体演算子とは？

JavaScriptを使っていると、変数やオブジェクトのプロパティがnullやundefinedになることがよくありますよね。

そんなときに、エラーを回避しつつデフォルト値を設定するのに便利なのが、null合体演算子（??）です。

私も初めてnull合体演算子を知ったときは、「これは使える！」と感じました。

それまではif文で条件分岐を書いたり、三項演算子を使ったりと、ちょっと面倒だったんですよ。

でも、null合体演算子を使えば、シンプルに書けるようになります。

○null合体演算子の基本的な使い方

null合体演算子の基本的な使い方は、次のようになります。

変数 ?? デフォルト値

これは、変数がnullまたはundefinedの場合に、デフォルト値を返すという意味です。

変数に値が入っている場合は、その値が返されます。

実際に使ってみると、その便利さが実感できると思います。

ちょっとサンプルコードを見てみましょう。

○サンプルコード1：変数のデフォルト値の設定

let userName = null;
console.log(userName ?? "ゲスト"); // "ゲスト"

userName = "山田";
console.log(userName ?? "ゲスト"); // "山田"

このコードでは、userNameがnullの場合に、”ゲスト”という文字列をデフォルト値として出力しています。

userNameに”山田”を代入すると、”山田”が出力されます。

シンプルですが、とても便利ですよね。

if文を使わずに済むので、コードがスッキリします。

○サンプルコード2：オブジェクトプロパティのデフォルト値の設定

null合体演算子は、オブジェクトのプロパティにもデフォルト値を設定できます。

次のようなコードを見てみましょう。

const user = {
  name: "山田",
  age: null
};

console.log(user.age ?? 20); // 20

ここでは、userオブジェクトのageプロパティがnullなので、デフォルト値の20が出力されます。

オブジェクトのプロパティを参照するときに、nullやundefinedになる可能性がある場合は、null合体演算子を使うと便利ですね。

●null合体演算子の実践的な使用例

基本的な使い方はわかったけど、実際にどんなシーンで使うのか気になりますよね。

ここからは、null合体演算子の実践的な使用例をいくつか見ていきましょう。

サンプルコードを通して、null合体演算子がどのように活用されるのか理解を深めていきましょう。

きっと、自分のコードにも取り入れられるアイデアが見つかるはずです。

○サンプルコード3：関数の引数のデフォルト値の設定

関数の引数にデフォルト値を設定するのに、null合体演算子が使えます。

次のようなコードを見てみましょう。

function greet(name) {
  name = name ?? "ゲスト";
  console.log(`こんにちは、${name}さん！`);
}

greet("山田"); // "こんにちは、山田さん！"
greet(null);   // "こんにちは、ゲストさん！"

この関数では、引数nameがnullやundefinedの場合に、”ゲスト”をデフォルト値として設定しています。

これにより、名前が渡されなかった場合でも、エラーにならずに処理を続けることができます。

関数の引数にデフォルト値を設定する際は、null合体演算子を使うと便利ですね。

コードがスッキリして読みやすくなります。

○サンプルコード4：配列要素のデフォルト値の設定

配列の要素にアクセスする際に、インデックスが配列の範囲外だった場合などに、デフォルト値を設定するのにもnull合体演算子が使えます。

const colors = ["赤", "青", "緑"];

console.log(colors[0] ?? "色なし"); // "赤"
console.log(colors[3] ?? "色なし"); // "色なし"

このコードでは、colors配列の要素にアクセスしています。インデックスが配列の範囲内にある場合は、その要素が返されます。

一方、インデックスが範囲外の場合は、”色なし”がデフォルト値として返されます。

配列の要素にアクセスする際に、インデックスが範囲外になる可能性がある場合は、null合体演算子を使ってデフォルト値を設定すると良いでしょう。

エラーを回避しつつ、適切な値を返すことができます。

○サンプルコード5：ネストされたオブジェクトプロパティのチェック

オブジェクトのプロパティがネストされている場合、深い階層のプロパティにアクセスするときに、途中のプロパティがnullやundefinedだとエラーになってしまいます。

そんなときにも、null合体演算子が役立ちます。

const user = {
  name: "山田",
  address: {
    city: "東京"
  }
};

console.log(user.address.city ?? "住所未登録"); // "東京"
console.log(user.address.zipCode ?? "住所未登録"); // "住所未登録"
console.log(user.age?.address ?? "ユーザー情報なし"); // "ユーザー情報なし"

このコードでは、userオブジェクトのプロパティにアクセスしています。

user.address.cityは値が設定されているので、その値が返されます。

一方、user.address.zipCodeはzipCodeプロパティが存在しないため、”住所未登録”がデフォルト値として返されます。

さらに、user.age?.addressでは、ageプロパティが存在しないため、null合体演算子の左辺がundefinedになります。

その結果、”ユーザー情報なし”が返されます。

ネストされたオブジェクトのプロパティにアクセスする際は、null合体演算子とオプショナルチェーニング演算子（?.）を組み合わせると、より堅牢なコードを書くことができます。

○サンプルコード6：APIレスポンスのエラーハンドリング

APIからのレスポンスを処理する際に、期待したプロパティが存在しない場合があります。

そのようなエラーをハンドリングするのにも、null合体演算子が使えます。

async function fetchUserData(userId) {
  const response = await fetch(`https://api.example.com/users/${userId}`);
  const data = await response.json();

  const name = data.name ?? "名前なし";
  const age = data.age ?? "年齢不明";

  console.log(`名前: ${name}, 年齢: ${age}`);
}

fetchUserData(123);

この非同期関数では、APIからユーザーデータを取得しています。

レスポンスのdataオブジェクトに、nameやageプロパティが存在しない可能性があるため、null合体演算子を使ってデフォルト値を設定しています。

これにより、APIレスポンスの形式が変わったとしても、エラーになることなく処理を続けることができます。

APIとの連携を行う際は、想定外のレスポンスに備えておく必要があります。

null合体演算子を使ってデフォルト値を設定しておくと、エラーハンドリングがしやすくなります。

○サンプルコード7：三項演算子との組み合わせ

null合体演算子は、三項演算子と組み合わせて使うこともできます。

条件によって異なるデフォルト値を設定したい場合などに便利です。

function getMessage(error) {
  const message = error ? (error.message ?? "エラーが発生しました") : "処理が完了しました";
  console.log(message);
}

getMessage(null); // "処理が完了しました"
getMessage(new Error("ファイルが見つかりません")); // "ファイルが見つかりません"
getMessage({}); // "エラーが発生しました"

このコードでは、errorオブジェクトの有無によって、異なるメッセージを出力しています。

errorがtruthyな値の場合は、error.messageプロパティの値を出力します。

ただし、error.messageがnullやundefinedの場合は、”エラーが発生しました”というデフォルトのメッセージを出力します。

errorがfalsyな値の場合は、”処理が完了しました”というメッセージを出力します。

このように、null合体演算子と三項演算子を組み合わせることで、条件に応じて柔軟にデフォルト値を設定することができます。

コードの可読性も維持しつつ、エラーハンドリングを行うことができるでしょう。

●よくあるエラーと対処法

null合体演算子を使っていると、たまにエラーに遭遇することがありますよね。

でも、エラーメッセージを見ても、何が原因なのかわからないことがあります。

ここでは、null合体演算子を使っているときによく発生するエラーとその対処法を見ていきましょう。

エラーが発生したときに、どう解決すればいいのかわかると、スムーズにコーディングを進められます。

○TypeError: Cannot read property ‘xxx’ of null

このエラーは、nullのプロパティにアクセスしようとしたときに発生します。

例えば、次のようなコードがあるとします。

const user = null;
console.log(user.name ?? "ゲスト"); // TypeError: Cannot read property 'name' of null

ここでは、userがnullなのに、user.nameにアクセスしようとしているため、エラーが発生しています。

この場合は、null合体演算子を使う前に、nullチェックを行うのが一般的な対処法です。

const user = null;
console.log(user?.name ?? "ゲスト"); // "ゲスト"

このように、オプショナルチェーニング演算子（?.）を使って、userがnullでない場合にのみuser.nameにアクセスするようにします。

これにより、エラーを回避できます。

○ReferenceError: xxx is not defined

このエラーは、存在しない変数を参照しようとしたときに発生します。

次のようなコードを見てみましょう。

console.log(username ?? "ゲスト"); // ReferenceError: username is not defined

ここでは、usernameという変数が存在しないため、エラーが発生しています。

この場合は、変数を定義するか、グローバル変数を使うかの2つの対処法があります。

let username;
console.log(username ?? "ゲスト"); // "ゲスト"

このように、変数を定義しておけば、エラーを回避できます。

ただし、変数の定義場所には気をつける必要があります。

もう1つの方法は、グローバル変数を使うことです。

console.log(window.username ?? "ゲスト"); // "ゲスト"

このように、windowオブジェクトのプロパティとして参照することで、エラーを回避できます。

ただし、グローバル変数の使用は避けるべきです。

○null合体演算子の無限チェーン

null合体演算子を連続して使うと、可読性が下がるだけでなく、意図しない動作を引き起こすことがあります。

const user = {
  address: null
};

console.log(user.address ?? user.address.city ?? "住所未登録"); // TypeError: Cannot read property 'city' of null

このコードでは、user.addressがnullなので、user.address.cityにアクセスしようとしてエラーが発生しています。

この場合は、null合体演算子のチェーンを避け、論理積演算子（&&）を使うのが望ましいでしょう。

const user = {
  address: null
};

console.log(user.address && user.address.city ?? "住所未登録"); // "住所未登録"

このように、user.addressがtruthyな値の場合にのみ、user.address.cityにアクセスするようにします。

これにより、エラーを回避できます。

エラーが発生したときは、焦らずにエラーメッセージをよく読んで、原因を特定することが大切です。

そして、適切な対処法を選択して、コードを修正していきましょう。

●null合体演算子の応用例

これまで、null合体演算子の基本的な使い方や実践的な使用例を見てきましたが、ここからはもう少し応用的な使い方を探っていきましょう。

null合体演算子は、単独で使うだけでなく、他の演算子や構文と組み合わせることで、より柔軟で表現力豊かなコードを書くことができます。

ここでは、そんな応用例をいくつか紹介します。

サンプルコードを通して、null合体演算子の可能性を感じていただければと思います。

きっと、自分のコードにも取り入れられるアイデアが見つかるはずです。

○サンプルコード8：コンフィグオブジェクトのデフォルト値の設定

アプリケーションの設定を管理するコンフィグオブジェクトを使うことがありますよね。

そんなときに、null合体演算子を使ってデフォルト値を設定することができます。

const defaultConfig = {
  apiUrl: "https://api.example.com",
  maxRetries: 3,
  timeout: 1000
};

function loadConfig(userConfig) {
  return {
    apiUrl: userConfig.apiUrl ?? defaultConfig.apiUrl,
    maxRetries: userConfig.maxRetries ?? defaultConfig.maxRetries,
    timeout: userConfig.timeout ?? defaultConfig.timeout
  };
}

const userConfig = {
  apiUrl: "https://api.myapp.com",
  timeout: 500
};

const config = loadConfig(userConfig);
console.log(config);
// { apiUrl: "https://api.myapp.com", maxRetries: 3, timeout: 500 }

この例では、defaultConfigオブジェクトにデフォルトの設定値を定義しています。

loadConfig関数では、userConfigオブジェクトからプロパティを取得し、null合体演算子を使ってデフォルト値を設定しています。

これにより、ユーザーが設定した値があればそれを使い、なければデフォルト値を使うことができます。

コンフィグオブジェクトのマージがスッキリと書けますね。

○サンプルコード9：関数の戻り値のデフォルト値の設定

関数の戻り値がnullやundefinedになる可能性がある場合、null合体演算子を使ってデフォルト値を設定することができます。

function fetchUserName(userId) {
  // ユーザー名を取得する処理
  // ...
  return null; // ユーザーが見つからない場合はnullを返す
}

const userId = 123;
const userName = fetchUserName(userId) ?? "ゲスト";
console.log(userName); // "ゲスト"

この例では、fetchUserName関数がユーザー名を取得する処理を行っています。

ユーザーが見つからない場合は、nullを返すようにしています。

関数の呼び出し側では、null合体演算子を使って、戻り値がnullの場合にデフォルト値の”ゲスト”を使うようにしています。

このように、関数の戻り値を直接null合体演算子でハンドリングすることで、より簡潔なコードになります。

○サンプルコード10：条件分岐の簡略化

null合体演算子を使うと、条件分岐を簡略化することができます。

特に、変数がnullやundefinedの場合に別の値を使うような場合に便利です。

function greeting(name) {
  name = name ?? "ゲスト";
  console.log(`こんにちは、${name}さん！`);
}

greeting("山田"); // "こんにちは、山田さん！"
greeting(null);   // "こんにちは、ゲストさん！"
greeting(undefined); // "こんにちは、ゲストさん！"

この例では、greeting関数の引数nameがnullやundefinedの場合に、デフォルト値の”ゲスト”を使うようにしています。

null合体演算子を使うことで、if文を使わずに簡潔に書くことができます。

条件分岐が複雑になりがちな場合でも、null合体演算子を使えばスッキリと書けるでしょう。