この作者はJavaScript使いなのか、という疑問 / LiosK-free Blog

この作者はJavaScript使いなのか、という疑問

2007-08-17
カテゴリ: 雑記
タグ: JavaScript トラックバック

今回は弾さんによる訳を見ながらの感想。404 Blog Not Found:怠翻 - JavaScriptでありがちな9つのシマッタ

原文作者のPat Fitzsimmonsという人物は何者なのかよくわからぬ。ソフトウェア起業家とは書いてあるが、このコードを読んでるとなんとなく違和感があるのだが。

コロンの位置

404 Blog Not Found:怠翻 - JavaScriptでありがちな9つのシマッタ

1. 尻カンマ注意

以下のコードはFireFoxでは動きますが、Internet Explorer (以下IE)では問題になります。
var theObj = {
    city : "Boston",
    state : "MA",
}
最後にカンマが入らないよう注意しましょう。

すごい細かいことなんだけど、prototype.js (参照)のコードに見慣れた人だったら、こう書くほうが違和感がないんじゃないかと。

var theObj = {
    city: "Boston",
    state: "MA"
}

オブジェクトを定義するときのコロンはキーの直後。で、コロンと値の間にスペース一つ、というのが慣習的に用いられている気がする。prototype.jsは全てそうだし、盛んに紹介されているYUI (参照)でもそうだ。

ちなみに、行末にカンマを入れればECMAScriptの文法として破綻するからIEの対応は正しい。Firefoxがやさしいだけ。

さらにちなみに、prototype.jsのコーディングには反するが、pre要素の中でコードサンプルを書くときは、

var theObj = {
    city: "Boston",
    state: "MA"
};

と、行末にセミコロンを入れてあげるほうが、pre要素のinnerHTMLをevalして動作サンプルを示すときとかに幸せ。IEではpre要素のinnerHTMLを取得すると、なぜか改行が無視されるので、行末の自動セミコロン挿入 (参照)に依存したり、1行コメント(//)を使ったりすると動かなくなる。

命名法

404 Blog Not Found:怠翻 - JavaScriptでありがちな9つのシマッタ

2. 浮気なthisは何を見てるやら

以下のコードで、thisは何を指しているでしょうか。

<input type="button" value="Gotcha!" id="MyButton" >
<script>
var MyObject = function () {
    this.alertMessage = "Javascript rules";
    this.ClickHandler = function() {
        alert(this.alertMessage );
  }
}();
document.getElementById("theText").onclick =  MyObject.ClickHandler 
</script>

ClickHandlerっていうふうに、大文字でメソッド名を始められると違和感がある。JavaScriptはJavaの命名法に従って、Lower Camel Case (参照)が採用されることが多い。さらに、「フィールド名は名詞、メソッド名は動詞」というルールも結構守られている。alertMessageだと、「メッセージを警告する」っていう動詞に見えるんだが。

(追記): 気づかなかったけど、ClickHandlerはメソッドじゃなくて関数型のフィールドとして使われてるんだね。だとしてもLCCにして欲しいところだけど。; さらに気づかなかったけど、MyObjectはコンストラクタとして定義されてたんだね。名前と使われ方からしてオブジェクトだと思った。この使い方はさらに違和感あるな。

関数オブジェクトを使おうよ

これは弾さんもつっこんでるが。

404 Blog Not Found:怠翻 - JavaScriptでありがちな9つのシマッタ

9. Focus Pocus [訳注:Hocus Pocusのもじり]

var newInput = document.createElement("input");
newInput.id = "TheNewInput";
document.body.appendChild("newInput");
setTimeout("document.getElementById('TheNewInput').focus(); 
document.getElementById('TheNewInput').select();", 10);

[訳者添削:あるいは]

var newInput = document.createElement("input");
newInput.id = "TheNewInput";
document.body.appendChild("newInput");
setTimeout(function(){
    document.getElementById('TheNewInput').focus(); 
    document.getElementById('TheNewInput').select();
}, 10);

弾さんの添削のとおり、setTimeoutには匿名関数を渡すほうが意味がはっきりするし綺麗だしバグが出づらいしクロージャが使えるし…。っていうかインデントが見づらい。

結論

作者の人は、本当にJavaScript使ってコード書いてるのかな？

ってか、コメントでインデントの乱れを指摘されてたり、Firefoxのつづりを間違えてたりと、なかなかいい加減。

LiosK-free Blog