オプショナルチェーンとは
JavaScriptのオプショナルチェーンは、オブジェクトや配列などのプロパティにアクセスする時に、存在しないプロパティに対してもエラーを発生させずに値を取得することができる機能です。
通常、JavaScriptでは、オブジェクトの存在しないプロパティにアクセスすると、エラーが発生してしまいます。
const user = {
name: 'taro',
age: 20
};
console.log(user.address.city);
// Uncaught TypeError: Cannot read properties of undefined (reading 'city')上記例では、userオブジェクトの存在しないプロパティaddressにアクセスしようとしているため、エラーになっています。
このようなエラーを回避するために、オプショナルチェーンを利用します。
オプショナルチェーンの使い方
JavaScriptのオプショナルチェーンは、プロパティ名の後に「?」の記号を使って記述します。
const user = {
name: 'taro',
age: 20
};
console.log(user?.address?.city);
// undefinedこのように、userオブジェクトの存在しないプロパティaddressにアクセスしようとしていますが、オプショナルチェーンを利用しているため、エラーではなくundefinedをコンソールに出力します。
オプショナルチェーンの使用例
それでは、JavaScriptのオプショナルチェーンを実際に使った例を見てみましょう。
APIからデータを取得する
APIからデータを取得する時に、必要なデータが存在しない場合にエラーを回避するためにオプショナルチェーンを活用することができます。
const data = fetch("https://example.com/data").json();
console.log(data.name);例えば、上記のようなコードでAPIからデータを取得して表示する場合を考えてみましょう。
この場合では、fetchで取得したdataオブジェクトにnameプロパティが存在しない時にエラーが発生してしまいます。
これを回避するために、オプショナルチェーンを使用することができます。
const data = fetch("https://example.com/data").json();
console.log(data?.name);こうすることで、dataオブジェクトにnameプロパティが存在しない場合でも、エラーを回避して安全にアクセスすることができます。
オブジェクトの動的なプロパティへアクセスする
オブジェクトのプロパティにアクセスする際に、プロパティ名が動的に変化する場合に、オプショナルチェーンを使用することができます。
const property = 'name';
const user = {
name: 'taro',
age: 20
};
console.log(user[property]);
// taro上記の例では、変数propertyに格納された値に応じてuserオブジェクトのプロパティにアクセスしています。
しかし、userオブジェクトに変数propertyに格納された名前のプロパティが存在しない場合、エラーが発生してしまいます。
const property = 'height';
const user = {
name: 'taro',
age: 20
};
console.log(user[property]);
// Uncaught TypeError: Cannot read properties ~~この問題を解決するために、JavaScriptのオプショナルチェーンを利用することができます。
const property = 'height';
const user = {
name: 'taro',
age: 20
};
console.log(user?.[property]);
// undefinedこうすることにより、userオブジェクトに変数propertyに格納された名前のプロパティが存在しない場合でもエラーを発生させずに、安全にアクセスすることができます。
まとめ
オプショナルチェーン(?.)は、JavaScriptでオブジェクトや配列のプロパティに安全にアクセスするための機能です。
この機能を利用することで、プログラムがエラーを起こすことなく、オブジェクトや配列のプロパティの値を取得したり、関数を呼び出したりできます。
オプショナルチェーンは、JavaScriptのコーディングにおいて非常に便利な機能ですので、ぜひ活用してみてください。
コメント