ついにこのときが来ました。
ずっとよく分からないままモヤモヤしていたjson。
分かったつもりでいてもどこか腑に落ちていなかったjson。
あまり肩肘張らずに整理していきます。
JSON（JavaScript Object Notation）とは
XMLなどと同様のテキストベースのデータフォーマットです。
（中略）データを引用する言語であるXMLがマークアップ言語であるのに対して、JSONはオブジェクト言語である点が異なっています。 （中略）JavaScriptのオブジェクト表記構文の下位構造（サブセット）をつくるデータフォーマットです。
非エンジニアに贈る「具体例でさらっと学ぶJSON」 | Developers.IO
「JavaScriptの中でオブジェクトを記述する書式」のことです。
（中略）「データを表現するための記法（≒文法）」です。
JSONはデータの書き方の一つなんだ、ということがわかりました。
Markdownについてまとめた際も書きましたが、jsonに関して追加してみると下記のような関係かと思いました。
※合っていないかもしれないのでお気をつけください！
コンピューター言語
┗データ記述言語・・・json （オブジェクト言語）
┗ マークアップ言語・・・HTML、XML、Markdown
┗ プログラミング言語・・・スクリプト言語、コンパイル言語
┗ データベース言語・・・SQL
JavaScriptのオブジェクトについて
たびたび出てくるオブジェクト。分かっているようで分かっていないようなもののうちの一つです。
オブジェクトまわりの関係する言葉を調べました。
データ型
"値"の種類は大きく2つに分けられて、さらにプリミティブは6つに分けられます。
プリミティブ・・・1つの値
┗数値
┗文字列
┗boolean（true / false）
┗"null"
┗"undefined"
┗シンボル
オブジェクト・・・複数の値
┗オブジェクト・・・{}で囲む（オブジェクトリテラル）、new Object()で定義する
┗関数・・・function() {}で定義する
┗配列・・・[]で囲む（配列リテラル）、new Array()で定義する
☆プリミティブのデータ型（数値や文字列）も、オブジェクトとして扱うことができます。
ここまでまとめて、オブジェクトとは広義と狭義の意味があると考えました。ここからは純粋な狭義の（？）オブジェクトの話です。
メンバー
コロン : を、name（文字列値）と値ではさんだもの。
メンバーの値によって、呼び方が異なる。
- 関数オブジェクト →メソッド
- 関数以外のオブジェクト →プロパティ
JavaScriptは「オブジェクト」
{} で囲まれたものの呼び方は言語によって異なります。
JavaScriptは「オブジェクト」、
Pythonは「ハッシュ」...大体はオブジェクトっぽいですが、気をつけましょう。
意味は同じです。
サブセットとは
JSONはJavaScriptにおけるオブジェクト表記法のサブセットである
とあります。
サブセットとは「本来備えている要素の一部を省略・削除した簡易版、限定版、軽量版」という意味なので、
ここではJavaScriptの一部の機能（オブジェクト表記法）だけを扱った限定版がJSONということになります。
...ここまでが長い！
JSONは文字列
混乱していたのが「JSONはの中身はテキストではないの？オブジェクト？」ということです。
JSONは文字列です（「JSON-text」というそうです）
「JSONデータ」や「JSON形式」など呼ばれ方に幅があるように思います。
JSONの書き方
JSONの使われ方は、
- 外部ファイルとして
- 他の言語ファイル内で
の2パターンあります。
例を挙げます。
js内にて変数に入れる場合
var json = {
"name" : "ichiro", // ←JSON形式ではnameにダブルクォーテーション必須
"age" : 24
}
{} 部分がJSONのデータ部分です。
javascriptのオブジェクトとの違いはnameに "" が必要かどうかです。
また配列もJSONデータとして扱われるそうです。
// 配列もオブジェクトなのでOK
var object2 = [
{
"name" : "jiro",
"age" : 22
},
{
"name" : "saburo",
"age" : 20
},
]
// 関数は入れられない
var object3 = {
"name": "shiro",
"age": 18,
"hobby": ["fishing", "game", "drive"], // 値に配列も入れられる
"parents": [
{ // オブジェクトも入れられる
"name": "taro",
"age": 50
},
{
"name": "hanako",
"age": 48
}
]
}
これらはオブジェクトなので以下の方法で参照が行なえます。
JSONデータの参照
javascriptでは上の object3の、shiroの名前と親のtaroの年齢の参照は次のようになります。
console.log(object3.name); // shiro console.log(object3.parents[0]["age"]); // 50 console.log(object3.parents[0].age); // これもOK。50
ちなみに、オブジェクト（ここではobject3）をconsole.logで出すと object と出て、「▼」で開くと
{name: "shiro", age: 18, hobby: Array(3), parents: Array(2)}
age: 18
hobby: (3) ["fishing", "game", "drive"]
name: "shiro"
parents: (2) [{…}, {…}]
__proto__: Object
と表示されます。
JSONファイルを使う場合
この場合は変数に代入せず、{} や []で囲ったJSONデータを .json の拡張子を付けて保存します。（phpファイルなど他の言語ファイルでもよさそう？）
data.json
{
"name" : "ichiro",
"age" : 24
}
JSONファイルを読み込む
javascriptから読む方法です。
jQueryを使う場合 ー $.getJSON()メソッド
jQuery.getJSON( url, data, callback )
url：読み込むJSONデータのあるファイル
data：読み込み成功したときのコールバック関数に渡される値（オブジェクト）
callback：読み込み成功したときのコールバック関数
jQuery： JSON形式のWeb APIにアクセスするには？（$.getJSON） - Build Insider
「API」、「Ajax」、「クロスドメイン」、「XMLHttpRequestオブジェクト」、「GET」、「非同期通信」...などなど、未知の領域なので深入りはまたの機会にして...。
ここで大事なのは、戻り値がオブジェクトであるということです。 テキストであるJSONデータをオブジェクト化する必要がない。便利なメソッドのようです。
jQueryを使わない場合（ネイティブ）
JavaScriptでのJSONのパーシング - JSONの読み込みと値の取得 - JavaScript プログラミング
結局「XMLHttpRequestオブジェクト」が出てきました。これは避けては通れなさそうですね...。
ここでもし渡ってきJSONデータを console.log で確認すると
{"name":" ichiro","age":24}
と出てきます。これは文字列です。
この場合はテキストで渡ってきたJSONデータをオブジェクトにする処理が必要です。
JSON.parse() を使います。
パース：文字列を解釈すること
です。
なお、eval() という、同じく「javascptの構文があればその文字列を解析して実行する」関数がありますが、JSON.parse() はJSONのオブジェクト化に特化しているのでそちらを使う方がよいそうです。
リスクも正しく把握! JavaScriptのevalで文字列をコードとして使おう | 侍エンジニア塾ブログ（Samurai Blog） - プログラミング入門者向けサイト
まとめ
JSONデータを外部ファイルに書き出す流れや、phpからJSONデータを読み込む・書き出す場合など、もう少しいろいろまとめたいではありましたが、散らかってきたのでこの辺で終わります。
最後に図にしてみました！
APIへの階段をひとつずつ登っていこうと思います。
