エスキュービズム ラボ Blog

google が Chrome を発表し、なんだか最近はブラウザのスピード競争がホットな話題になっている。

不思議というか、面白いのが「ブラウザの速度」=「Javascriptの処理速度」というのがいつの間にか当たり前のようになっていることだ。

個人的には Javascript の処理速度よりも、サクっと起動して、メモリ消費量が少なく、滅多に落ちない方が嬉しかったりするのだが…

とはいえ、Javascript（以下、js）の処理速度がそれこそ何十倍も早くなってくると、jsをバリバリと活用したサイトが増えてくるだろう。

jsはなんとも不思議な言語で、何しろ様々なブラウザ上で動作するために、逆に言えば同じコードでも「あっちでは動くけど、こっちでは動かない」といった事が多発する。

そのために、Prototype や jquery といったフレームワークという「枠」を越えて言語そのものを拡張してしまったかのようなライブラリも広く普及している。

こんな展開を見せている言語は他にない気がする。

そこでプログラミング（開発）には欠かせない、jsの「デバッグ」というテーマを取り上げてみよう。

かの有名な小飼弾さんが「まだまだ私にも落とすべき目の鱗がいくらでもあることを教えてくれた」と評していた Head First JavaScript の 11章 に載っているサンプルコードを使って、それぞれのブラウザがどんなエラーメッセージを表示するのか比較してみた。

◆参考図書：Head First JavaScript

サンプルコードは 25行目 に

else if average < 50 {

というコードミスがあるものだ。正しくは

else if (average < 50) {

である。ブラウザは全て WindowsXP 上で確認している。

---

◆Internet Explorer 6.0

似たようなメッセージを見たことがある人は多いだろう。

エラーがあったことはわかるが、それ以外は全く役に立たない…

---

◆Firefox 3.0.1

Firebugという有名なアドオンがあるが、ここではブラウザ標準機能を使っている。

エラーの箇所を正確に言い当て、エラーメッセージも英文だけどズバリ正解を指摘している。

さらにメッセージをクリックするとソースウィンドウが開き、エラーの箇所をハイライトしてくれる。

---

◆Opera 9.52

Firefox同様、エラーの箇所を正確に言い当て、エラーメッセージもぱっと見た感じはわかりにくいが正解だ。

おしいのは、Firefoxのようにソースウィンドウが開かないので、別にテキストエディタを使わないといけないことぐらい。

---

◆Chrome 0.2.149.30

唯一、ソースファイルの中にエラーメッセージを埋め込んで表示するタイプ。

エラーが起きている場所を正確に特定できる自信の表れだろうか？

メッセージ内容がわかりにくいが、おそらくまだ汎用的なメッセージしか用意されていないからだと思われる。

---

◆Safari 3.1.2

エラー箇所は正しく指摘してくれたが、エラー内容はイマイチわかりにくい。

メッセージをクリックするとソースが表示されるのは嬉しいけど、メッセージ一覧が消えてしまうので画面切り替えに少し手間がかかる。

---

今後に期待できそうなのが Chrome だけど、現状では Firefox が JS の開発環境としては一番良さそうだ。

たった1つのケースでの比較だけど、エラー内容の正確さだけではなく、開発者の使いやすさを考慮しても Firefox が一番である。

さらに、おそらく多くの人は Firefox に Firebug というアドオンを入れていると思う。

Firebug はさらに細かなデバッグまで可能なので、「なんだ、やっぱり」といった結論だけど、

の構成が最強のようだ。