TypeScriptのオプショナルチェーン(?.)の使い方｜安全なアクセスとメソッド実行のポイントを解説

2026年5月11日

演算子

TypeScriptを用いたモダンな開発において、実行時のエラーを未然に防ぐことは極めて重要な課題です。

特に、APIから取得したデータや複雑にネストされたオブジェクトを扱う際、予期しないnullやundefinedへのアクセスは、アプリケーションを停止させる致命的なエラーの原因となります。

このようなリスクを最小限に抑え、コードの記述を劇的に簡潔にする仕組みが、オプショナルチェーン (Optional Chaining) です。

2026年現在の開発現場でも、TypeScriptの型安全性を最大限に活かすための必須テクニックとして定着しています。

本記事では、オプショナルチェーンの基本的な仕組みから、メソッド実行や配列アクセスへの応用、さらに効率的なコーディングを行うためのポイントを詳しく紹介します。

目次 [ close ]

オプショナルチェーン (?.) とは何か

オプショナルチェーンは、オブジェクトのプロパティがnullまたはundefinedである可能性がある場合に、安全にそのプロパティへアクセスするための演算子です。

従来のJavaScriptや初期のTypeScriptでは、ネストされたプロパティにアクセスする際、各階層で値が存在するかを確認する必要がありました。

例えば、user.address.streetという値を取得したい場合、userが存在し、かつuser.addressが存在することを個別にチェックしなければなりません。

オプショナルチェーンを使用すると、この多段的なチェックを?.という短い記法で代替できます。

参照先の値が null または undefined である場合、式全体が即座に undefined を返して評価を停止します。

これにより、TypeError: Cannot read property 'street' of undefinedといったエラーの発生をエレガントに回避できるのです。

基本的なプロパティアクセスの書き換え

まずは、オプショナルチェーンを使わない従来の手法と、導入した後のコードを比較してみましょう。

従来の手法では、論理演算子の&&を利用して以下のように記述していました。

TypeScript

// 従来の手法（&&演算子を使用）
const streetName = user && user.address && user.address.street;

この書き方では、プロパティの階層が深くなればなるほど、同じ変数名を何度も繰り返す必要があり、可読性が低下します。

一方、オプショナルチェーンを利用すると、以下のように記述を簡略化できます。

TypeScript

// オプショナルチェーンを利用
const streetName = user?.address?.street;

この一行で、userが不在の場合、あるいはaddressが不在の場合の双方を安全に処理できます。

どちらかの値が欠けていれば、streetNameにはundefinedが代入されます。

このように、記述量を減らしつつ実行時の安全性を高められるのがオプショナルチェーンの最大のメリットです。

短絡評価（ショートサーキット）の仕組み

オプショナルチェーンの挙動を理解する上で重要なのが、「短絡評価」という概念です。

演算子?.が左側のオペランドでnullやundefinedを検出した瞬間、それ以降の右側のプロパティアクセスや関数実行は一切行われません。

TypeScript

let index = 0;
const obj = null;

// objがnullなので、index++ は実行されない
const result = obj?.[index++];

console.log(index);

実行結果

上記の例では、objがnullであるため、index++という副作用のある処理もスキップされます。

この仕組みにより、不要な計算や副作用を防ぎ、パフォーマンスや予測可能性の向上に寄与します。

メソッドの安全な実行

オプショナルチェーンは、プロパティへのアクセスだけでなく、メソッドの呼び出しにも適用可能です。

オブジェクトが特定のメソッドを持っているかどうかが不明な場合や、オプションとして定義されている関数を実行する際に非常に便利です。

TypeScript

interface User {
  id: string;
  displayNotification?: (message: string) => void;
}

const user: User = { id: "123" };

// メソッドが存在する場合のみ実行する
user.displayNotification?.("ログインしました");

もしuser.displayNotificationが定義されていなければ、この行は何もしないだけで、エラーを吐くことはありません。

これは、コールバック関数を受け取るコンポーネントを設計する際などに多用されるパターンです。

注意点として、?.()という記法は、「その名前のプロパティが存在し、かつ null/undefined でないこと」を確認するものであり、「それが関数であるかどうか」まで厳密にチェックするわけではありません。

ただし、TypeScriptの型定義が正しくなされていれば、コンパイル時点で関数以外の呼び出しは制限されるため、実務上の安全性は十分に確保されます。

配列やブラケット表記への応用

オプショナルチェーンは、ドット記法以外に、ブラケット記法[]を用いるアクセスでも利用できます。

これは、動的なプロパティ名を扱う場合や、配列の特定のインデックスにアクセスする場合に有効です。

TypeScript

const users: User[] | null = null;

