「オプショナルチェーン」
～マンガでプログラミング用語解説

マンガで分かるプログラミング用語辞典（233）

解説

　「オプショナルチェーン」、オプショナルチェイニング、Null条件演算子は、オブジェクトのプロパティ（メンバー）を、確認の条件分岐なしで読める記法です。

　「名前A?.名前B」と書くことで、名前Aがオブジェクトなら「名前A.名前B」の記法と同じように処理を継続して、名前Aがnullなら、そこで処理を打ち切り、nullを返します。

　名前Aで処理を打ち切る条件や、打ち切った場合の値は、プログラミング言語によって異なります。たとえばJavaScriptなら、nullish（null または undefined）の場合にundefinedを返します。C#では、nullの場合にnullを返します。

　オプショナルチェーンを利用することで、深く連なったオブジェクトの各プロパティ（メンバー）が、オブジェクトかnullかをif文などで確認する必要がなくなります。そのため短いコードで、プログラムを書くことが可能になります。

サンプル

　「オプショナルチェーン」のサンプルです。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>「オプショナルチェーン」のサンプル</title>
    <style> #output { font-size: 32px; line-height: 1.5; } </style>
  </head>
  <body>
    <pre id="output"></pre>
    <script>
window.addEventListener('DOMContentLoaded', e => {
    // 出力用の関数
    const print = function() {
        const el = document.querySelector('#output');
        el.textContent += [...arguments].map(x => `${x}`).join(', ') + '\n';
    };

    let animal = null;
    print(animal?.cat?.name);

    animal = {cat: {name: 'Tama'}};
    print(animal?.cat?.name);
});
    </script>
  </body>
</html>

出力結果

undefined
Tama

• 実行結果を別ウインドウで開く

フィードバックお待ちしております！

　ご感想、解説してほしい用語、解説内容のアドバイスなどございましたら、FacebookやX（旧Twitter）などでお気軽に編集部までお寄せください。よろしくお願いいたします。