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

CoffeeScriptによるモダンなWebアプリケーション開発 第7回

　最近話題の新言語『CoffeeScript』をとりあげた連載「CoffeeScriptによるモダンなWebアプリケーション開発」。今回からはベストプラクティス編として、CoffeeScriptでブラウザ向けJavaScriptを開発する際によく使われる実用的な開発手法を4回に分けて紹介します。CoffeeScriptの歴史や概要については過去の連載も参照ください。

JSONを扱う

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

Ajax

　ページの表示とは非同期に背後で通信を行うテクニックを総称してAjaxと呼ぶ。名前はAsynchronous JavaScript and XMLの頭文字を取ったもので、「非同期のJavaScriptとXML」という意味。

［リスト1］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のように実行します。

［リスト2］オブジェクトとJSONを変換する

# オブジェクトを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）。このような出力フォーマットはデバッグの際に便利です。

※注1

　このように、インデントなどを使って可読性を高める出力形式を一般的にpretty-printと呼ぶ。

［リスト3］半角スペース2個でインデントする

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

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

［リスト4］pretty-printされたJSON

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

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

［リスト5］タブでインデントする

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

【コラム】<script>要素のtype属性

　HTML5では<script>要素のtype属性は指定しなくても構いません。省略した場合のデフォルト値はtext/javascriptとなります。一方、HTML4やXHTMLの仕様ではtype属性は必須です。本連載のサンプルコードはHTML5を前提としていますが、HTML4等を使う際は適宜読み替えてください。同じようにHTML5では<style>要素のtype属性も任意で、省略した場合のデフォルト値はtext/cssとなります。

　また、HTML5ではXHTMLに見られるような<hr />といった終了タグの書き方は不要で、<hr>と書いても意味は変わりません。