?.によるオプショナルチェーン
nullの可能性がある深くネストされたプロパティに安全にアクセスします。
「?.によるオプショナルチェーン」はCoddyKit上の無料TypeScript Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはTypeScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 TypeScript Academyコースには全4レッスンが含まれています。
オプショナルチェーン演算子
オプショナルチェーン（?.）を使うと、null または undefined の可能性がある値から、安全にプロパティへアクセスできます。値がnullishの場合、例外をスローする代わりに式全体が短絡評価され、undefined になります。
type User = { profile?: { bio?: string } };
const u: User = {};
const bio = u.profile?.bio;
console.log(bio); // undefined, no crashnullish値での短絡評価
?. の前にあるオペランドが null または undefined の場合、評価は直ちに停止し、undefined を返します。チェーンの残りの部分は実行されません。
const data: { value?: number } | null = null;
console.log(data?.value); // undefined, did not throw複数の階層をチェーンする
深い階層にアクセスするときは、不確かな各段階に ?. を置けます。チェーン内のいずれかの要素がnullishになるとチェーン全体が短絡評価されるため、「undefinedのプロパティを読み取れない」というエラーを防げます。
type Company = { ceo?: { contact?: { email?: string } } };
const c: Company = { ceo: {} };
console.log(c.ceo?.contact?.email); // undefined結果の型にはundefinedが含まれる
チェーンの結果が undefined になる可能性があるため、TypeScriptは結果の型に undefined を追加します。プロパティの型が string だった場合、チェーンの結果は string | undefined になります。
type Settings = { theme?: { name: string } };
const s: Settings = { theme: { name: 'dark' } };
const name = s.theme?.name; // type: string | undefined
console.log(name);undefinedの結果を処理する
結果が undefined になる可能性があるため、通常はチェックするか、代替値を指定します。型システムが、値が存在しないケースを処理するよう促してくれます。
type Settings = { theme?: { name: string } };
const s: Settings = {};
const name = s.theme?.name;
if (name === undefined) console.log('using default');
else console.log(name);&&チェーンとの比較
?. が登場する前は、開発者は長い && チェーンを書いていました。たとえば a && a.b && a.b.c のような形です。オプショナルチェーンなら同じ意図をはるかに簡潔に表現でき、上から下へ読みやすくなります。
type A = { b?: { c?: number } };
const a: A = { b: { c: 5 } };
const oldWay = a && a.b && a.b.c;
const newWay = a?.b?.c;
console.log(oldWay, newWay);?.が&&より優れている理由
&& を使う方法では、0、''、false など、あらゆるfalsy値を停止条件として扱います。これはバグの原因になることがあります。オプショナルチェーンは null または undefined の場合にのみ停止するため、通常はこちらが望ましい動作です。
type Box = { count?: number };
const b: Box = { count: 0 };
console.log(b && b.count); // 0... but && stops on falsy in longer chains
console.log(b?.count); // 0, cleanlyオブジェクト配列でのオプショナルチェーン
オプショナルチェーンは、どのようなプロパティアクセスにも使用できます。要素アクセスと組み合わせれば、ネストしたオブジェクト配列の内部にも安全にアクセスできます。
type Team = { members?: Array<{ name: string }> };
const t: Team = { members: [{ name: 'Ada' }] };
console.log(t.members?.[0]?.name);短絡評価は式全体を停止する
チェーンが短絡評価されると、その後に ?. なしで書かれたプロパティアクセスもスキップされます。式全体が一度に undefined と評価されます。
type Deep = { a?: { b: { c: number } } };
const d: Deep = {};
// a is undefined, so b.c is never evaluated
console.log(d.a?.b.c); // undefined関数の戻り値でオプショナルチェーンを使う
関数呼び出しの結果に対してチェーンを続けることもできます。関数がnullishな値を返した場合、後続のアクセスは安全に短絡評価されます。
function findUser(): { name: string } | null {
return null;
}
console.log(findUser()?.name); // undefined実践的な設定例
オプショナルチェーンは、ネストしたフィールドが存在しない可能性のある部分的な設定やAPIレスポンスを読み取るときに特に役立ちます。アクセス処理を読みやすく保ちながら、クラッシュを防げます。
type Response = { user?: { address?: { city?: string } } };
const res: Response = { user: { address: {} } };
console.log(res.user?.address?.city ?? 'unknown city');理解度チェック
オプショナルチェーンについての理解度を確認しましょう。
復習：オプショナルチェーン
?. について次のことを学びました。
nullまたはundefinedの可能性がある値のプロパティに安全にアクセスします。- nullishな要素があると、式全体を
undefinedに短絡評価します。 - 結果の型に
undefinedを追加します。 - すべてのfalsy値ではなくnullishな値の場合にのみ停止するため、
&&チェーンよりも扱いやすくなります。
次は、Null合体演算子です。
type Cfg = { db?: { host?: string } };
const c: Cfg = {};
console.log(c.db?.host);よくある質問
「?.によるオプショナルチェーン」レッスンは無料ですか？
はい。「?.によるオプショナルチェーン」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、TypeScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 TypeScript Academyコースには全4レッスンが含まれています。
「?.によるオプショナルチェーン」で何を学びますか？
nullの可能性がある深くネストされたプロパティに安全にアクセスします。 ブラウザで直接実行するハンズオンコードでTypeScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
TypeScript Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのTypeScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。
「?.によるオプショナルチェーン」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このTypeScript Academyレッスンでコードを書いて実行できますか？
はい。すべてのTypeScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- ?.によるオプショナルチェーン
- ??によるNull合体
- ?.と??の組み合わせ
- オプショナルな呼び出しと要素アクセス