JavaScript code review 000

今日は指向を変えて、JavaScript の code review をしてみたいと思います。DOM の操作をする以下のような DOM ノードとスクリプトがあるとします。

<div class="description expandTo_500 canToggle">...</div>
<script type="text/javascript">
var someFunction = function (elm) {
  var classes = elm.className.split(' ');
  for( var i in classes )
    if( /^expandTo_[0-9]*/.test( classes[i] ) )
      var lim_char = Number( classes[i].split('_')[1] );
  ...
};
</script>

ぱっと見て、何をするかまぁだいたいわかると思うんですが、この someFunction が実行されると、引数として受け取った element を、その class にある一定の数字を解析して、それによって何かの処理をしたい、ということだと思います。

問題としたいのは以下の 4点あります。

• curly braces の欠如
• array の 列挙
• Number Objectの使用
• 正規表現を有効につかっていない

では順番に見ていきましょう。

curly braces の欠如

文法がそれを許している限り、これは好みの問題だ、という見方もあるんですが、Douglas Crockford によれば “Style isn’t subjective” だそうです。僕もそう思います。Curly braces はいかなる状況でも、省略すべきではないです。

array の 列挙

array 型の内容を列挙する時、JavaScript では、２つの方法があります。

var arr1 = [0, 1, 2, 3, 4];
for (var i = 0, len = arr1.length; i < len; ++i) {
  console.log(arr1[i]);
}

var arr2 = [0, 1, 2, 3, 4];
for (var j in arr2) {
  console.log(arr2[j]);
}

上記の二つの for ループは、基本的に同じことを目的としてしていますし、多くの場合は同じ結果をもたらすと思いますが、後者は違う結果をもたらす可能性があります。for の中で使用される in 演算子はもともと object のプロパティを列挙する為にあって、array の列挙の為ではありません。例えば Array.prototype.foo = '99'; という文がアプリケーションのどこかにあると、それだけで違う結果をもたらします。Crockford氏の jslint を使うと、for (…in…) は object の列挙の時ですら、 hasOwnProperty を一緒に用いないと、警告が出ます。

Number Object の使用

number型、boolean型、string型、には、wrapper クラスが存在するのですが、これを使う十分な理由、というのは僕には考えられません。前にも一度書きましたが、ポインタの比較をしたい時（というのがもしあれば、ですが）に、確かにこれらを使うことはできますが…ここでしているようなことの為なら parseInt で十分でしょう。

正規表現を有効につかっていない

さて最後に、文字列から数字を取り出すのに、split を使うのはもったいないです。せっかく正規表現で確認しているわけですから、一緒に切り出し作業もしてもらいましょう。

というわけで、書き直したコードを以下に。

var someFunction = function (elm) {
  var classes = elm.className.split(' ');
  var matches;
  var regex = /expandTo_(\d+)/;
  for (var i = 0, len = classes.length; i < len; ++i) {
    matches = classes[i].match(regex)
    if (matches) {
      var lim_char = parseInt(matches[1]);
    }
  ...
};

正規表現の一節以外は、ほとんど Douglas Crockford の受け売りになってしまいました。この本を読むと、Crockford氏の JavaScript に対する考え方を理解できると思います。（そして Java のような JavaScript を書くことになると思いますが…まぁそれはまた別の機会に。）