TypeScriptでOptional Chaining（?.）とNullish Coalescing（??）を使う方法をやさしく解説

1. Optional Chaining（?.）とは何か？

1. Optional Chaining（?.）とは何か？

Optional Chaining（オプショナルチェイニング）は、TypeScriptやJavaScript（ES6/ESNext）で使える書き方で、 「値が存在しないかもしれない場合でも、安全にプロパティへアクセスする方法」です。

プログラムでは、データが「存在しない」状態になることがあります。これを専門用語で null（ヌル）やundefined（アンディファインド）と呼びます。 nullは「中身が空」、undefinedは「そもそも用意されていない」という意味だと考えてください。

例えるなら、引き出しの中に物が入っているか分からない状態で、いきなり手を突っ込むと危ないですよね。 Optional Chainingは「中に物があるか確認しながら、そっと手を入れる」ようなイメージです。

2. Optional Chainingを使わない場合の問題点

2. Optional Chainingを使わない場合の問題点

Optional Chainingを使わない場合、存在しないデータにアクセスすると、 プログラムはエラーを起こして止まってしまいます。 エラーとは、パソコンが「それはできません」と作業を中断する状態のことです。

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

const user: User = { name: "太郎" };

// エラーが起きる可能性がある書き方
console.log(user.address.city);

この例では、addressが存在しない可能性があります。 それなのにcityを直接取り出そうとすると、「そんな情報はありません」とエラーになります。

3. Optional Chaining（?.）の基本的な使い方

3. Optional Chaining（?.）の基本的な使い方

Optional Chainingでは、アクセスしたい場所の前に?.を付けます。 これにより、「もし存在していれば使う、なければ何もしない」という安全な動きになります。

console.log(user.address?.city);

この書き方なら、addressが存在しない場合でもエラーになりません。 結果はundefinedになり、プログラムはそのまま続行されます。

undefined

Optional Chainingは、初心者がつまずきやすい「エラーで止まる問題」を減らしてくれる、 とても重要なESNextの機能です。

4. Nullish Coalescing（??）とは何か？

4. Nullish Coalescing（??）とは何か？

Nullish Coalescing（ヌリッシュコアレッシング）は、 nullやundefinedだった場合に、代わりの値を使う仕組みです。

例えば、名前が登録されていない人に対して、 「名前未設定」と表示したい場合がありますよね。 そのようなときに使うのが??です。

5. Nullish Coalescing（??）の基本例

5. Nullish Coalescing（??）の基本例

??は「左側がnullまたはundefinedなら、右側を使う」という意味です。 0や空文字は正常な値として扱われる点がポイントです。

const userName: string | null = null;

const displayName = userName ?? "名前未設定";

console.log(displayName);

名前未設定

このように、データが存在しない場合でも、 画面表示や処理を安定させることができます。

6. Optional ChainingとNullish Coalescingを組み合わせる

6. Optional ChainingとNullish Coalescingを組み合わせる

実際のTypeScript開発では、Optional ChainingとNullish Coalescingを 組み合わせて使うことがよくあります。 これにより、安全で読みやすいコードになります。

const cityName = user.address?.city ?? "不明";

console.log(cityName);

不明

このコードは、「住所があり、都市名があればそれを使う。 なければ『不明』と表示する」という意味になります。

7. 初心者が混乱しやすいポイント

7. 初心者が混乱しやすいポイント

初心者の方がよく混乱するのは、 「なぜif文でチェックしなくていいのか」という点です。 Optional ChainingとNullish Coalescingは、 その確認作業を短く、分かりやすく書くための仕組みです。

これらはTypeScriptとES6/ESNextの連携を理解するうえで重要な要素であり、 安全で壊れにくいプログラムを書くための基本知識になります。