WIZ-CODE.blog

JavaScriptやAjaxをテーマとしたブログです。

*

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

   

デモページで公開しているClickableCanvasのスクリプトをバージョン2.1に更新しました。先日公開したバージョン2.0でバグや実装のミスがいろいろあったことから、それらを修正しつつ新たな機能などを盛り込んでいます。下記のテストページには、Web上でスクリプトのテストができるツールを設置しています。フォーム内にコードを書き込んで「実行」ボタンを押すと実際にテストすることができます。 ⇒jQuery ClickableCanvas バージョン2 テストページ また、今回はスクリプトのバグ軽減を狙って、JSLintのサイトで構文チェックを行いました。JSLintとはJavaScriptコードが厳密なルールにのっとって書かれているかをチェックするもので、上記のサイトでJavaScriptソースをコピペするだけで簡単にチェックできます。また、ツールをダウンロードして自分の環境でチェックすることもできます。 このJSLintがどれだけ厳密なチェックをしているかというと、行末のセミコロンの付け忘れといった基本的なことは言うまでもなく、
 
i++;
 
このよく使われるインクリメントの書き方すらエラーを吐かれてしまいます。これは直接スクリプトの不具合につながるものではないですが、厳密な視点からみて不適切な記述方法(アンチパターン)になってしまうのです。 正しくはこうなります。
 
i += 1;
 
その他にも、これはどうでもいいだろと思いたくなるようなルールがたくさんあり、コードが長いと修正するのが結構な手間になります。ここではJSLintでひっかかるいくつかのアンチパターンを挙げていきたいと思います。 その1
//これはアンチパターン
if (hoge) {
	hoge();
}
else {
	fuga();
}
 
//これならOK
if (hoge) {
	hoge();
} else {
	fuga();
}
 
その2
//これはアンチパターン
var hoge = { x: 100, y: 200 };
 
//前後のスペースは削除するのが正解
var hoge = {x: 100, y: 200};
 
その3
//これは誰もがよくやりそうなアンチパターン
var hoge = function(){alert('hoge');};
 
//無名関数でも"("の前と")"の後にスペースを入れます
//また一行で関数を記述する際は、"}"の前にスペースを入れます
var hoge = function () { alert('hoge'); };
 
その4
//演算子に関するアンチパターン
hensu = hoge/fuga+2;
 
//変数や数値、演算子とのあいだはスペースを入れます
hensu = hoge / fuga + 2;
 
その5
//アンチパターン
if (hoge == 1){
	hoge();
}
 
//比較するデータが数値や文字列など基本データ型のときは厳格な比較演算子を使います
if (hoge === 1){
	hoge();
}
 
その6
 
//空行に不要な空白があるとJSLintでエラーになります
	//←ここにタブが一つ入っています
 
//空行はインデント分の空白も削除しましょう

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

 - JavaScript/Ajax , , , , ,