導入
フロントエンド開発において、APIから取得したレスポンスや、ネストされたオブジェクトのプロパティにアクセスする際、「Cannot read property ‘x’ of undefined」というエラーに頭を悩ませた経験はないでしょうか。特に非同期処理の結果を扱う際、データが空である可能性を考慮した条件分岐はコードを冗長にしがちです。本記事で解説する「Optional chaining (?.)」は、これらの課題をスマートに解決し、より堅牢で読みやすいコードを書くための必須テクニックです。
基礎知識
Optional chaining（オプショナルチェーン）とは、ECMAScript 2020（ES11）で導入された構文です。これを使用すると、参照が null または undefined である可能性がある場合でも、エラーを発生させることなく、連鎖的にプロパティへアクセスできます。
従来の書き方では、値が存在するかどうかを `if (data && data.user && data.user.name)` のように何度も論理積（&&）で確認する必要がありましたが、これを使うことで簡潔な記述が可能になります。
実装/解決策
Optional chaining は、対象が null や undefined の場合に、その先の評価を中断し、式全体として undefined を返します。以下の3つのパターンを覚えておきましょう。
1. プロパティへのアクセス: obj?.prop
2. 配列の要素アクセス: arr?.[index]
3. 関数の呼び出し: func?.()
これにより、サーバーから返ってくるデータ構造が不確定な場合でも、安全に値を取得できます。
サンプルプログラム
以下のコードは、ユーザー情報の取得を想定した実用的なサンプルです。コピー＆ペーストしてブラウザのコンソールなどで動作を確認してください。
// ユーザーデータのサンプル（一部情報が欠落しているケースを想定）
const userData = {
id: 1,
profile: {
name: “田中 太郎”,
// address が存在しないケース
}
};
// 1. プロパティへのアクセス
// ? を使うことで、address が undefined でもエラーにならず undefined が返る
const city = userData?.profile?.address?.city;
console.log(city); // 結果: undefined
// 2. 配列へのアクセス
const tags = userData?.profile?.tags?.[0];
console.log(tags); // 結果: undefined
// 3. 関数の呼び出し
// メソッドが存在する場合のみ実行する（存在しない場合は undefined を返す）
const result = userData?.getHistory?.();
console.log(result); // 結果: undefined
// 応用：デフォルト値と組み合わせる（Nullish coalescing演算子との併用）
const cityName = userData?.profile?.address?.city ?? “未登録”;
console.log(cityName); // 結果: “未登録”
応用・注意点
実務で利用する際に気をつけるべきポイントが2点あります。
1. Nullish coalescing (??) との併用
Optional chaining は単体で使うと undefined を返しますが、画面に表示する際はデフォルト値を設定したいケースが多いはずです。その場合、?? 演算子を組み合わせることで、「値がなければデフォルト値」という処理を一行で記述できます。
2. 誤用によるバグの回避
Optional chaining は「値が存在しないこと」を許容するため、本来はデータが存在すべき場所でエラーを握りつぶしてしまう可能性があります。デバッグが難しくなることもあるため、バリデーションが必要な箇所では安易に多用せず、適切な型定義（TypeScriptなど）と組み合わせて使用することをおすすめします。
これらを活用し、安全でクリーンなフロントエンドコードを実装していきましょう。