JavaScriptの「?.（オプショナルチェーニング）」とは？意味と使い方をサンプルコードで解説

JavaScriptのコードでときどき見かける奇妙な構文「?.」。これはオプショナルチェーニング（Optional Chaining）と呼ばれる機能で、ES2020から正式に導入されました。本記事では、具体例を使いながらその意味と使い方をわかりやすく解説します。

「?.」を例で理解しよう

まずは、23歳の男性を表す次のようなオブジェクトを考えてみましょう。

const being = {
    human: {
        male: {
            age: 23
        }
    }
};

この being オブジェクトから age プロパティにアクセスしたい場合、通常はドット記法によるチェーンで次のように書きますね。

例

const being = {
    human: {
        male: {
            age: 23
        }
    }
};
console.log(being.human.male.age);

出力結果

23

ここまでは問題ありません。しかし、何らかの技術的な理由で male プロパティを female や別の名前に変更した場合はどうなるでしょうか。

この場合、先ほどのチェーン構文は TypeError をスローします。「Cannot read properties of undefined（undefined のプロパティを読み取れません）」といったエラーメッセージが表示され、そこで処理が止まってしまうのです。

オプショナルチェーニングが解決してくれる

「途中のプロパティが存在しないかもしれないのに、エラーを出さず安全にアクセスしたい」——そんなときこそ「?.」の出番です。

オプショナルチェーニングの動作は非常にシンプルです。

• 通常の状況では：普通のチェーンとまったく同じように振る舞います。
• null または undefined に遭遇したとき：エラーを投げる代わりに、その時点でチェーンを中断し、undefined を返します。

これにより、たとえ参照先のデータ構造が変わっても、残りのコードは正常に動作し続けます。

実際のコードで確認する

先ほどの例を、オプショナルチェーニングを使って書き直してみましょう。

例

const being = {
    human: {
        male: {
            age: 23
        }
    }
};
console.log(being?.human?.female?.age);

出力結果

female プロパティは存在しないため、エラーをスローする代わりに出力は次のようになります。

undefined

まとめ

「?.」は、ネストされたオブジェクトのプロパティへ安全にアクセスするための強力な構文です。APIレスポンスや設定オブジェクトなど、「プロパティが存在するか保証できない」場面で特に役立ちます。従来なら if 文や && 演算子で逐一存在チェックをしていたコードが、1つの記号で簡潔に書けるようになるため、ぜひ活用してみてください。