先生と生徒の会話形式で理解しよう

生徒

「JavaScriptでオブジェクトの中にある情報を取り出したいけど、時々ないこともあってエラーが出ます。どうしたら安全に取り出せますか？」

先生

「そんなときはオプショナルチェーンという仕組みを使うと便利です。これはプロパティが存在しない場合でもエラーにならず、安全に値を取り出せますよ。」

生徒

「オプショナルチェーンってどんな書き方で、どうやって使うんですか？」

先生

「それでは基本から具体例を交えて丁寧に解説しますね！」

1. オプショナルチェーン（?.演算子）とは？

オプショナルチェーンは、JavaScriptの?.（ドットの前に？）という記号を使った機能で、「もしそのプロパティやメソッドがあれば取り出す・呼び出す、なければundefinedにする」という意味です。

普通にオブジェクトの深いプロパティにアクセスするときに、途中のどこかが存在しないとエラーになります。オプショナルチェーンを使うと、そんなエラーを防げます。

2. どうしてオプショナルチェーンが必要？

例えば、次のようなオブジェクトを考えます。


const user = {
  name: "花子",
  address: {
    city: "東京"
  }
};

ここで、ユーザーの住所の郵便番号（postalCode）を取り出そうとすると、addressには郵便番号がありません。直接アクセスするとエラーになります。


console.log(user.address.postalCode); // エラーになる場合があります

なぜなら、postalCodeがundefinedだからではなく、address自体が存在しなければ「存在しないもののさらに中を見る」ためエラーが発生します。

オプショナルチェーンを使うと安全に取り出せるので、こう書きます。


console.log(user.address?.postalCode); // undefined と表示されるだけ

もしaddressがなければundefinedが返り、エラーにはなりません。

オプショナルチェーンは、次のように使います。

例えばメソッド呼び出しの例です。


const user = {
  greet() {
    console.log("こんにちは！");
  }
};

user.greet?.();  // こんにちは！ と表示される
user.farewell?.(); // 何も起こらない（エラーにならない）

実際のWebアプリなどで、ユーザー情報の中にオプションで設定されている情報があるとします。


const user = {
  name: "花子",
  settings: {
    theme: "dark"
  }
};

もしsettingsが無かったらuser.settings.themeを取得しようとするとエラーです。オプショナルチェーンを使うとこうなります。


const theme = user.settings?.theme ?? "light";
console.log(theme); // settingsがなければ"light"が表示される

ここで使われている??は「null合体演算子」といい、左側がnullまたはundefinedのときだけ右側の値を使います。つまり、設定がなければ「light」というデフォルト値を使うことができます。

JavaScriptでプロパティを連続してアクセスするとき、途中のどこかがnullやundefinedだと「存在しないプロパティを参照しました」というエラーが出ます。

オプショナルチェーンを使うと、途中でnullやundefinedがあればそこで処理が止まり、エラーを起こさずにundefinedを返します。これにより、プログラムが途中で止まらずに済みます。

プログラムのエラーを減らし、コードの安全性を高めたいときに役立ちます。