TypeScriptのOptional Chaining（オプショナル・チェイニング）について

optional Chaining（オプショナル・チェイニング）

Optional Chainingは、TypeScript 3.7やES2020 (ES11) で導入された機能であり、オブジェクトのネストされたプロパティに安全にアクセスする方法を提供します。

特に、オブジェクトのプロパティやメソッドが存在するかどうかを確認せずに直接アクセスしようとすると、エラーが発生する場合があります。Optional Chainingを使用すると、そのようなエラーを回避しながら簡潔にコードを書くことができます。

基本的な使用方法

const user = {
    info: {
        name: 'Alice',
        details: {
            age: 25
        }
    }
};

// 通常の方法でageにアクセス
const age1 = user && user.info && user.info.details && user.info.details.age;

// Optional Chainingを使用してageにアクセス
const age2 = user?.info?.details?.age;

上記の例では、age2 にアクセスする際に ?. 演算子を使用しています。これにより、各プロパティが存在する場合にのみアクセスし、存在しない場合は直ちに undefined を返します。

配列や関数の呼び出しでの使用

Optional Chainingは、配列の要素や関数/メソッドの呼び出しにも使用できます。

const users = [{
    name: 'Bob',
    getAge: () => 30
}];

// 配列の要素に安全にアクセス
const userName = users[1]?.name; // undefined, 2番目の要素は存在しない

// メソッドの呼び出しに使用
const userAge = users[0]?.getAge?.(); // 30

注意点

Optional Chainingを過度に使用すると、コードが読みにくくなる場合があります。
Optional Chainingはnullやundefinedの場合に短絡しますが、空文字、0、falseなどの"falsy"な値で短絡するわけではありません。

まとめ

Optional Chainingは、ネストされたプロパティやメソッドに安全にアクセスするための強力なツールです。存在しないプロパティやメソッドにアクセスしようとした際のエラーを簡潔な記述で回避することができます。