JavaScriptのチェックツール(JSLint)を使ってみた

JSLint(ドキュメント)
JSLint(ツールの本体)

JSLintは、JavaScriptのコードをチェックしてくれるツールです。
文法エラーってレベルだけでなく、もっと細かいところまでツッコミを入れてくれます。
このツールを作ったのはダグラス・クロックフォード（Douglas Crockford）さん。
なんとJSONの発明者でもあり、JavaScript界の重鎮らしいです。
ほほう〜。


ということでチェックしてみることにしました。
まあ、手慰みみたいなものですよ。
たまにはおじいちゃんの戯言でも聞いてみようかな、みたいな？
僕のコードはとってもきれいですからね。
HAHAHA！


まずは上記のJSLint(ドキュメント)に行ってみます。
ページの先頭にこんな警告が書いてありますよ。


Warning!
JSLint will hurt your feelings.
(警告！JSLintはあなたの気持ちを傷つけるだろう。)


ま〜、おじいちゃんたら人が悪いのね。
この手のツールを使うと山のようにツッコミを食らうものです。
それらを一つずつ検討し、
「なるほどそうなのかー」と納得したり、
「それは違うだろ！」と憤慨したり、
「言ってることはわかるがここは仕方ない」と見切りをつけたり、
そうやって使うものですからね、この手のツールは。
まあ、僕のプログラムには問題ないはずなんでいいんですけど。
WAHAHA！


チェックにかけたのは「リストをリング状に配置するjQueryプラグイン」で公開したjquery.ringlist.jsです。
出るわ出るわエラーが50個。
あれ…？マックスで50個表示…？ってことは50個以上あるの…？
しかも、解析不能ってことで途中で止まってるし。
そりゃないぜ爺さん、HAHAHAHAHA…。
泣いてなんかいないんだからね！


では、気になったエラーについていくつか書いていきます。


・Combine this with the previous 'var' statement.
私のコードで一番多く出たエラーです。
要するに、変数宣言はスコープの先頭で一発でやれ、ってことです。
以下のような感じ。

//JSLint的NG
function doSomething() {
    var x = 0;
    var y = 0;
    if (true) {
        var z = 0;
        for (var i = 0; i < 10; i++) {
        }
    }
}

//JSLint的OK
function doSomething() {
    var x = 0, y = 0, z = 0, i;
    if (true) {
        for (i = 0; i < 10; i++) {
        }
    }
}

JavaScriptにはブロックスコープがないので、関数の先頭で宣言しろって言うのはわかるんですけど…。
for文のカウンター変数もダメっすかー？
やっぱ変数を使う直前に宣言したいし。


・Expected 'case' at column 1, not column 5.
次はcaseのインデント。
こんなの個人の趣味だろうが！

//JSLint的NG
switch (value) {
    case 1:
    case 2:
    case 3:
    default:
}

//JSLint的OK
switch (value) {
case 1:
case 2:
case 3:
default:
}

・Missing 'use strict' statement.
JavaScriptはコンパイルする言語に比べれば結構いい加減な書き方ができます。
それを許さない「厳密モード」を使いなさいってことですね。
へ〜、知らなかった。
ただ現時点では、FireFoxぐらいしか実装されてないみたいなので様子見です。
詳しくはこちら。
Firefox 4はECMAScript 5のstrictモードに対応、ブラウザ初の実装

JavaScriptでイベントハンドラを追加・削除

2013/11/18
いただいたコメントを元に追記しました。
コメントをくれた方、ありがとうございます。

今回はJavaScriptでイベントハンドラを追加する話です。
今回のサンプルコードはIE以外のまともなブラウザで動きます。
IEのサンプルコードは最後のほうにちょろっと載せておきます。


普通にイベントハンドラを追加

var button = document.getElementById("Button");
button.addEventListener("click", onClick, false);

function onClick() {
    alert("クリック");
}

わざわざonClick関数を用意しないで、匿名関数で書くこともできます。


匿名関数を使ってイベントハンドラを追加

var button = document.getElementById("Button");
button.addEventListener("click", function(){
    alert("クリック");
}, false);

では、イベントハンドラを1回だけ実行したい場合はどうしましょうか？
「最初にボタンを押したら何か起きるが、2回目以降は何も起きない」といった状況です。
イベントハンドラの中で「このイベントハンドラを削除する」ってやれば良いですね。


イベントハンドラを削除…？

var button = document.getElementById("Button");
button.addEventListener("click", function(){
    alert("クリック");
    button.removeEventListener("click", /*ここに何を入れればいいの？*/, false);
}, false);

removeEventListenerの第2引数には「削除するイベントハンドラの参照」を入れます。
匿名関数を使ってる場合、これを書けないんですね。
「匿名関数を使ってなければ簡単なのに！ムキー！」とハンケチを噛みしめた時期がありました。
要するに、「今まさに、自分がいるこの関数」の参照を取れればいいんですよね。


完成品

var button = document.getElementById("Button");
button.addEventListener("click", function(){
    alert("クリック");
    button.removeEventListener("click", arguments.callee, false);
}, false);

argumentsがどこから出てきたかというと、これはfunction内で暗黙的に用意されてるオブジェクトです。
その名のとおり、引数に関する情報を持っています。
argumentsを使って可変長引数を処理したりできます。


で、arguments.calleeが「今まさに、自分がいるこの関数」の参照を持ってるというわけですね。
こんなもの、滅多に使うことはないと思いますが、知ってるとハンケチを噛まずに済むかもしれません。
私は噛みました。


最後にIEのサンプルコード。
IEにはaddEventListenerがないので代わりを使います。


完成品(IE版)

var button = document.getElementById("Button");
button.attachEvent("onclick", function(){
    alert("クリック");
    button.detachEvent("onclick", arguments.callee);
});

変更点はこんな感じです。
・関数名がそれぞれattachEvent、detachEventになってる。
・イベント名にonが付いてる。
・第3引数が消えてる。


なんでIEは他のブラウザと足並みを揃えないの？
何なの？
毎回、IEに憤慨してる気がする…。


2013/11/18追記
arguments.calleeは現在、非推奨です。
ということでcalleeを使わないで以下のように書けます。
改めて思ったのですが、JavaScriptってわりとどこでも関数を定義できますね･･･。

完成品(callee使わない版)

var button = document.getElementById("Button");
button.addEventListener("click", function onClick(){
    alert("クリック");
    button.removeEventListener("click", onClick, false);
}, false);

リストをリング状に配置するjQueryプラグイン

リストをリング状に配置するjQueryプラグインを作ってみました。



使い方やダウンロードは以下のページでどうぞ。
デフォルトは英語表示になってるので、右上のラジオボタンで日本語に切り替えてください。
Ring List Plugin


作ってみた感想。
一つ残念なのが、IE9がCSS3のtransformをサポートしていないこと。
何とかできないかな。
もう一つ残念なのが、IE9が「<input type="number" />」をサポートしてないこと。
ただのテキストボックスとして表示されてしまいます。
IE9の残念っぷりは群を抜いています。
あ〜あ。