// 配列がnullでなければ0番目の要素にアクセス
const firstUser = users?.[0];

配列そのものがnullである可能性がある場合、users[0]と記述すると即座にエラーとなりますが、?.[]を用いることで安全にアクセスを試みることができます。

また、APIレスポンスなどで辞書型のオブジェクト（Record型）を扱う際にも威力を発揮します。

TypeScript

const config: Record<string, string> | undefined = getSettings();

// keyが存在するか不明な設定値へのアクセス
const theme = config?.["theme-color"];

このように、あらゆるデータ構造に対して、「存在しない可能性」を前提とした安全なコードを記述できるようになります。

Null合体演算子 (??) との組み合わせ

オプショナルチェーンは、単体でも強力ですが、Null合体演算子 (??) と組み合わせることでさらに真価を発揮します。

オプショナルチェーンによって得られた結果がundefinedだった場合に、デフォルト値を設定したいケースは非常に多いからです。

TypeScript

// addressやcityがない場合は "Unknown City" を代入
const city = user?.address?.city ?? "Unknown City";

この組み合わせにより、「深い階層のデータアクセス」「存在チェック」「デフォルト値の適用」をわずか一行で完結させることができます。

以前のような多重のif文や三項演算子による分岐は不要となり、コードの意図が明確になります。

OR演算子 (||) との違いに注意

デフォルト値を設定する際、||（OR演算子）を使いたくなる場面もありますが、注意が必要です。

||は「Falsyな値」（空文字 ""、数値 0、false など）すべてに対して右辺の値を返します。

一方、??は null または undefined の場合にのみ右辺を返します。

TypeScript

const userCount = userSettings?.maxUsers || 10; // maxUsersが0だと10になってしまう
const userCountFixed = userSettings?.maxUsers ?? 10; // maxUsersが0なら0が保持される

意図しない挙動を防ぐため、オプショナルチェーンとの併用には、基本的にNull合体演算子 (??) を優先して使用することが推奨されます。

TypeScriptにおける型推論とメリット

TypeScriptにおいてオプショナルチェーンを使用すると、コンパイラは戻り値の型を自動的に推論します。

例えば、あるプロパティの型がstringであっても、オプショナルチェーンを通した後の型は自動的にstring | undefinedとなります。

TypeScript

interface Profile {
  nickname: string;
}
interface Data {
  profile?: Profile;
}

const data: Data = {};
const name = data.profile?.nickname; // 型は string | undefined と推論される

この挙動により、プログラマーは「この変数がundefinedである可能性」を常に型システムから警告されることになります。

その結果、後続の処理でnameを扱う際にも適切なチェックを強制され、プログラム全体の堅牢性が向上します。

実務での活用シーンとベストプラクティス

オプショナルチェーンは非常に便利ですが、乱用は禁物です。

どのような場面で使い、どのような場面で避けるべきか、ベストプラクティスを確認しましょう。

1. 外部APIからのレスポンス処理

APIから返却されるデータは、特定のフィールドが欠落していることがしばしばあります。

特にGraphQLのような柔軟なクエリを扱う場合、レスポンスの形状が動的に変わるため、オプショナルチェーンによる保護は必須と言えます。

2. DOM操作の安全な実行

ブラウザ環境では、特定のIDを持つ要素が存在しない可能性があります。

TypeScript

const element = document.getElementById("submit-button");
element?.classList.add("active");

要素が取得できなかった場合にエラーでスクリプトが止まるのを防ぎます。

3. 過剰な使用を避ける（Fail-fastの原則）

すべてのプロパティアクセスに?.を付けてしまうと、「本来存在するはずの値」が存在しないというバグを見逃してしまう恐れがあります。

「この値は絶対に存在するはずだ」という設計上の確信がある場所では、あえてオプショナルチェーンを使わず、エラーを発生させて問題を早期に発見する（Fail-fast）という考え方も重要です。

なんでもかんでもundefinedで丸め込んでしまうと、デバッグが困難になる可能性があることを覚えておきましょう。

オプショナルチェーンの比較まとめ

各シチュエーションにおける、オプショナルチェーンの適用可否とメリットを下表にまとめました。

機能	構文	主なメリット
プロパティアクセス	`obj?.prop`	ネストされたオブジェクトの実行時エラーを防止する。
ブラケットアクセス	`obj?.[key]`	動的なプロパティ名や配列要素へのアクセスを安全にする。
メソッド実行	`obj.method?.()`	関数が存在しない場合の例外を回避し、条件付き実行を簡潔にする。
デフォルト値設定	`obj?.prop ?? "def"`	値が存在しない場合の代替処理までを簡潔に記述できる。