はじめに

このたび，Firefox 3＋Firebugについての連載を書かせていただきます，堀と申します。普段は仕事でJavaScriptやPHPを用いたフロントエンドの開発を行いながら，個人でRoppongi.JSという，JavaScriptのイベントの企画・主催をしております。

この連載では，Firefox 3のリリースに備えて，現在提供されているFirefox 3のベータ版とFirebugによるJavaScriptの開発手法について解説していきます。

第1回はFirefox 3ベータ版とFirebugのインストールから，Firebugによって，どのようなことが行えるようになるかについて簡単に概略を説明していきます。

Firebugとは

FirebugとはHTML，CSS，JavaScriptのための開発ツールを提供するFirefoxアドオンです。このツールによって，あなたのJavaScript開発環境は劇的な進歩を遂げることでしょう。

Firebugのメリット

それではJavaScriptの開発にFirebugを用いるメリットとはなんでしょうか？

大きなところでは，以下の3つがあげられると思います。

• マルチプラットフォーム
• 全て無料
• リアルタイム性

マルチプラットフォーム

まず，マルチプラットフォームですが，FirefoxはWindows，MacOS，Linux全てに提供されており，全て同じ動作を行います。もちろん，そのFirefox向けに提供されているFirebugも全ての環境で同じ動作を行います。これにより，作業環境に左右されず，まったく同じ開発環境をそろえることができます。

全て無料

また，これらのツールは全て無料で配布されています。Linux＋Firefox＋Firebugという環境を選択すれば，それらを導入できるハードウェアさえあれば，今すぐあなたの手元で全て無料の開発環境を構築することができるのです。

リアルタイム性

そして，なんといっても最大のメリットはそのリアルタイム性です。これまでJavaScriptの開発・デバッグといえば，必要に応じてalertで出力，といったケースが多かったかと思います。また，JavaScriptによって編集されたHTMLはこれまで，ブラウザよりソースを確認することができませんでした。

ところが，Firebugを利用することにより，以下の要素を全てリアルタイムに編集・監視することが可能になります。

• HTML
• CSS
• JavaScript

HTMLとCSSの内容，表示はもちろん，JavaScriptのコードからオブジェクトの中身まで，全てをリアルタイムで監視することができます。これにより，あなたのJavaScript開発速度は何倍にも向上するでしょう。

Firefox 3ベータ版とFirebugのダウンロード

まずは，必要なアプリケーションをダウンロードします。

Firefox 3ベータ版のダウンロード

まずはFirefox 3のベータ版をダウンロードします。執筆時点での最新版はFirefox 3 beta5ですが，beta 4以降，Firebugの対応が追いついていないため，ここではbeta 3をダウンロードすることにします。

なお，Firefox 3 beta 3のダウンロード場所は以下のとおりです。

• Windows
• MacOSX
• Linux

Firebugのインストール

Firefoxをインストールしたら起動してFirebugのサイトにアクセスします（図1⁠）⁠。

Firefox 3ベータ版ではFirebug 1.1のベータ版以上を利用する必要があります。ここではFirebug 1.1をダウンロードします。

画面右側にある「Install 1.1 Beta」をクリックしてください。すると，ウィンドウ上部にアドオンのインストールの許可を求めるダイアログが出てくるので「許可」を押してください（図2⁠）⁠。Firebugのインストールが始まります。

以上で，開発のためのすべての準備は完了です。