Optional chaining の利用（安全なネスト参照） — a?.b()
JavaScript の オプショナルチェイニング演算子 ?. は「存在しないかもしれないプロパティや関数を安全に参照する」ための仕組みです。
初心者は「途中で null や undefined が出てもエラーにならず、代わりに undefined を返す」と覚えると理解しやすいです。
基本のコード例
プロパティ参照
const obj = { a: { b: 123 } };
console.log(obj?.a?.b); // → 123
const obj2 = {};
console.log(obj2?.a?.b); // → undefined （エラーにならない）
関数呼び出し
const obj = {
fn: () => "Hello"
};
console.log(obj.fn?.()); // → "Hello"
const obj2 = {};
console.log(obj2.fn?.()); // → undefined （関数がなければ呼ばない）
よく使うテンプレート集
ネストしたオブジェクトの安全アクセス
const user = { profile: { name: "Aki" } };
console.log(user?.profile?.name); // → "Aki"
console.log(user?.settings?.theme); // → undefined （安全に失敗）
配列の安全アクセス
const arr = [{ x: 1 }, { x: 2 }];
console.log(arr[0]?.x); // → 1
console.log(arr[2]?.x); // → undefined （存在しない要素でも安全）
関数呼び出しの安全アクセス
function greet() {
console.log("こんにちは！");
}
const obj = { fn: greet };
obj.fn?.(); // → "こんにちは！"
const obj2 = {};
obj2.fn?.(); // → undefined （関数がなければ呼ばない）
例題: APIレスポンスの安全アクセス
function printUser(data) {
console.log("名前:", data?.user?.name ?? "不明");
console.log("年齢:", data?.user?.age ?? "不明");
}
printUser({ user: { name: "Mika", age: 25 } });
// 名前: Mika
// 年齢: 25
printUser({});
// 名前: 不明
// 年齢: 不明
- 効果: ネストしたデータが欠けていても安全にアクセスできる。
- **
??（null合体演算子）と組み合わせると「デフォルト値」を設定できる。
実務でのコツ
- APIレスポンスや外部データに便利: 欠けているキーがあっても安全。
- 配列アクセスにも使える:
arr[5]?.propのように。 - 関数呼び出しにも使える:
obj.fn?.()。 undefinedが返ることを前提に設計する: その後??でデフォルト値を補うのが定番。
ありがちなハマりポイントと対策
- 古い環境では使えない: ES2020 以降の構文。古いブラウザでは Babel などのトランスパイルが必要。
nullとundefinedのみ判定: 値が0や""の場合は?.ではなく普通にアクセスされる。
練習問題（安全に配列の要素を取り出す）
const data = [
{ id: 1, info: { name: "Aki" } },
{ id: 2 }
];
console.log(data[0]?.info?.name); // → "Aki"
console.log(data[1]?.info?.name); // → undefined
console.log(data[2]?.info?.name ?? "データなし"); // → "データなし"
直感的な指針
?.= 「存在しなければ undefined を返す」安全なアクセス。- ネストしたオブジェクトや配列に便利。
- 関数呼び出しにも使える。
??と組み合わせて「デフォルト値」を設定するとさらに安全。
これを覚えれば「外部データや複雑なオブジェクトを安全に扱う」ことができ、エラーを減らせます。