❔

TypeScriptで学ぶオプショナルチェーン(?.)の使い方

に公開
JavaScript
React
TypeScript
tech

はじめに

JavaScript / TypeScriptを書いていると、
「オブジェクトの深いプロパティを参照したら undefined が返ってエラーになった」
という経験はありませんか？

そんなときに役立つのが オプショナルチェーン(Optional Chaining) です。

オプショナルチェーンとは？

オプショナルチェーン(?.)は、オブジェクトのプロパティを安全に参照するための構文です。

通常の書き方だと、存在しないプロパティを参照するとエラーになります。

type User = {
  name: string;
  address?: {
    city: string;
  };
};

const user: User = { name: "Taro" };

// addressがundefinedのためエラー
console.log(user.address.city); 
// → TypeError: Cannot read properties of undefined

これをオプショナルチェーンを使うと…

// addressがundefinedでも安全にアクセスできる
console.log(user.address?.city); 
// → undefined

基本的な使い方

プロパティ参照

const city = user.address?.city;

addressが存在すればcityを返し、存在しなければundefinedを返します。

関数呼び出し

関数やメソッドが存在しないかもしれない場合にも使えます。

type Config = {
  onClick?: () => void;
};

const config: Config = {};

// オプショナルチェーンで安全に呼び出せる
config.onClick?.();

配列アクセス

配列の要素が存在しない可能性があるときにも便利です。

const users = [{ name: "Taro" }, { name: "Hanako" }];

// インデックスが存在しない場合はundefined
console.log(users[2]?.name); // → undefined

オプショナルチェーンとnull合体演算子の組み合わせ

?? と組み合わせることで、デフォルト値を設定できます。

const city = user.address?.city ?? "未設定";
console.log(city); // → "未設定"

注意点

  • ?. は 左辺がnullまたはundefinedのときのみ評価を止める
  • 空文字や0は判定対象にならない
const obj = { value: 0 };

console.log(obj?.value); // → 0 (判定止まらない)

まとめ

  • ?. を使えば、undefined や null を気にせず安全にプロパティ参照できる
  • プロパティ参照・関数呼び出し・配列アクセスで使える
  • ?? と組み合わせればデフォルト値をスマートに書ける

Discussion