JavaScript開発ツールの現状

Webアプリケーションには欠かせないJavaScriptだが、読者の皆さんはどのように開発しているだろうか? 最近ではAptanaなど、JavaScriptのコーディングを積極的にサポートするIDEも登場してきているし、EclipseやNetBeansの次期バージョンでもJavaScript関連の機能が強化される予定になっている。

しかし現状ではやはりテキストエディタで記述し、ブラウザで動作確認という方法が最も手っ取り早いのではないだろうか。特にFirefoxではFirebugという強力なエクステンションがある。Firebugを使うとHTMLのDOMツリーを参照できたり、JavaScriptをグラフィカルにデバッグすることができるなど、IDE顔負けの機能をFirefox上で利用することができるのだ。FirebugはもはやJavaScript開発に欠かせないツールといっても過言ではないだろう。

Firebugは非常に有名なツールだが、IE上で同様の機能を提供することを目的としたライブラリやツールも存在する。今回はそれらのIE上で利用可能なJavaScriptのデバッグツールを紹介する。

Companion.JS

Companion.JSはIE上でFirebugのデバッグを可能にするものだ。Companion.JSを利用するには別途Microsoft Script Debuggerをインストールする必要がある。

図1 Companion.JS

デバッグとはいってもスクリプトエラー時にエラーメッセージとエラーの発生箇所をハイライトするというもので、Firebugのようにブレークポイントを設定したり、ステップ実行したりといった操作はできない。

Companion.JSをインストールすることで、JavaScriptコード中でFirebugのConsole APIを利用することが可能になる。以下のようにconsoleオブジェクトのメソッドを利用することでログを出力することができる。

console.log("ログを出力");

Console APIを用いて出力したメッセージはCompanion.JSのConcoleタブに表示される。詳細についてはCompanion.JSのConsole APIに関するページを参照してほしい。

なお、DebugBarをインストールすることでDOMインスペクタ、JavaScriptインスペクタ、HTMLバリデータやHTTP/Ajaxビューアといった高度な機能を利用することも可能だ。ただし、Companion.JSは無償で提供されているツールだが、DebugBarに関しては非商用利用に限り無償で利用することができ、商用利用に関してはライセンスを購入する必要があるので注意してほしい。

IE Developer Toolbar

IE Development ToolbarはMicrosoft謹製のIE拡張で、DOMツリーの表示やHTMLタグの属性のリアルタイム編集、スクリプトやCSSの無効化、divやtable要素のアウトライン表示など、Firefoxの拡張機能として有名なWeb Developerと似た機能を提供するものだ。

図2 IE Development Toolbar

直接JavaScriptのデバッグを支援するものではなく、どちらかといえばCSSの編集時などに威力を発揮するツールだが、WebアプリケーションでJavaScriptを利用する際にはHTMLタグのid属性を指定して要素を取得したり、JavaScriptからCSSやHTMLのDOMツリーを操作したりといったことも多い。このような場合にIE Development Toolbarが助けになるはずだ。

まとめ

FirefoxはFirebugやWeb DeveloperなどWeb開発をサポートするエクステンションが多数提供されているが、IEでも今回紹介したようなライブラリやツールを利用することで、Firefoxに近い開発環境を構築することが可能であることがおわかりいただけたことと思う。

Webアプリケーションを開発する際にIEとFirefoxの双方をサポートせざるを得ないことも多いはずだ。FirefoxとIEともに拡張機能を活用してJavaScriptの開発やデバッグに役立てていただければ幸いだ。