JS ~JSONデータの解析

JSON の正式名称は「JavaScript Object Notation」です。現在、データの保存と送信のための最も一般的な軽量データ交換形式です。通常、サーバーとクライアントは対話するときに JSON 形式のデータを使用します。

 

JSONとは

JSON は JavaScript スクリプトから発展し、JavaScript の構文を使用してデータを記述します。 XML と同様、JSON は.jsonファイル拡張子が付いたテキストベースの形式です。

現在、ほとんどのプログラミング言語 (PHP、Java、.Net など) は JSON をサポートしており、JSON には 2 つの基本構造があります。

• オブジェクト: 複数のキー/値ペア (つまりkey:value ) で構成される順序なしのコレクション。各オブジェクトは左中括弧{で始まり右中括弧}で終わり、複数のキー/値ペアはカンマ,区切られます。
• 配列: 順序付けられた値のリスト。各配列は左角括弧[で始まり、右角括弧]で終わり、複数の値は,で区切られます。

JSON では、プロパティ名またはキーは文字列形式 (英語の二重引用符で囲まれています) ですが、値は次のように任意の型にすることができます。

 {
    "course": {
        "name": "JavaScript",
        "author": "https://it-kiso.com/",
        "year": 2021,
        "genre": "はじめにのチュートリアル",
        "bestseller": true
    },
    "fruits": [
        "りんご",
        "バナナ",
        "いちご",
        "マンゴー"
    ]
} 

JavaScript での JSON データの解析

JavaScript では、JSON.parse() メソッドを使用して JSON データを解析できます。サンプル コードは次のとおりです。

 変数jsonには、'{"course": {"name": "JavaScript","author": "https://it-kiso.com/","year": 2021,"genre": "Getting Started tutorial","bestseller": true},"fruits": ["Apple","Banana","Strawberry","Mango"]}'という文字列が代入されています。
変数objには、JSON.parseメソッドを使って、jsonをJSONオブジェクトに変換したものが代入されています。
最後に、courseとfruitsをそれぞれconsole.logメソッドを使って出力しています。 

ネストされた JSON データを解析する

JSON データ内のオブジェクトと配列はネストすることができ、JSON オブジェクトには任意のタイプのデータ (配列、ネストされた配列、他の JSON オブジェクトなど) を含めることができます。ネストされた JSON データを取得するにはどうすればよいですか?サンプルコードは次のとおりです。

 var json = `{
    "book": {
        "name": "Harry Potter and the Goblet of Fire",
        "author": "J・K・ローリング",
        "year": 2000,
        "characters": ["ハリー・ポッター", "ハーマイオニー・グレンジャー", "ロン・ウィーズリー"],
        "genre": "ファンタジー小説",
        "price": {
            "ペーパーバック": "$10.40", "ハードカバー": "$20.32", "キンドル": "$4.11"
        }
    }
}`;

// JSONデータをJSONオブジェクトに変換する
var obj = JSON.parse(json);

// ネストされたJSONデータを出力する
function printValues(obj) {
    for (var k in obj) {
        if (obj[k] instanceof Object) {
            printValues(obj[k]);
        } else {
            document.write(obj[k] + "<br>");
        };
    }
};

// printValues()関数を呼び出す
printValues(obj);

document.write("<hr>");

// JSONデータの単一の値を出力する
document.write(obj["book"]["author"] + "<br>");         // 出力: J. K. ローリング
document.write(obj["book"]["characters"][0] + "<br>");  // 出力: ハリー・ポッター
document.write(obj["book"]["price"]["ハードカバー"]);      // 出力: $20.32 

実行結果は次の図のとおりです。

開発プロセス中、クライアントとサーバー間のデータ対話を容易にするために、データを JSON 形式に変換する必要がある場合があります。次の例に示すように、JavaScript には、JavaScript 値を JSON 形式に変換するためのJSON.stringify()メソッドが用意されています。

 var obj = {
    "name": "JavaScript",
    "author": "https://it-kiso.com/",
    "year": 2021,
    "genre": "入門チュートリアル",
    "bestseller": true
};
var json = JSON.stringify(obj);
document.write(json); 

操作の結果は次のとおりです。

{“名前”:”JavaScript”,”著者”:”https://it-kiso.com/”,”年”:2021,”ジャンル”:”入門チュートリアル”,”ベストセラー”:true}

注: JavaScript オブジェクトは JSON オブジェクトに非常によく似ていますが、同じではありません。たとえば、JavaScript では、オブジェクトのプロパティ名を一重引用符 ” または二重引用符 “” で囲むことも、引用符を完全に省略することもできます。ただし、JSON では、すべてのプロパティ名を二重引用符で囲む必要があります。