JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptのオプショナルチェイニング演算子（?.）とは？基本と使い方を実例で解説

オプショナルチェイニング（Optional Chaining）演算子「?.」は、ES2020で導入されたJavaScriptの機能です。この演算子を使うと、ネスト（入れ子）されたプロパティへアクセスする際に、チェーン上の各参照がnullやundefinedではないかどうかをいちいち明示的に確認しなくても、安全に値を取得できるようになります。

以前は&&演算子を使って親オブジェクトがnullやundefinedでないことを一つずつチェックしていましたが、現在では「?.」演算子を使うことで、同じ処理をはるかに簡潔に記述できます。参照先がnullやundefinedだった場合でもエラーをスローせずにundefinedを返してくれるため、安全性の高いコードを短く書けるのが大きなメリットです。

オプショナルチェイニングの基本構文

obj?.prop      // プロパティへのアクセス
obj?.[expr]    // ブラケット記法でのアクセス
func?.(args)   // 関数の呼び出し

「?.」の左側の値がnullまたはundefinedの場合、それ以降の評価は行われず、式全体がundefinedを返します。これにより、深くネストしたオブジェクト構造もエラーを恐れずに扱えます。

サンプルコード

次のコードは、オプショナルチェイニング演算子を使ってpersonオブジェクトのプロパティにアクセスする例です。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .result {
        font-size: 20px;
        font-weight: 500;
        color: blueviolet;
    }
</style>
</head>
<body>
<h1>JavaScriptのオプショナルチェイニング演算子</h1>
<div class="result"></div>
<br />
<button class="Btn">クリックしてください</button>
<h3>上のボタンをクリックすると、オプショナルチェイニング演算子でpersonオブジェクトのプロパティにアクセスします</h3>
<script>
    let resEle = document.querySelector(".result");
    let BtnEle = document.querySelector(".Btn");
    let person = {
        name: "Rohan",
        location: {
            state: "Delhi",
            country: "India",
        },
    };
    BtnEle.addEventListener("click", () => {
        resEle.innerHTML =
        "person ?. location ?. state = " + person?.location?.state + "<br>";
        resEle.innerHTML += "person ?. location ?. country = " + person?.location?.country + "<br>";
        resEle.innerHTML += "person ?. personalDetails ?. birthDate = " +
        person?.personalDetails?.birthDate + "<br>";
    });
</script>
</body>
</html>

実行結果

JavaScriptのオプショナルチェイニング演算子（?.）とは？基本と使い方を実例で解説

「クリックしてください」ボタンを押すと、画面には次のように表示されます。

JavaScriptのオプショナルチェイニング演算子（?.）とは？基本と使い方を実例で解説

この例では、person?.location?.state と person?.location?.country は対応するプロパティが存在するため、実際の値（"Delhi"、"India"）が表示されます。一方、person?.personalDetails?.birthDate は personalDetails プロパティ自体が存在しないため、エラーにならず「undefined」が表示されます。

このように、存在するかどうか分からないプロパティにも安全にアクセスできるのが、オプショナルチェイニング演算子の強力な利点です。APIレスポンスなど構造が保証されないデータを扱う場面で特に役立ちます。


  1. JavaScriptのグループ化演算子とは？優先順位の制御方法をサンプルコードで解説

    グループ化演算子とはJavaScriptのグループ化演算子は、丸括弧「()」で表され、式を評価する際の優先順位を制御するために使用されます。通常、演算子にはあらかじめ決められた優先順位があり、乗算（*）や除算（/）は加算（+）や減算（-）よりも先に評価されます。しかし、グループ化演算子で式を囲むことで、この優先順位を意図的に変更し、囲まれた部分を最優先で計算させることができます。例えば「2+2*5/22」という式の場合、標準の優先順位では乗算・除算が先に実行されますが、丸括弧を使うことで「(2+2)*5/22」のように加算を先に行わせることが可能です。サンプルコード以下は、JavaScript

  2. JavaScriptのオプショナルチェイニング演算子（?.）とは？基本と使い方を実例で解説

    オプショナルチェイニング（Optional Chaining）演算子「?.」は、ES2020で導入されたJavaScriptの機能です。この演算子を使うと、ネスト（入れ子）されたプロパティへアクセスする際に、チェーン上の各参照がnullやundefinedではないかどうかをいちいち明示的に確認しなくても、安全に値を取得できるようになります。 以前は&&演算子を使って親オブジェクトがnullやundefinedでないことを一つずつチェックしていましたが、現在では「?.」演算子を使うことで、同じ処理をはるかに簡潔に記述できます。参照先がnullやundefinedだった場合でもエ