?. と ?? を組み合わせる
安全なアクセスと適切なデフォルト値を組み合わせます。
「?. と ?? を組み合わせる」はCoddyKit上の無料JavaScript Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはJavaScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 JavaScript Academyコースには全4レッスンが含まれています。
2つのツールを組み合わせる
オプショナルチェーン ?. は存在しない可能性のある値を安全に読み取り、Null合体 ?? はデフォルト値を設定します。組み合わせることで、深い階層のデータを読み取り、適切に代替値へ切り替えられます。
const user = {};
console.log(user.profile?.name ?? "Anonymous");よく使うパターン
a?.b ?? fallback というイディオムを使うと、安全に読み取り、結果が nullish の場合はデフォルト値を設定できます。冗長なガード処理を置き換えられます。
const data = { settings: { theme: "dark" } };
const theme = data.settings?.theme ?? "light";
console.log(theme); // "dark"存在しない場合の代替値
途中のいずれかの要素が nullish の場合、?. は undefined を返し、それを ?? がデフォルト値に置き換えます。
const data = {};
const theme = data.settings?.theme ?? "light";
console.log(theme); // "light"深い階層への対応
このパターンは深くネストされた構造にも適用でき、最後に1つの代替値を指定できます。
const res = { data: { user: { city: "Berlin" } } };
const city = res.data?.user?.city ?? "Unknown";
console.log(city); // "Berlin"有効な falsy 値を保持する
?? は nullish の場合にだけデフォルト値を設定するため、チェーンから返された実際の 0 は保持されます。
const cart = { items: [], count: 0 };
const count = cart?.count ?? 5;
console.log(count); // 0&& / || の落とし穴との比較
a && a.b || fallback と書くと、正当な 0 や "" まで誤って置き換えてしまいます。?. と ?? の組み合わせなら、この問題を避けられます。
const cfg = { volume: 0 };
console.log(cfg && cfg.volume || 50); // 50, wrong
console.log(cfg?.volume ?? 50); // 0, correct関数の結果に使う
オプショナルな関数呼び出しの結果にもデフォルト値を設定できます。両方の演算子をメソッド呼び出しの前後で組み合わせます。
const api = { fetchName: () => null };
const name = api.fetchName?.() ?? "default";
console.log(name); // "default"配列アクセスにデフォルト値を設定する
このパターンは、配列や動的なキーに対するブラケット記法にも使えます。
const state = { list: ["a"] };
const first = state.list?.[0] ?? "empty";
console.log(first); // "a"表示用文字列を組み立てる
実用的な使い方の1つは、不確かなデータから安全に表示用のテキストを生成することです。
function label(order) {
return "Total: " + (order?.total ?? 0);
}
console.log(label(undefined)); // "Total: 0"優先順位に関する注意
?. は ?? よりも強く結合するため、a?.b ?? c は (a?.b) ?? c として解釈されます。これはまさに意図した動作です。
const u = { age: null };
console.log(u?.age ?? 18); // 18すっきりしたイディオム
これらの演算子を組み合わせると、長い防御的なコードを読みやすい1行に置き換えられ、意図も明確になります。
const profile = null;
console.log(profile?.bio?.length ?? 0); // 0確認問題
出力を予測してみましょう。
まとめ
obj?.deep?.prop ?? fallback というイディオムは、存在しない可能性のあるネストされた値を読み取り、結果が null または undefined の場合にだけデフォルト値を設定します。&&/|| を使う方法とは異なり、0 や "" などの有効な falsy 値を保持します。?. は ?? より強く結合するため、グループ化も自然に正しくなります。
よくある質問
「?. と ?? を組み合わせる」レッスンは無料ですか？
はい。「?. と ?? を組み合わせる」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、JavaScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 JavaScript Academyコースには全4レッスンが含まれています。
「?. と ?? を組み合わせる」で何を学びますか？
安全なアクセスと適切なデフォルト値を組み合わせます。 ブラウザで直接実行するハンズオンコードでJavaScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
JavaScript Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのJavaScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。
「?. と ?? を組み合わせる」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このJavaScript Academyレッスンでコードを書いて実行できますか？
はい。すべてのJavaScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- ?. 演算子によるオプショナルチェーン
- ?? による null 合体
- ?. と ?? を組み合わせる
- オプショナルな呼び出しとインデックスアクセス