TypeScriptでOptional Chaining（?.）とNullish Coalescing（??）を使う方法をやさしく解説
生徒
「TypeScriptのコードを見ていると、?.とか??という記号が出てきて、何をしているのか全然わかりません…」
先生
「それはOptional ChainingとNullish Coalescingという書き方ですね。どちらもエラーを防ぎ、プログラムを安全に書くための仕組みです。」
生徒
「エラーを防ぐってどういうことですか？パソコンを触ったことがなくても理解できますか？」
先生
「もちろんです。身近なたとえを使って、ひとつずつ丁寧に説明していきましょう。」
1. Optional Chaining（?.）とは何か？
Optional Chaining（オプショナルチェイニング）は、TypeScriptやJavaScript（ES6/ESNext）で使える書き方で、 「値が存在しないかもしれない場合でも、安全にプロパティへアクセスする方法」です。
プログラムでは、データが「存在しない」状態になることがあります。これを専門用語で null（ヌル）やundefined（アンディファインド）と呼びます。 nullは「中身が空」、undefinedは「そもそも用意されていない」という意味だと考えてください。
例えるなら、引き出しの中に物が入っているか分からない状態で、いきなり手を突っ込むと危ないですよね。 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（?.）の基本的な使い方
Optional Chainingでは、アクセスしたい場所の前に?.を付けます。
これにより、「もし存在していれば使う、なければ何もしない」という安全な動きになります。
console.log(user.address?.city);
この書き方なら、addressが存在しない場合でもエラーになりません。 結果はundefinedになり、プログラムはそのまま続行されます。
undefined
Optional Chainingは、初心者がつまずきやすい「エラーで止まる問題」を減らしてくれる、 とても重要なESNextの機能です。
4. Nullish Coalescing（??）とは何か？
Nullish Coalescing（ヌリッシュコアレッシング）は、 nullやundefinedだった場合に、代わりの値を使う仕組みです。
例えば、名前が登録されていない人に対して、
「名前未設定」と表示したい場合がありますよね。
そのようなときに使うのが??です。
5. Nullish Coalescing（??）の基本例
??は「左側がnullまたはundefinedなら、右側を使う」という意味です。
0や空文字は正常な値として扱われる点がポイントです。
const userName: string | null = null;
const displayName = userName ?? "名前未設定";
console.log(displayName);
名前未設定
このように、データが存在しない場合でも、 画面表示や処理を安定させることができます。
6. Optional ChainingとNullish Coalescingを組み合わせる
実際のTypeScript開発では、Optional ChainingとNullish Coalescingを 組み合わせて使うことがよくあります。 これにより、安全で読みやすいコードになります。
const cityName = user.address?.city ?? "不明";
console.log(cityName);
不明
このコードは、「住所があり、都市名があればそれを使う。 なければ『不明』と表示する」という意味になります。
7. 初心者が混乱しやすいポイント
初心者の方がよく混乱するのは、 「なぜif文でチェックしなくていいのか」という点です。 Optional ChainingとNullish Coalescingは、 その確認作業を短く、分かりやすく書くための仕組みです。
これらはTypeScriptとES6/ESNextの連携を理解するうえで重要な要素であり、 安全で壊れにくいプログラムを書くための基本知識になります。
