Webサイト制作-10日目(JSON)

この講座でも汎用データフォーマットとしてCSVは何度か登場しているし、アンドロイド制作のレイアウトを作る際にはxmlを利用してきた。そして今回はJSONを扱う。JSONとは(JavaScript Object Notation)の略でJSのオブジェクト記法をもとにした汎用データ・フォーマットだ。シンプルでわかりやすくオブジェクトを表現できるので昨今人気は大爆発している。
今回はこのJSONについてしっかりと学ぼう。

●JS基本
JSONはJavaScriptの文法に基づいている。まずはJSの文法から確認しよう。
[オブジェクト]

var obj={name:'山田',age:27}

波括弧で囲うことでオブジェクトを表し、あとはその中にkey:valueの組み合わせでプロパティを記述していく。
[配列]

var arr=['red','green','blue']

直カッコで囲い、その中に要素を列挙していくことで配列を表現できる。

●JSON
JSONは上のJS基本のルールに基づいて記述していく。

{
"Beatles":[
  {"name":"John","age":33},
  {"name":"Paul","age":32},
  {"name":"George","age":30},
  {"name":"Ringo","age":29}
  ]
}

まず大外が{}なのでオブジェクトが一つある。そのオブジェクトにはBeatlesというプロパティが定義されていてその値が[]で囲われているつまり配列だ。ここまでで「Beatlesは配列ですよ」という意味になる。で配列の中を見てみると
{}で囲われた部分が４つある。つまり「Beatlesてのは配列でその要素は４つのオブジェクトです。」となる。
さらにその一つ一つのオブジェクトに目を向けると
1つ目のオブジェクトはnameがJohnでageが33,
2つ目のオブジェクトはnameがPaulでageが32,
3つ目のオブジェクトはnameがGeorgeでageが30,
4つ目のオブジェクトはnameがRingoでageが29,
ということがわかる。
どうだろう、ビートルズの構成がこのシンプルな記述に無駄なく収まっていることが感じ取れるのではないだろうか？

この構成をxmlで記述すると以下のようになる。

<?xml version="1.0" ?>
<Beatles>
  <person>
    <name>John</name>
    <age>33</age>
  </person>
  <person>
    <name>Paul</name>
    <age>32</age>
  </person>
  <person>
    <name>George</name>
    <age>30</age>
  </person>
  <person>
    <name>Ringo</name>
    <age>29</age>
  </person>
</Beatles>

JSONに比べると若干冗長な感じがする。
JSONのシンプルでわかりやすい記述が人気が出るのもわかるであろう。

●注意点
シンプルに記述できるので便利なのだが気をつける点が２点ある。
1.プロパティや文字列は””(ダブルコーテーション)でくくる。
jsであれば以下は全部OKだ。

var arr1={name:'hoge',age:33};
var arr2={'name':'hoge','age':33};
var arr3={"name":"hoge","age":33};

JSONは一択だ。

{"name":"hoge","age":33}

2.余計なカンマは許されない。
jsであれば、配列の次の要素がない場合も,をつけることができる。

var arr=['red','green','blue',]；

blueの後に要素がないが問題ない、要素数も3だ。
ただ、JSONは許されない。必ず以下のように書かなければならない。

["red","green","blue"]

●大切な確認
このように細かいとこにシビアなJSONは、文法的に正しいかどうかをまず確認することが大切だ。

JSONきれい

私は上記のサイトをいつも利用させていただいている。自分でJSONを書いた場合はもちろんのことWebAPIなどから取得したJSONも貼り付けて試してみるといいだろう。そもそも間違えている場合などもある。

●値
最後に値について確認する。

{
  "name":"John",
  "age":33,
  "height":180.3,
  "favoriteWord":null,
  "isRightHanded":true,
  "isLeftHanded":false,
  "wife":{"name":"Yoko","age":32},
  "part":["vocal","guitar"]
}

上から順に文字列、整数、実数、null,true,false,配列、オブジェクト
値として指定できるのは以上が全てだ。

基本を学んだので自分でJSONを書いてみよう。

　Q1.以下のデータをJSONで記せ。

和名	英名	コード	心理効果
赤	Red	#ff0000	活力を感じ気持ちを前向きにさせる。
			アドレナリンを分泌し興奮を促す。
			熱や暖かさを感じる。
			食欲を増進させる。
			時間経過を早く感じさせる。
			目を引き関心を集める。
緑	Green	#00ff00	心や身体の疲れをいやす。
			疲れた目を休ませる。
			鎮静作用で緊張を緩和する。
			リラックスの作用がある。
			穏やかな気持ちを与える。
青	Blue	#0000ff	集中力を高める。
			食欲をコントロールできる。
			興奮を抑え、気持ちを落ち着かせる。
			時間経過を遅く感じる。
			睡眠を促進する。

[解答例]

[
{
"和名":"赤",
"英名":"Red",
"コード":"#ff0000",
"心理的効果":[
              "活力を感じ気持ちを前向きにさせる。",
              "アドレナリンを分泌し興奮を促す。",
              "熱や暖かさを感じる。",
              "食欲を増進させる。",
              "時間経過を早く感じさせる。",
              "目を引き関心を集める。"
              ]
},
{
"和名":"緑",
"英名":"Green",
"コード":"#00ff00",
"心理的効果":[
              "心や身体の疲れをいやす。",
              "疲れた目を休ませる。",
              "鎮静作用で緊張を緩和する。",
              "リラックスの作用がある。",
              "穏やかな気持ちを与える。"
              ]
},
{
"和名":"青",
"英名":"Blue",
"コード":"#0000ff",
"心理的効果":[
              "集中力を高める。",
              "食欲をコントロールできる。",
              "興奮を押さえ、気持ちを落ち着かせる。",
              "時間経過を遅く感じる。",
              "睡眠を促進する。"
              ]
}
]

Q2.以下のデータをJSONで記せ。

名前	年齢	パート
John	32	ボーカル
		ギター
Paul	31	ボーカル
		ベース
		ギター