?.と??の組み合わせ
オプショナルチェーンと適切なデフォルト値を組み合わせます。
「?.と??の組み合わせ」はCoddyKit上の無料TypeScript Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはTypeScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 TypeScript Academyコースには全4レッスンが含まれています。
相性のよい組み合わせ
オプショナルチェーンと Null 合体演算子は、組み合わせて使えるように設計されています。obj?.value ?? fallbackというパターンを使うと、ネストした値を安全に読み取り、値がない場合はデフォルト値を指定できます。これは現代の TypeScript で最も便利なイディオムの1つです。
type User = { profile?: { name?: string } };
const u: User = {};
const name = u.profile?.name ?? 'Anonymous';
console.log(name);パターンの仕組み
まず?.がチェーンを評価し、値またはundefinedを返します。次に??がその結果を確認し、null またはundefinedであればフォールバック値を使います。2つの演算子で、すっきりした1つの式になります。
type Cfg = { server?: { port?: number } };
const cfg: Cfg = { server: {} };
const port = cfg.server?.port ?? 8080;
console.log(port);結果の型
チェーンの結果はT | undefinedになります。??によってundefinedが取り除かれ、フォールバック値の型がユニオンに加わります。フォールバック値の型が一致していれば、最終的な型は単にTとなり、処理すべきundefinedは残りません。
type Cfg = { timeout?: number };
const cfg: Cfg = {};
const timeout: number = cfg.timeout ?? 30;
console.log(timeout + 5); // number, safe arithmetic有効な falsy 値を保持する
??は null またはundefinedの場合にだけ動作するため、チェーンを通じて取得した正当な0はそのまま保持されます。フォールバック値が使われるのは、プロパティが本当に存在しない場合だけです。
type Audio = { settings?: { volume?: number } };
const a: Audio = { settings: { volume: 0 } };
console.log(a.settings?.volume ?? 50); // 0, not 50深くネストした設定へのアクセス
深くネストした設定にアクセスする場合は、複数の?.をチェーンし、最後に1つの??を置きます。途中のどこかが存在しなくても、デフォルト値へ適切にフォールバックできます。
type Cfg = { db?: { pool?: { max?: number } } };
const cfg: Cfg = { db: {} };
const maxPool = cfg.db?.pool?.max ?? 10;
console.log(maxPool);API レスポンスのデフォルト値
API レスポンスでは、オプショナルなフィールドが省略されることがよくあります。この組み合わせたパターンを使えば、それらを安全に読み取り、適切なデフォルト値を設定できます。その結果、後続のコードをシンプルに保ち、クラッシュを防げます。
type Res = { data?: { items?: string[] } };
const res: Res = { data: {} };
const items = res.data?.items ?? [];
console.log('Item count:', items.length);メソッドの結果と組み合わせる
関数やメソッドの呼び出し結果に対してチェーンし、その結果にデフォルト値を設定することもできます。呼び出し結果が null またはundefinedなら、フォールバック値が使われます。
type Store = { find?: () => string | undefined };
const store: Store = { find: () => undefined };
const result = store.find?.() ?? 'default';
console.log(result);冗長なガードを避ける
これらの演算子がなければ、複数行の null チェックを書くことになります。この組み合わせたイディオムなら、コード全体を1つの式に置き換えられるため、安全性を保ちながら読みやすさを向上できます。
type User = { name?: string };
const u: User = {};
// Old: let n; if (u && u.name) n = u.name; else n = 'Guest';
const n = u?.name ?? 'Guest';
console.log(n);別の検索へフォールバックする
??の後ろに置くフォールバック値自体を、別のチェーンによる検索にすることもできます。これにより、最後にリテラルのデフォルト値を使う前に、別の情報源を試せます。
type Prefs = { theme?: string };
const userPrefs: Prefs = {};
const sitePrefs: Prefs = { theme: 'light' };
const theme = userPrefs?.theme ?? sitePrefs?.theme ?? 'dark';
console.log(theme);要素アクセスと組み合わせる
このパターンは配列要素へのアクセスにも使えます。?.[i]を通じて要素を読み取り、??でデフォルト値を指定できます。
type Data = { tags?: string[] };
const d: Data = { tags: [] };
const first = d.tags?.[0] ?? 'none';
console.log(first);実用的な設定リーダー
すべてを組み合わせると、オプショナルな階層を安全にたどり、利用可能な値を必ず返す設定リーダーを作れます。これは実務の TypeScript で頻繁に使う書き方です。
type Settings = { ui?: { lang?: string } };
function getLang(s: Settings): string {
return s.ui?.lang ?? 'en';
}
console.log(getLang({ ui: { lang: 'tr' } }), getLang({}));理解度チェック
?. と ?? の組み合わせについて、理解度を確認しましょう。
まとめ: ?. と ?? の組み合わせ
obj?.value ?? fallbackというイディオムを学びました。
?.はチェーンを安全にたどり、値またはundefinedを返します。??は、結果が null またはundefinedの場合にだけデフォルト値を指定します。- 最終的な型から
undefinedが取り除かれ、多くの場合はシンプルなTになります。 0のような有効な falsy 値は保持されます。
次は、オプショナルな呼び出しとオプショナルな要素アクセスです。
type Cfg = { limit?: number };
const c: Cfg = {};
const limit = c?.limit ?? 100;
console.log(limit);よくある質問
「?.と??の組み合わせ」レッスンは無料ですか？
はい。「?.と??の組み合わせ」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、TypeScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 TypeScript Academyコースには全4レッスンが含まれています。
「?.と??の組み合わせ」で何を学びますか？
オプショナルチェーンと適切なデフォルト値を組み合わせます。 ブラウザで直接実行するハンズオンコードでTypeScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
TypeScript Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのTypeScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。
「?.と??の組み合わせ」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このTypeScript Academyレッスンでコードを書いて実行できますか？
はい。すべてのTypeScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- ?.によるオプショナルチェーン
- ??によるNull合体
- ?.と??の組み合わせ
- オプショナルな呼び出しと要素アクセス