jQuery ClickableCanvasのテストページを設けました

デモページで公開しているClickableCanvasのスクリプトをバージョン2.1に更新しました。先日公開したバージョン2.0でバグや実装のミスがいろいろあったことから、それらを修正しつつ新たな機能などを盛り込んでいます。下記のテストページには、Web上でスクリプトのテストができるツールを設置しています。フォーム内にコードを書き込んで「実行」ボタンを押すと実際にテストすることができます。 ⇒jQuery ClickableCanvas バージョン２ テストページ また、今回はスクリプトのバグ軽減を狙って、JSLintのサイトで構文チェックを行いました。JSLintとはJavaScriptコードが厳密なルールにのっとって書かれているかをチェックするもので、上記のサイトでJavaScriptソースをコピペするだけで簡単にチェックできます。また、ツールをダウンロードして自分の環境でチェックすることもできます。 このJSLintがどれだけ厳密なチェックをしているかというと、行末のセミコロンの付け忘れといった基本的なことは言うまでもなく、

 
i++;
 

このよく使われるインクリメントの書き方すらエラーを吐かれてしまいます。これは直接スクリプトの不具合につながるものではないですが、厳密な視点からみて不適切な記述方法（アンチパターン）になってしまうのです。 正しくはこうなります。

 
i += 1;
 

その他にも、これはどうでもいいだろと思いたくなるようなルールがたくさんあり、コードが長いと修正するのが結構な手間になります。ここではJSLintでひっかかるいくつかのアンチパターンを挙げていきたいと思います。 その１

//これはアンチパターン
if (hoge) {
	hoge();
}
else {
	fuga();
}
 
//これならOK
if (hoge) {
	hoge();
} else {
	fuga();
}
 

その２

//これはアンチパターン
var hoge = { x: 100, y: 200 };
 
//前後のスペースは削除するのが正解
var hoge = {x: 100, y: 200};
 

その３

//これは誰もがよくやりそうなアンチパターン
var hoge = function(){alert('hoge');};
 
//無名関数でも"("の前と")"の後にスペースを入れます
//また一行で関数を記述する際は、"}"の前にスペースを入れます
var hoge = function () { alert('hoge'); };
 

その４

//演算子に関するアンチパターン
hensu = hoge/fuga+2;
 
//変数や数値、演算子とのあいだはスペースを入れます
hensu = hoge / fuga + 2;
 

その５

//アンチパターン
if (hoge == 1){
	hoge();
}
 
//比較するデータが数値や文字列など基本データ型のときは厳格な比較演算子を使います
if (hoge === 1){
	hoge();
}
 

その６

 
//空行に不要な空白があるとJSLintでエラーになります
	//←ここにタブが一つ入っています
 
//空行はインデント分の空白も削除しましょう

アンチパターンの種類はまだまだたくさんありますがこのくらいに。JSLintはオプションでどの程度まで厳格にするか指定することができるので、パーフェクトな構文でないと気がすまない人ならともかく、できる範囲で修正すればいいと思います。ちなみにClickableCanvasもパーフェクトにはほど遠いです･･････

 - JavaScript/Ajax Canvas, ClickableCanvas, HTML5, jQuery, JSLint, プラグイン