31. オプショナルチェーン ?.

?. は、プロパティにアクセスする . の安全版です。user.nickname?.toUpperCase() のように書くと、手前の値が null か undefined のときはそこで処理が止まり、エラーにならず式全体が undefined になります。値があるときだけ、その先の処理が実行されます。

実務では、省略可能なプロパティやネストの深いデータを扱うときの定番です。「あれば使う、なければ undefined のまま」という処理を、if 文を重ねずに1行で書けます。a.b?.c?.d のようにつなげて、深い階層を安全にたどることもできます。

つまずきポイントは、結果が undefined になり得ることです。?. はエラーを防ぐだけで、値の存在を保証してはくれません。結果をそのまま画面に出すと undefined と表示されてしまうので、最終的に値が必要な場面では undefined だった場合の扱いを決めておきましょう。

▶ サンプルコードを実行してみよう(自由に書き換えてOK)

TypeScript

type Profile = {
  nickname?: string;
  contact?: { mail: string };
};

const taro: Profile = { nickname: "Tar-kun", contact: { mail: "taro@example.com" } };
const jiro: Profile = {};

// ?. は手前が null / undefined なら、そこで止まって undefined を返す
console.log(taro.nickname?.toUpperCase());
console.log(jiro.nickname?.toUpperCase()); // undefined(エラーにならない)

// ネストした参照も安全にたどれる
console.log(taro.contact?.mail);
console.log(jiro.contact?.mail); // undefined

サンプルコードで身につける(5本) →

学んだ概念を、素朴な例から実務寄りの例まで5つの具体例で確認します。

公式ドキュメントで詳しく ↗