月別アーカイブ: 2012年9月

Internet Explorerのみscriptが動かない→console.logの置き忘れを疑え

JavaScriptの便利なデバッグ手段、console.logについて以前のエントリで紹介しました。この命令は特にWebKitブラウザやFirefoxとの相性が良く、変数の中身の確認のためついつい頼りがちです。しかしながら、作成完了したページにこの命令を残したままにしておき、いざクライアントのPCでチェックを行うと、scriptが全く動作せずに恥をかく危険性があります。というのも、Internet Explorerはこの命令をデフォルトでは解釈せず、scriptを止めてしまうからです。

Internet Explorerの場合には、F12で起動する開発ツールが有効になっている場合に初めてconsoleオブジェクトが作成されます。したがって原因がconsoleオブジェクトにあることに気付かなければ、検証のため開発ツールウィンドウを開いた際には作動ということで、症状の発生が不規則→通信の問題ではないか、などとどんどん疑いの対象が広がり収拾がつかなくなります。実は私がこの問題に嵌ったときには、問題の発生したページがAjaxをフルに使ったものであったため、原因の所在が非同期通信の実行順序かIEのJavaScript実行速度の問題かなどと、いつもながらの遠回りに時間を取られてしまいました。

そこで教訓ですが、Internet Explorerだけ動かないという場合には真っ先にconsole.logを疑う。以前のエントリで挙げましたが、Firefoxだけ動かない時には宣言部、ヘッダ部を疑う。とりあえずこのように記憶しておきましょう。


さらっと理解しておきたいjQueryオブジェクト(後編)

前編からひっぱります。

JavaScriptのオブジェクトについて、組み込みオブジェクト、ブラウザオブジェクト、DOMオブジェクトの三項目について説明しましたが、これらのオブジェクトではピリオドで何個もの処理を繋ぐメソッドチェーンの書式が使えません。なぜならメソッドが返す返り値が文字列や数値などバラバラな型であるからで、それは手続き型プログラミング言語のメソッドとして何ら不思議なことではありません。

ただ、HTML文書の要素を対象とした操作をする場合、一度処理を行った要素に連続して処理を与えるというケースが非常に多く、その度に要素の検索を行うのがかなりのオーバーヘッドとなります。そこで、メソッドの結果がまたオブジェクトを参照することで連続して処理を与えることのできるメソッドチェーンの実現に意味があるのです。

jQueryの要素の多くは、自身jQueryオブジェクトである上に、処理の返り値としてもjQueryオブジェクトを返します。ではjQueryオブジェクトとは何かというと、セレクタにより検索、ヒットしたDOM要素の集合を、多数の便利なメソッドの定義されたオブジェクトでラップしている状態です。console.logなどでオブジェクトの中身を確認してみると、単なる文字列として格納されたHTML要素と、ずらりと並んだプロパティ、メソッドがあることがわかります。これらのセットがjQueryオブジェクトです。

メソッドチェーンの終端で、jQueryオブジェクトのメソッドでない、通常のDOMオブジェクトのメソッドを使いたい場合はどうすれば良いでしょうか。たとえば前編で出した動かないプログラムの例ですが、jQueryオブジェクトの正体を知っていれば、このようなアクセスが可能であると予想が立ちますね。

$(".fadeinout")[0].innerHTML = "Hi!";

このように、呪文のようなjQueryと言えども仕組みがわかれば何ということも無いのです。これはjQueryのセレクタエンジンにも言えることなのですが、それはまたいずれかの機会に記事にします。