MENU
AIに同じことを聞かない
  1. ホーム
  2. プログラミング
  3. JavaScript
  4. JavaScriptのオプショナルチェーンとは

JavaScriptのオプショナルチェーンとは

JavaScript
JavaScript オプショナルチェーン
tama

Mozillaの解説サイトを置きつつ。

オプショナルチェーン (?.) - JavaScript | MDN

ChatGPT-4に色々説明させてまとめさせた。

目次

イントロ

JavaScriptのコードを書いていて、深くネストされたプロパティや関数に安全にアクセスしたいと思ったことはありませんか？ ECMAScript 2020（ES11）が導入したオプショナルチェーンは、このような問題を解決します。

オプショナルチェーンとは

オプショナルチェーンは、JavaScriptの構文の一つで、存在を確認せずにオブジェクトのプロパティにアクセスしようとしたときにエラーが発生する問題を解決する新しいJavaScriptの機能です。これにより、プロパティが存在する場合に値を取得し、存在しない場合にundefinedを返します。オプショナルチェーン演算子は '?.', と表されます。

const city = user.address?.city; // 'New York'またはundefined

オプショナルチェーンは、コードの冗長性を減らし、読みやすさとメンテナンス性を向上させます。さらに、nullやundefinedに対する安全なアクセスを提供することで、ランタイムエラーを防ぐ役割も果たします。

オプショナルチェーンの使用方法

通常、JavaScriptではプロパティやメソッドにアクセスする際に、そのプロパティやメソッドが存在するかどうかを先に確認しなければなりません。存在しないプロパティやメソッドにアクセスしようとすると、TypeErrorが発生します。しかし、オプショナルチェーンを使うことで、このようなエラーを防ぐことができます。

const user = {
  name: 'Alice',
  address: {
    city: 'New York',
  }
};

console.log(user.address.city); // 'New York'
console.log(user.address.zip);  // TypeError: Cannot read property 'zip' of undefined

このような場合に、オプショナルチェーンを使うと次のように書けます：

console.log(user.address?.city); // 'New York'
console.log(user.address?.zip);  // undefined

オプショナルチェーン演算子 '?.', を使用すると、左辺の値がnullまたはundefinedの場合、その時点で評価が終了し、undefinedを返します。したがって、存在しないプロパティにアクセスしてもエラーを投げずにundefinedを返すため、コードの安全性が向上します。

また、オプショナルチェーンはメソッド呼び出しや配列のアクセスにも使用できます。存在しないメソッドを呼び出そうとしたり、存在しない配列の要素にアクセスしようとするときにも、オプショナルチェーンを使うことでエラーを防ぐことができます。

const user = {
  greet: () => {
    console.log('Hello!');
  }
};

user.greet?.(); // 'Hello!'
user.sayBye?.(); // undefined

const users = [
  { name: 'Alice' },
  { name: 'Bob' }
];

console.log(users[0]?.name); // 'Alice'
console.log(users[2]?.name); // undefined

このように、オプショナルチェーンはJavaScriptで安全にオブジェクトのプロパティにアクセスするための便利な機能であり、コードのエラーハンドリングと可読性を大いに改善します。

オプショナルチェーンの注意点

オプショナルチェーンの使用には、以下のような注意すべき点があります。

  1. 適切な利用： プロパティの存在を必要とするケースや、nullやundefinedが許容されない場合には、オプショナルチェーンは適切ではないかもしれません。
  2. パフォーマンス： オプショナルチェーンは過度に使用するとパフォーマンスに影響を及ぼす可能性があります。
  3. 互換性： オプショナルチェーンはECMAScript 2020（ES11）で導入された新しい機能なので、古いブラウザではサポートされていない可能性があります。

オプショナルチェーンの注意が不適切であるかもしれないケースとして、具体的には下記のようなものが考えられます。

  1. 外部APIからのレスポンスのパース: APIからのレスポンスとして特定のオブジェクトが常に存在することが明示的に保証されている場合、そのオブジェクトのプロパティにアクセスする際にはオプショナルチェーンを使うべきではありません。なぜなら、そのオブジェクトが期待通りに存在しなかった場合、それはAPIのエラーまたはデータの不整合を示しており、それをコードの中で明示的に検出するべきだからです。
  2. 必須の設定値: 例えば、アプリケーション設定を含むオブジェクトがあるとします。その中のいくつかの値がアプリケーションの正常な動作にとって絶対必要である場合、それらの値にアクセスする際にオプショナルチェーンを使用すると、値が存在しない場合にエラーが発生せずにundefinedが返るため、問題が見逃される可能性があります。
  3. 計算に必要な値: 例えば、算術演算子を使用して計算を行う場合、undefinedやnullの値を算術演算子で使うとNaN（Not a Number）が結果として出力されます。これが意図した動作でない場合、値の存在チェックを明示的に行うべきです。

これらのケースでは、オプショナルチェーンを使用すると、本来検出されるべきエラーや問題が見逃され、バグが発生する可能性があります。このようなケースでは、明示的に値の存在をチェックし、適切なエラーハンドリングを行うことが重要です。

まとめ

オプショナルチェーンは、コードを簡潔にし、プロパティの存在チェックを容易にします。ただし、使用している環境がECMAScript 2020以降をサポートしていることを確認してから使用する必要があります。

寸評

最初からオプショナルチェーンについて解説を書かせるつもりで質問した。Mozillaの記事と比べてどうだろうか。説明はこちらのほうが易しいように思える。また、「なぜ必要なのか」「使用しないほうがよいケースはあるのか」など、実際に使用するうえで気になる部分についても突っ込んで聞くことで、より実用的な記事になったんじゃなかろうかと思う。

なお記事自体はすんなり一発でこれだけの長文を出してくれない。適宜書き直させたりツギハギしたりしている。以下は今回のチャット。

https://chat.openai.com/share/eb8b48d6-4b6a-4c84-87cb-9d6f7eac9ce1

JavaScript
JavaScript オプショナルチェーン
目次