コンテンツにスキップ

JavaScript/@?.()

出典: フリー教科書『ウィキブックス(Wikibooks)』


?.() は、ECMAScript のオプショナルチェイニング(Optional Chaining)演算子の一部で、関数が存在する場合にのみ安全に呼び出すための構文です。この構文は、関数が null または undefined の場合にエラーを発生させずに呼び出しを試みるために使用されます[1]

構文

[編集]
MemberExpression[?Yield, ?Await] ?. Arguments[?Yield, ?Await]
  • MemberExpression[?Yield, ?Await]: 関数を参照する式。YieldAwait は、ジェネレーター関数や非同期関数内での使用を制御するためのオプションのパラメータです。
  • Arguments[?Yield, ?Await]: 関数に渡される引数のリスト。YieldAwait は、ジェネレーター関数や非同期関数内での使用を制御するためのオプションのパラメータです。

この構文は、関数が null または undefined でない場合にのみ関数を呼び出し、それ以外の場合は undefined を返します。

[編集]

基本的な使用法

[編集]

以下のプログラムは、?.() の基本的な使用法を示しています。

// 基本的な使用法
const obj = {
  method: function() {
    return "method called";
  }
};

// オプショナルチェイニングを使用してメソッドを呼び出す
console.log(obj.method?.()); // "method called"
console.log(obj.nonExistentMethod?.()); // undefined

このプログラムでは、obj.method が存在する場合にのみ関数が呼び出されます。存在しないメソッドに対してはエラーが発生せず、undefined が返されます。

ネストされたオブジェクトでの使用

[編集]

以下のプログラムは、ネストされたオブジェクトでの ?.() の使用例を示しています。

// ネストされたオブジェクトでの使用
const obj = {
  nested: {
    method: function() {
      return "nested method called";
    }
  }
};

// オプショナルチェイニングを使用してネストされたメソッドを呼び出す
console.log(obj.nested?.method?.()); // "nested method called"
console.log(obj.nested?.nonExistentMethod?.()); // undefined

このプログラムでは、ネストされたオブジェクトのメソッドにオプショナルチェイニングを使用してアクセスしています。

動的なメソッド名での使用

[編集]

以下のプログラムは、動的なメソッド名での ?.() の使用例を示しています。

// 動的なメソッド名での使用
const obj = {
  method1: function() {
    return "method1 called";
  },
  method2: function() {
    return "method2 called";
  }
};

const methodName = "method1";

// オプショナルチェイニングを使用して動的なメソッド名にアクセス
console.log(obj?.[methodName]?.()); // "method1 called"

このプログラムでは、動的なメソッド名 methodName を使用して、obj オブジェクトのメソッドにオプショナルチェイニングを使用してアクセスしています。

存在しないメソッドでの使用

[編集]

以下のプログラムは、存在しないメソッドでの ?.() の使用例を示しています。

// 存在しないメソッドでの使用
const obj = {
  method: function() {
    return "method called";
  }
};

// オプショナルチェイニングを使用して存在しないメソッドにアクセス
console.log(obj.nonExistentMethod?.()); // undefined

このプログラムでは、存在しないメソッド nonExistentMethod にオプショナルチェイニングを使用してアクセスしています。この場合、undefined が返されます。

関数呼び出しでの使用

[編集]

以下のプログラムは、関数呼び出しでの ?.() の使用例を示しています。

// 関数呼び出しでの使用
const obj = {
  method: function() {
    return "method called";
  }
};

// オプショナルチェイニングを使用してメソッドを呼び出す
console.log(obj.method?.()); // "method called"

このプログラムでは、obj オブジェクトの method メソッドをオプショナルチェイニングを使用して呼び出しています。

注意点

[編集]
  • this の挙動: オプショナルチェイニングを使用してメソッドを呼び出す場合、this の値は通常のメソッド呼び出しと同じように振る舞います。
  • 引数の評価順序: 引数は左から右の順に評価されます。この順序は重要な場合があります(例えば、引数が副作用を持つ場合)。
  • 関数の存在チェック: 関数が存在しない可能性がある場合、オプショナルチェイニングを使用して安全に関数を呼び出すことができます。

脚註

[編集]
  1. ^ この構文は、特にオブジェクトのメソッドが存在しない可能性がある場合に有用です。

外部リンク

[編集]