JavaScript/JSONの書き方

JSONの書き方

昔AWSとかChefとかを上辺だけでやってた時にJSONがさっぱり分からなくて泣きそうになったことがあったけど、そこから離れてたらある日突然独自解釈で開眼したのでメモを残す。

JSONとは連想配列である

まずJSONというのは連想配列であり、連想配列とはつまりkey/valueの組み合わせである。
そして最も基本的な連想配列(key/value)とは空の連想配列であるが、割とどうでもいい。
{}

key/valueを記述する

key/valueとは、何らかのキーワード(key)に対し、何らかの値(value)があるということ。
そして、key/valueの関係は:(コロン)で表される。

例えば、名前というkeyに対してイチローというvalueを定義する。
{ "名前" : "イチロー" }

あえてJavascriptのコードで書くとこんな感じだろうか。
var ichiro = { "名前" : "イチロー" };
ここでは分かりやすいようにコードにしてみたが、実際のところ「JSON」というのは右側の連想配列部分のみを指す。

JSONとは、このkey/valueをいくつも持つ「何か」を表現するための記法である。
「何か」というのはつまり「オブジェクト」であり、これは名前がイチローであるというだけのオブジェクトである。

key/valueを複数書く

これだと世界中のイチローさんが該当してしまうので、もっと情報を絞り込んでいきたい。
イチローというオブジェクトは名前以外の情報を持っていることもあるだろう。
例えば出身地は日本である。
{ "名前" : "イチロー", "出身地" : "日本" }
key/valueの組み合わせが複数ある場合は、{}で囲ってカンマ区切りに記述することができる。(そしてこれこそが連想配列の記法である)
ここで「名前」と「出身地」という2つのkeyには互いに優劣関係は無いので、インデントを加えて並列であることが分かりやすくなるようにしておこう。
{
  "名前" : "イチロー",
  "出身地" : "日本"
}
当たり前のことだが、インデントなので改行とスペースしか加えていない。

値は一つとは限らない

普通の人は名前が一つしか無いが、稀に二つ名を持つ者もいるだろう。
その場合は名前というkeyに対する値を配列表記でセットすることができる。
{
  "名前" : [ "イチロー", "鈴木一朗" ],
  "出身地" : "日本"
}
[]で囲った場合は配列を意味し、カンマ区切りで複数記述できる。

配列の値にも優劣関係は無いので、並列であることが分かるようにしておこう。
{
  "名前" : [
    "イチロー",
    "鈴木一朗"
  ],
  "出身地" : "日本"
}
ただし、名前と配列にはkey⇒valueという優劣関係があるので、配列の方を一段落としておこう。
keyとvalueは等価だろ!という方もいらっしゃるかと思いますが、それでは話が進まないので胸の内にとどめておいて下さい。
ここでも改行とスペースしか加えておりません。

値自体がkey/valueの場合もある

生年月日を追加してみよう。
{
  "名前" : [
    "イチロー",
    "鈴木一朗"
  ],
  "出身地" : "日本",
  "生年月日" : "1973/10/22"
}
連想配列の項目が一つ増えたので、出身地の後ろにカンマが追加されている。

ところで、生年月日をそのまま使っても良いが、年月日を分けてみたらどうだろうか。
こうなることはお分かり頂けるだろうか。
{ "年" : "1973", "月" : "10", "日" : "22" }
これ自体が連想配列だが、これを値(value)として扱うこともできる。
{
  "名前" : [
    "イチロー",
    "鈴木一朗"
  ],
  "出身地" : "日本",
  "生年月日" : { "年" : "1973", "月" : "10", "日" : "22" }
}

インデントを加えるとこの通り。
{
  "名前" : [
    "イチロー",
    "鈴木一朗"
  ],
  "出身地" : "日本",
  "生年月日" : {
    "年" : "1973",
    "月" : "10",
    "日" : "22"
  }
}

あとは好きなように

ここまで来たらもう何でも書けるはずだ。
こうして
{
  "名前" : [
    "イチロー",
    "鈴木一朗"
  ],
  "出身地" : "日本",
  "生年月日" : {
    "年" : "1973",
    "月" : "10",
    "日" : "22"
  },
  "所属" : [
    { "球団名" : "オリックス", "入団年" : "1992" },
    { "球団名" : "マリナーズ", "入団年" : "2001" },
    { "球団名" : "ヤンキース", "入団年" : "2012" }
  ]
}

こうなる
{
  "名前" : [
    "イチロー",
    "鈴木一朗"
  ],
  "出身地" : "日本",
  "生年月日" : {
    "年" : "1973",
    "月" : "10",
    "日" : "22"
  },
  "所属" : [
    { 
      "球団名" : "オリックス",
      "入団年" : "1992"
    },
    {
      "球団名" : "マリナーズ",
      "入団年" : "2001"
    },
    {
      "球団名" : "ヤンキース",
      "入団年" : "2012"
    }
  ]
}

こうして
{
  "名前" : [
    "イチロー",
    "鈴木一朗"
  ],
  "出身地" : { "国" : "日本", "県" : "愛知", "市区町村" : "西春日井郡豊山町" },
  "生年月日" : {
    "年" : "1973",
    "月" : "10",
    "日" : "22"
  },
  "所属" : [
    { 
      "球団名" : "オリックス",
      "入団年" : "1992"
    },
    {
      "球団名" : "マリナーズ",
      "入団年" : "2001"
    },
    {
      "球団名" : "ヤンキース",
      "入団年" : "2012"
    }
  ]
}

こうなる
{
  "名前" : [
    "イチロー",
    "鈴木一朗"
  ],
  "出身地" : {
    "国" : "日本",
    "県" : "愛知",
    "市区町村" : "西春日井郡豊山町"
  },
  "生年月日" : {
    "年" : "1973",
    "月" : "10",
    "日" : "22"
  },
  "所属" : [
    { 
      "球団名" : "オリックス",
      "入団年" : "1992"
    },
    {
      "球団名" : "マリナーズ",
      "入団年" : "2001"
    },
    {
      "球団名" : "ヤンキース",
      "入団年" : "2012"
    }
  ]
}

構造を意識せずに書き始めるとフォーマットのエラーになることが多いが、大抵は余計なカンマが入っていたり、カンマで区切るべき所にカンマが入っていないことが原因だ。(特に要素の末尾にカンマが入っていることが多い)
カンマを入れるのは連想配列か配列の要素を区切る場所なので、それを意識してみると良い。
ただしブラウザやライブラリによっては末尾のカンマを許容する場合もあるようなので、あっちでは使えるけどこっちでは使えないといったことが起きるので注意が必要。

また、読む時はどのようなインデントが入っているか次第で大きく読みやすさが変わってしまう。
どうしても分かりにくい時は思い切ってテキストエディタなどにコピペし、自分が読みやすいインデントに変更しても良いだろう。

とりあえずこれだけ知っていれば書くのと読むのは困らないと思うので、もっと詳しい仕様などが知りたい場合は別途ググって頂きたく。

  • 最終更新:2017-05-09 14:46:37

このWIKIを編集するにはパスワード入力が必要です

認証パスワード