フロントエンド技術を学ぼう 2-17.JSONについて学ぶ

Front-end Developer Handbook 2017を教科書にフロントエンド周りの技術を習得する連載。

www.mojage.club

第27回はPart II: Learning Front-End Devから、
17項のLearn JSON (JavaScript Object Notation)を紹介します。

JSONについて学ぶの説明です。

Sponsored Link

JSONについて学ぶ

JSON(JavaScript Object Notatio)は、人間が読めるテキストを使用して属性 - 値のペアからなるデータオブジェクトを送信する為のオープンな標準データフォーマットです。非同期ブラウザ/サーバー通信(AJAX)に使用される主なデータ形式であり、主にXML(AJAXで使用される)を置き換えます。もともとJavaScriptスクリプト言語から派生したものですが、JSONは言語に依存しないデータフォーマットです。 JSONデータの解析と生成のコードは、多くのプログラミング言語で容易に利用できます。

JSON形式はもともとDouglas Crockfordによって規定されました。これは現在、2つの競合する標準、RFC 7159およびECMA-404によって記述されています。 ECMA標準は許可された文法構文のみを記述していますが、RFCでは語義についてや、セキュリティ上の考慮事項を記述しています。JSONの公式インターネットメディアの種類はapplication/jsonです。JSONファイル拡張子は.jsonです。

参照元:英語版Wikipedia

JSONの書き方

JSONはJavaScriptのオブジェクトを記述するときと同じ様に書きます。違うのは、基本的にすべてのフィールドや値をダブルクウォート""で囲む必要がある、ということです。

{
  "mojage"{
    "age": 10,
    "live": true,
    "favorite": ["coffee", "music", "cats"]
  }
}

参照元 :
json.com [読み物]
What is JSON [視聴]
(JSONとは何か)
JSON について [読み物][日本語]

JavaScriptでJSONを扱う

JSON.parse()でJSON文字列をJavaScriptのオブジェクトに変換し、JSON.stringify()でJavaScriptの値をJSON文字列へ変換します。

httpObj = new XMLHttpRequest();
httpObj.open("get", "./js/group.json", true);
httpObj.onload = function(){
  var myData = JSON.parse(this.responseText);
  var txt = "";
  for (var i=0; i<myData.length; i++){
    var option = document.createElement("option");
    option.innerText = myData[i].name;
    option.value=myData[i].value;
    document.getElementById("group_select").appendChild(option); 
  }
}
httpObj.send(null);

参照元 :
JSON
JSON.parse()
JSON.stringify()

書籍

Introduction to JavaScript Object Notation: A To-the-Point Guide to JSON(JavaScript Object Notationの紹介:JSONの要点解説)

リファレンス/ドキュメント

標準仕様