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

【初心者向け】JavaScriptでネストされたJSONオブジェクトにアクセスする方法をわかりやすく解説

ネストされたJSONオブジェクトへのアクセスとは？

JavaScriptでネストされたJSONオブジェクトにアクセスするのは、ネストされた配列にアクセスするのとほぼ同じ要領です。ここでいう「ネストされたオブジェクト」とは、別のオブジェクトの内部に格納されているオブジェクトのことです。

ネストされたプロパティへアクセスする際によく使われるのがドット記法（dot notation）です。ドット記法では、オブジェクト名.プロパティ名.その中のプロパティ名のように、階層を順番にたどって目的の値へ到達します。

例1：1階層ネストされたオブジェクトへのアクセス

次の例では、メインオブジェクト「person」の中に「vehicles」というオブジェクトが含まれています。ドット記法を使用することで、ネストされたオブジェクトのプロパティ（car）にアクセスできます。

<html>
<body>
<script>
    var person = {
        "name":"Ram",
        "age":27,
        "vehicles": {
            "car":"limousine",
            "bike":"ktm-duke",
            "plane":"lufthansa"
        }
    }
    document.write("Mr Ram has a car called" + " " + person.vehicles.car);
</script>
</body>
</html>

出力結果

Mr Ram has a car called limousine

例2：2階層にネストされた（ダブルネスト）オブジェクトへのアクセス

次の例では、「airlines」というオブジェクトが二重にネストされています（ネストされたオブジェクトの中に、さらにネストされたオブジェクトが入っている状態）。このような深い階層にあるプロパティ（lufthansa）も、ドット記法をつなげて記述するだけでアクセスできます。

<html>
<body>
<script>
    var person = {
        "name":"Ram",
        "age":27,
        "vehicles": {
            "car":"limousine",
            "bike":"ktm-duke",
            "airlines":{
                "lufthansa" : "Air123",
                "British airways" : "Brt707"
            }
        }
    }
    document.write("Mr Ram travels by plane called" + " " + person.vehicles.airlines.lufthansa);
</script>
</body>
</html>

出力結果

Mr Ram travels by plane called Air123

押さえておきたいポイント

  • ネストされたオブジェクトへのアクセスは、ドット記法を階層の数だけつなげて記述するだけで実現できます。
  • プロパティ名にスペースやハイフンなどの特殊文字が含まれる場合は、ブラケット記法（obj["property name"]）を使うと確実です。
  • 存在するかどうか不明なプロパティにアクセスする場合は、オプショナルチェーン（obj?.prop?.subprop）を活用すると、途中でundefinedになってもエラーを防げます。
  • キー名のタイポ（例：lufthanza と lufthansa の混同など）はundefinedを返す原因になるため、注意しましょう。
  1. JavaScriptでプロパティにアクセスする3つの方法｜ドット記法・角括弧・分割代入の使い分け

    JavaScriptでオブジェクトのプロパティにアクセスする3つの方法 JavaScriptには、オブジェクトが持つプロパティ（キーと値のペア）を参照するための方法が主に3つあります。どれも同じ値を取得できますが、それぞれ特徴や向いている場面が異なるため、正しく使い分けられるとコードの可読性と保守性が大きく向上します。 ドット記法：object.property 角括弧記法：object[property] 分割代入：let {property} = object 1. ドット記法（object.property） 最もシンプルで読みやすい記法です。obj.a のようにピリオドでつなぐだけ

  2. JavaScriptで別のオブジェクトを介してオブジェクトにアクセスする方法

    JavaScriptでは、あるオブジェクトを定義する際に、別のオブジェクトのプロパティやメソッドを参照することで、その値を取得したり、メソッドの実行結果を利用したりすることができます。この記事では、既存のオブジェクト（obj）を介して、新しいオブジェクト（obj2）からプロパティやメソッドにアクセスする方法を、具体的なコード例とともに解説します。押さえておきたいポイントオブジェクトリテラルの中で obj.lastName のように記述すると、その時点での値が新しいオブジェクトにコピーされます。obj.welcome() のようにメソッド名の後に括弧を付けると、オブジェクト定義時にメソッドが即座