Optional chaining

This translation is incomplete. この記事の翻訳にご協力ください

optional chaining 演算子 ?. は、接続されたオブジェクトチェーンの深くに位置するプロパティの値を、チェーン内の各参照が正しいかどうかを明示的に確認せずに読み込むことを可能にします。?. 演算子の関数は . チェーン演算子と似ていますが、参照が nullish (null または undefined) の場合にエラーとなるのではなく、式が短絡され undefined が返されるところが異なります。 関数呼び出しで使用すると、与えられた関数が存在しない場合、undefined を返します。

これは、参照が失われた可能性のある連結されたプロパティにアクセスする時、結果的に短く単純な式になります。また、必要なプロパティの存在が保証されていない場合にオブジェクトのコンテンツを探索するのにも役立ちます。

構文

obj?.prop
obj?.[expr]
arr?.[index]
func?.(args)

説明

optional chaining 演算子は、参照や関数が undefined または null である可能性がある場合でも、接続されたオブジェクトの値に簡単にアクセスする手段を提供します。

たとえば、入れ子構造を持つオブジェクト obj を考えましょう。optional chaining 演算子なしで深い入れ子になったサブプロパティにアクセスするには、次のように、各プロパティ間の参照を確認する必要があります:

let nestedProp = obj.first && obj.first.second;

obj.first.second の値にアクセスする前に、obj.first の値が null または undefined でないことが確認されます。これにより、obj.first をテストせずに直接 obj.first.second にアクセスしたときに起きるエラーを防ぐことができます。

しかし、optional chaining 演算子 (?.) を使えば、obj.first.second にアクセスしようとする前に obj.first の状態を明示的にテストする必要がなくなります:

let nestedProp = obj.first?.second;

?.. の代わりに用いることで、JavaScript が obj.first.second にアクセスしようとする前に obj.firstnull または undefined でないことを暗黙的に確かめるようになります。obj.firstnull または undefined であった場合、式が自動的に短絡され、 undefined が返ります。

これは、一時的な変数が作成されないことを除き、次の式と等価です。

let temp = obj.first;
let nestedProp = ((temp === null || temp === undefined) ? undefined : temp.second);

関数呼び出しで optional chaining 演算子を使う

存在しない可能性がある関数の呼び出しを試行するときに、optional chainingを使うことができます。これはたとえば、ユーザーのデバイス上で使えなかったり、実装が古かったりするために使えなかったりする可能性があるAPIを使うときに役立ちます。

関数呼び出しで optional chaining 演算子を用いた場合、メソッドが見つからないときは自動的に undefined が返ります。例外はスローされません。

let result = someInterface.customMethod?.();

Note: 存在するがメソッドでないプロパティに対して ?. を使うと、例外 TypeError がスローされます (x.y is not a function) 。

省略可能なコールバックやイベントハンドラを扱う

コールバックを使う場合や、オブジェクトからメソッドを分割代入を利用して取り出す場合に、存在しない値がある可能性があり、その存在を検証するまで関数として呼び出せません。その場合?.を利用することで、検証の必要性を回避できます:

// Written as of ES2019
function doSomething(onContent, onError) {
  try {
    // ... do something with the data 
  }
  catch (err) {
    if (onError) { // Testing if onError really exists
      onError(err.message);
    }
  }
}
// Using optional chaining with function calls
function doSomething(onContent, onError) {
  try {
   // ... do something with the data
  }
  catch (err) {
    onError?.(err.message); // no exception if onError is undefined
  }
}

optional chaining 演算子を式と組み合わせて使う

ブラケット表記法と optional chaining 演算子を組み合わせることもできます。

let nestedProp = obj?.['prop' + 'Name'];

Array item access with optional chaining

let arrayItem = arr?.[42];

基本的な例

次の例では、マップ myMap に存在しない bar メンバに対して name プロパティを取得しようとしています。TypeError はスローされず、 nameBarundefined が代入されます。

let myMap = new Map();
myMap.set("foo", {name: "baz", desc: "inga"});

let nameBar = myMap.get("bar")?.name;

短絡評価

式と一緒に optional chaining 演算子を用いたとき、左側のオペランドが null または undefined である場合にその式は評価されなくなります。

次の例では、?. の左側の potentiallyNullObjnull であるため、x++ が評価されません。

let potentiallyNullObj = null;
let x = 0;
let prop = potentiallyNullObj?.[x++];

console.log(x); // 0 as x was not incremented

Optional chainingをつなげて使う

入れ子になったオブジェクトでは、optional chaining 演算子を何度でも使えます。

let customer = {
  name: "Carl",
  details: {
    age: 82,
    location: "Paradise Falls" // detailed address is unknown
  }
};
let customerCity = customer.details?.address?.city;

// … this also works with optional chaining function call
let duration = vacations.trip?.getTime?.();

Null合体演算子と共に使う

ヌル合体演算子はoptional chainingの後につけることで、存在しない値があった時、デフォルト値をかわりに使うために利用できます:

let customer = {
  name: "Carl",
  details: { age: 82 }
};
const customerCity = customer?.city ?? "Unknown city";
console.log(customerCity); // Unknown city

仕様

仕様書 策定状況 コメント
Proposal for the "optional chaining" operator Stage 4

ブラウザーの実装状況

Update compatibility data on GitHub
デスクトップモバイルサーバー
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung InternetNode.js
Optional chaining operator (?.)Chrome 完全対応 80
完全対応 80
完全対応 79
無効
無効 From version 79: this feature is behind the Experimental JavaScript preference (needs to be set to true). To change preferences in Chrome, visit chrome://flags.
Edge 完全対応 80
完全対応 80
完全対応 79
無効
無効 From version 79: this feature is behind the Experimental JavaScript preference (needs to be set to true).
Firefox 完全対応 74IE 未対応 なしOpera 完全対応 67
完全対応 67
完全対応 66
無効
無効 From version 66: this feature is behind the Experimental JavaScript preference (needs to be set to true).
Safari 未対応 なしWebView Android 完全対応 80Chrome Android 完全対応 80
完全対応 80
完全対応 79
無効
無効 From version 79: this feature is behind the Experimental JavaScript preference (needs to be set to true). To change preferences in Chrome, visit chrome://flags.
Firefox Android 未対応 なしOpera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なしnodejs 未対応 なし

凡例

完全対応  
完全対応
未対応  
未対応
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。

Implementation Progress

The following table provides a daily implementation status for this feature, because this feature has not yet reached cross-browser stability. The data is generated by running the relevant feature tests in Test262, the standard test suite of JavaScript, in the nightly build, or latest release of each browser's JavaScript engine.

関連情報