オプショナルチェイニング — ?.演算子による安全なアクセス

このトピックを終えると

?.演算子がなぜ必要で、どのように動作するのか、そして実務でどのような状況で使うのかを理解できます。

APIから取得したユーザーデータがあります。

javascript

const user = {
  name: "Alice",
  address: {
    city: "Seoul"
  }
};

console.log(user.address.city); // "Seoul"

しかし、一部のユーザーは住所を入力していません。

javascript

const user = { name: "Bob" };
console.log(user.address.city);
// TypeError: Cannot read properties of undefined

user.addressがundefinedであるため、.cityを読み込もうとするとエラーが発生します。これはJavaScriptで最も一般的な実行時エラーの一つです。

javascript

let city;
if (user && user.address && user.address.city) {
  city = user.address.city;
}

毎回中間段階を確認する必要があります。ネストが深くなるほどコードが長くなります。

javascript

const city = user?.address?.city;

?.は、左側の値がnullまたはundefinedの場合に、エラーを発生させずにundefinedを返します。

user?.address?.cityは、次のように読みます。

1行で安全なアクセスが可能になります。

メソッドの呼び出しにも使用できます。

javascript

const result = user.getProfile?.();

getProfileが存在すれば呼び出し、存在しなければundefinedを返します。括弧の前に?.を付けます。

配列のインデックスアクセスにも使用できます。

javascript

const first = users?.[0]?.name;

users配列が存在しない場合や、空の配列であってもエラーは発生しません。

?.とよく一緒に使われるのが、**nullish結合演算子??**です。

javascript

const city = user?.address?.city ?? "Unknown";

?.で安全にアクセスし、結果がnullまたはundefinedの場合、??の後のデフォルト値を設定します。||とは異なり、0や""（空文字列）を有効な値として扱います。

javascript

const count = data?.total ?? 0;   // totalが0の場合は0を維持
const count2 = data?.total || 0;  // totalが0の場合は0もfalsyなので0を返す（意図と異なる可能性がある）

?.が便利だからといって、すべての場所に付けるべきではありません。

javascript

// これは過剰です
const name = user?.name?.toString?.()?.trim?.();

user.nameが必ず存在する場合、?.を使用せずにアクセスする方が適切です。エラーが発生するのは、バグを見つけるためでもあります。

?.は、「この値が存在しない可能性がある」という意図をコードに伝えるものです。実際に存在しない可能性がある場所にのみ使用してください。

?.は、null/undefinedに遭遇すると、エラーの代わりにundefinedを返します。 構造が不確かなデータ（APIレスポンスなど）にアクセスする際に使用します。 ??と組み合わせることで、デフォルト値まできれいに処理できます。