JavaScriptの文法エラーチェックにbkhvalid

2008.02.07

iPod Touchの32GBが発表されて,16GBユーザーでくやしい思いをしているtanakaです．今日はJavaScriptプログラミングを楽にするツールを見つけたので紹介します．

JavaScriptのコードを書くときは専らFirefox+Firebugを使って動作を確認しながら組み立てています．が，JavaScriptのプログラミングでやっかいなのが，Firefoxでは動作するが，IEやOperaでは動作しない，という問題がたまに起こることです．そんなときに最近見つけた文法チェッカーbkhvalidが役に立ちそうです．

たとえば，jQueryでDOM要素のCSSをいじるコードなどでその事件は起こります．以下のコードはCSS/css - jQuery JavaScript Libraryをすこし加工しました．

var cssProp = {
    backgroundColor: "#ddd",
    fontWeight: "bold",
    color: "rgb(0,40,244)",
};
jQuery('p').css(cssProp);

このコードの実行結果を説明すると，p要素の背景色を灰色にして，太字にして文字色を青色にしろ，といった意味になりますが，こんなコードがFirefoxではうまくいくのに，IEやOperaではうまくいかないということがあります．(このコード，実際にはIEやOperaで動作します．こういったコードがうまく実行されないときについてこれから説明します)

このようなコードでうまく動かなかったことが，JavaScriptを触りだしてから3回くらい起きていて，そのたびに原因が何かすぐにわからなくなるんですが，問題は4行目の一番最後にあります．ここではJavaScriptのオブジェクトが生成されているんですが，最後のプロパティ値のあとにコンマをつけることでIEやOperaで動かなくなるようなのです．

Firefoxでエラーがでればすぐに原因が分かることが多いですが，IEやOperaだとなかなか難しいです．IEerBugなどを利用するとすこし楽になります．

bkhvalidはそんなとき事前に文法でおかしい点をチェックできるツールです．これで調べると，「ECMA-262ではオブジェクトの初期化の末尾にカンマを記述するのは不正です」と表示されます．

JavaScriptのほかにHTML/CSSに対応していて，ファイル群をドラッグ&ドロップして，ツール→検証を押すとまとめて検証してくれます．

JavaScriptはツールも書き方もまだまだ模索中の段階です．クロスブラウザの開発手法の中でよいツールやコーディングテクニックを紹介していきたいと思います．