JavaScript/?.

?.（Optional Chaining）は、オブジェクトのプロパティやメソッドにアクセスする際に、途中の参照がnull または undefinedの場合でもエラーを発生させずに処理を続行できる構文です。この機能により、深くネストされたオブジェクト構造を安全に操作することができます。

構文

obj?.prop       // プロパティへのアクセス
obj?.[expr]     // ブラケット記法によるプロパティへのアクセス
func?.(...args) // 関数やメソッドの呼び出し

• obj: アクセス対象のオブジェクト
• prop: アクセスするプロパティ名
• expr: プロパティ名を評価する式
• func: 呼び出す関数またはメソッド
• args: 関数に渡す引数

例

プロパティへのオプショナルチェイニング

以下のプログラムは、?. 演算子を使用してオブジェクトのプロパティに安全にアクセスする方法を示しています。

const user = {
  name: "Alice",
  address: {
    street: "123 Main St",
    city: "Wonderland"
  }
};

const userWithoutAddress = {
  name: "Bob"
};

// オプショナルチェイニングを使用
console.log(user?.address?.city); // "Wonderland"
console.log(userWithoutAddress?.address?.city); // undefined

// オプショナルチェイニングを使用しない場合
// console.log(userWithoutAddress.address.city); // TypeError: Cannot read property 'city' of undefined

このプログラムでは、?. 演算子を使用して、オブジェクトの深くネストされたプロパティに安全にアクセスしています。userWithoutAddress オブジェクトには address プロパティがありませんが、オプショナルチェイニングを使用することでエラーは発生せず、undefined が返されます。

配列要素とブラケット記法へのオプショナルチェイニング

以下のプログラムは、配列要素とブラケット記法でのオプショナルチェイニングの使用例を示しています。

const users = [
  { name: "Alice", skills: ["JavaScript", "React"] },
  { name: "Bob" }
];

const key = "skills";

// 配列要素とブラケット記法でのオプショナルチェイニング
console.log(users[0]?.skills?.[0]); // "JavaScript"
console.log(users[1]?.skills?.[0]); // undefined

// プロパティ名を変数で指定する場合
console.log(users[0]?.[key]?.[0]); // "JavaScript"
console.log(users[1]?.[key]?.[0]); // undefined

// 存在しない配列インデックスへのアクセス
console.log(users[999]?.name); // undefined

このプログラムでは、配列要素へのアクセスやブラケット記法によるプロパティアクセスでもオプショナルチェイニングを使用できることを示しています。存在しない配列インデックスやプロパティにアクセスしてもエラーは発生せず、undefined が返されます。

メソッド呼び出しへのオプショナルチェイニング

以下のプログラムは、メソッド呼び出しでのオプショナルチェイニングの使用例を示しています。

const user = {
  name: "Alice",
  greet() {
    return `Hello, I'm ${this.name}!`;
  }
};

const userWithoutGreet = {
  name: "Bob"
};

// メソッド呼び出しでのオプショナルチェイニング
console.log(user.greet?.()); // "Hello, I'm Alice!"
console.log(userWithoutGreet.greet?.()); // undefined

// オプショナルチェイニングを使用しない場合
// console.log(userWithoutGreet.greet()); // TypeError: userWithoutGreet.greet is not a function

このプログラムでは、?.() 構文を使用してメソッドが存在する場合のみ呼び出しを行っています。userWithoutGreet オブジェクトには greet メソッドがありませんが、オプショナルチェイニングを使用することでエラーは発生せず、undefined が返されます。

注意点

• 短絡評価: オプショナルチェイニングは短絡評価を行います。左辺が null または undefined の場合、右辺の評価は行われず、undefined が返されます。
• nullとundefinedのみ: オプショナルチェイニングは null または undefined の場合のみ短絡評価を行います。0、（空文字列）、false などの他の偽値に対しては通常通り評価が行われます。
• 代入演算子との併用: オプショナルチェイニングは代入の左辺では使用できません。
• 演算子の優先順位: オプショナルチェイニング演算子（?.）は、メンバーアクセス演算子（.）とほぼ同じ優先順位を持ちます。
• Nullish合体演算子との併用: オプショナルチェイニングは Nullish 合体演算子（??）と組み合わせて使用すると、より強力なデフォルト値の設定が可能になります。

外部リンク

• ECMA-262::13.3.9 Optional Chains