古いInternet Explorerでの検証
IEの場合、他のブラウザと比べてバージョンごとの違いが大きく、またそれぞれのバージョンを使っているユーザー数が多いため、各バージョンごとにWebサイトのテストが必要になります。IEの古いバージョンのテスト用に、MicrosoftによってVirtual PCのイメージがWeb上で提供されています。MicrosoftのVirtual PCというWindows用の無料ソフトウェアをインストールし、Virtual PC上でこのイメージを使ってWindowsを起動することで、過去のバージョンのIEを動かすことができます。イメージには使用期限が設けられておりそれ以降は使えなくなりますが、使用期限が過ぎると新しいイメージがサイト上にアップロードされ、次の使用期限まで使えるようになります。なお、Windows XPやVistaで使うにはVirtual PC 2007をインストールします。
クライアント側のエラーログを収集する
クライアント側で起きたJavaScriptのエラーログをサーバに送信するようにしておくと問題解決に役立つことがあります。window.onerrorに関数をセットすると、ページ内でJavaScriptエラーが発生した時にその関数が呼ばれます。この関数内部からエラーの詳細をAjax等でサーバに送信できます。
window.onerror = (message, file, line) ->
# jQueryを使ってエラーの詳細をPOSTする
$.post 'http://localhost/api/errors',
message: message
file: file
line: line
コールバック関数の実行時に渡される引数は以下のような内容となります。
message: Uncaught ReferenceError: a is not defined file: http://localhost/error/js/page.js line: 15
複雑なテンプレートの使用
クライアント側で動的にHTMLを生成する場合はテンプレートを使うと便利です。CoffeeScriptの#{...}による変数展開や、Underscore.jsの_.template()でも簡単なテンプレートは使えますが、繰り返しなどの文法は用意されていません。Handlebars.js（MITライセンス）というライブラリを使うと、配列を使った繰り返し処理をすっきりと書くことができます。
Handlebars.jsを使うには、ダウンロードページから最新のファイルをダウンロードして読み込みます。runtimeと書いてあるファイルはテンプレートのコンパイル機能を含まないものです。よくわからなければ、runtimeではない方を選びましょう。
# テンプレートに渡す変数
context =
name: 'ビートルズ'
members: [
{ name: 'ジョン・レノン', part: 'リズムギター' }
{ name: 'ポール・マッカートニー', part: 'ベース' }
{ name: 'ジョージ・ハリスン', part: 'リードギター' }
{ name: 'リンゴ・スター', part: 'ドラム' }
]
# テンプレート
source = """
<div class="band">
<h2>{{name}}</h2>
<ul>
{{#each members}}
<li>{{name}}（{{part}}）</li>
{{/each}}
</ul>
</div>
"""
# テンプレートをコンパイルする
template = Handlebars.compile source
# コンパイルしたテンプレートに変数を流しこむ
result = template context
リスト7を実行すると、resultの値は以下のようになります。
<div class="band">
<h2>ビートルズ</h2>
<ul>
<li>ジョン・レノン（リズムギター）</li>
<li>ポール・マッカートニー（ベース）</li>
<li>ジョージ・ハリスン（リードギター）</li>
<li>リンゴ・スター（ドラム）</li>
</ul>
</div>
テンプレート内の{{変数}}はその変数の値をHTMLエスケープした内容で置き換えられます。エスケープしない値で置き換えるには{{{変数}}}のように中括弧を3つ書きます。その他の文法はWebサイト（英語）を参照してください。
Handlebars.jsはMustacheというテンプレートエンジンを元にして作られたもので、{{ }}という文法もお互いに共通している。mustacheは英語で口ひげという意味だが、{の文字を90度時計回りに回転させると口ひげに見えるというのが名前の由来。一方、handlebarは自転車やバイクのハンドルを意味する。英語でhandlebar mustacheというと、自転車のハンドルのように両端が上がっている口ひげのことを指す。そのため、Mustacheへの愛情を込めてHandlebars.jsという名前が付けられた。
次回も引き続き、CoffeeScriptでブラウザ向けJavaScriptを開発する際によく使われる実用的な開発手法を紹介します。
