オプショナルチェイニング
オプショナルチェイニングは、JavaScriptで**?. 演算子を使用してnullまたはundefinedを安全に処理する方法**です。この演算子を使用すると、オブジェクトまたは配列の深いプロパティにアクセスするときに、該当するプロパティが存在しない場合にエラーを発生させずにundefinedを返すことができます。
基本的な文法
オプショナルチェイニング演算子 ?. は、オブジェクトの属性、配列の要素、または関数の呼び出しが null または undefined の場合でも、エラーなしで undefined を返すようにします。
例 1: オブジェクト属性へのアクセス
javascript
const user = {
profile: {
name: 'Alice',
age: 25,
},
};
// オプショナルチェイニングを使用しない場合
console.log(user.profile.name); // 'Alice'
console.log(user.profile.address); // TypeError: Cannot read property 'address' of undefined
// オプショナルチェイニングを使用する場合
console.log(user.profile?.name); // 'Alice'
console.log(user.profile?.address); // undefined
例 2: 配列要素へのアクセス
配列要素にアクセスするときにもオプショナルチェイニングを使用できます。
javascript
const arr = [1, 2, 3];
// 配列の有効なインデックス
console.log(arr[1]); // 2
// 配列の有効でないインデックス
console.log(arr[10]); // undefined
// オプショナルチェイニングを使用する場合
console.log(arr?.[1]); // 2
console.log(arr?.[10]); // undefined
例 3: 関数呼び出し
オプショナルチェイニングを使用すると、関数が定義されていない場合にもエラーを回避できます。
javascript
const obj = {
greet: () => 'Hello!',
};
// 関数が存在する場合
console.log(obj.greet?.()); // 'Hello!'
// 関数が存在しない場合
const anotherObj = {};
console.log(anotherObj.greet?.()); // undefined
オプショナルチェイニングを使用する場合
オプショナルチェイニングは、コードで不要な条件文を減らし、よりきれいな安全なコードの作成を支援します。特に、深いネストされたオブジェクトでプロパティが存在しないまたは null/undefined の場合にエラーを防止できます。これにより、デバッグを容易にし、コードの可読性を高めることができます。
3. オプショナルチェイニングの使用例
例 1: ネストされたオブジェクトから安全にプロパティにアクセス
javascript
const user = {
profile: {
contact: {
email: 'alice@example.com',
},
},
};
// オプショナルチェイニングを使用しない場合
console.log(user.profile.contact.email); // 'alice@example.com'
console.log(user.profile.address.street); // TypeError: Cannot read property 'street' of undefined
// オプショナルチェイニングを使用する場合
console.log(user.profile?.contact?.email); // 'alice@example.com'
console.log(user.profile?.address?.street); // undefined
例 2: API 応答処理
API 応答データでプロパティが存在するかどうかを確認する場合に便利です。
javascript
const apiResponse = {
data: {
user: {
name: 'Alice',
age: 30,
},
},
};
// オプショナルチェイニングを使用しない場合
console.log(apiResponse.data.user.name); // 'Alice'
console.log(apiResponse.data.profile.address); // TypeError: Cannot read property 'address' of undefined
// オプショナルチェイニングを使用する場合
console.log(apiResponse.data?.user?.name); // 'Alice'
console.log(apiResponse.data?.profile?.address); // undefined
例 3: 関数呼び出しチェイニング
動的に関数呼び出しが可能な場合にオプショナルチェイニングを使用できます。
javascript
const obj = {
func: () => 'Hello, world!',
};
// オプショナルチェイニングを使用しない場合
console.log(obj.func()); // 'Hello, world!'
console.log(obj.nonExistentFunc()); // TypeError: obj.nonExistentFunc is not a function
// オプショナルチェイニングを使用する場合
console.log(obj.func?.()); // 'Hello, world!'
console.log(obj.nonExistentFunc?.()); // undefined