CoffeeScriptベストプラクティス集
ブラウザ向けJavaScript編（1）

JSONを扱う

　JSONはXMLに比べてデータ量が少なくて済むうえ、数多くのプログラミング言語から利用でき、なおかつ可読性が高いという点で非常に優れたフォーマットです。Ajaxは当初、サーバとの通信に使うデータフォーマットとしてXMLが主流でした。しかしXMLはサイズが大きいうえにプログラムからXMLを操作するAPIが煩雑なため、よりフォーマットが簡潔で手軽に使えるJSONを使って通信する方が現在では一般的になってきています。

{
  "name": "Lewis Carroll",
  "born": 1832,
  "writings": [
    {
      "title": "Alice's Adventures in Wonderland",
      "year":  1865
    },
    {
      "title": "Through the Looking-Glass",
      "year":  1871
    }
  ]
}

　最近のブラウザでは、オブジェクトをJSON文字列に変換するJSON.stringify()や、逆にJSON文字列をオブジェクトに変換するJSON.parse()という関数が用意されています。しかしInternet Explorer（以下、IE）6や7などの比較的古いブラウザではこれらの関数が用意されていません。

　json2.js（パブリックドメイン）というライブラリを使うと、JSONのAPIが用意されていないブラウザではJSON.stringify()やJSON.parse()が追加され、クロスブラウザでJSONのAPIを使えるようになります。

json2.jsの使い方

　json2.jsをこのページのRawボタンを押してダウンロードし、サイトに設置してHTMLで読み込みます。

<script src="json2.js"></script>

　ライブラリを読み込むとJSONというオブジェクトがクロスブラウザで使えるようになります。オブジェクトとJSONを変換するにはリスト2のように実行します。

# オブジェクトをJSON文字列に変換する
json = JSON.stringify { a: 123, b: 456, c: [7, 8, 9] }
# json の値は {"a":123,"b":456,"c":[7,8,9]} という文字列

# JSON文字列をオブジェクトに変換する
obj = JSON.parse '{"a":123,"b":456,"c":[7,8,9]}'
# obj.a の値は 123

JSONを見やすく表示する

　JSON.stringify()の第3引数に数値を渡すと、インデントが挿入された可読性の高い形式でJSON文字列を取得できます（※注1）。このような出力フォーマットはデバッグの際に便利です。

JSON.stringify { a: 123, b: 456, c: [7, 8, 9] }, null, 2

　リスト3の式の戻り値はリスト4の文字列となります。

{
  "a": 123,
  "b": 456,
  "c": [
    7,
    8,
    9
  ]
}

　JSON.stringify()の第3引数で指定した個数分の半角スペースがインデント1個分として使われます。文字列を指定した場合は、その文字列がインデントに使われます（リスト5）。

JSON.stringify { a: 123, b: 456, c: [7, 8, 9] }, null, '\t'