Firefox 3とFirebugで始めるJavaScript開発

第1回 Firebugの基礎知識と,Firebugを使った開発のメリット

この記事を読むのに必要な時間:およそ 2 分

はじめに

このたび,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のダウンロード場所は以下のとおりです。

Firebugのインストール

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

図1 Firebugのサイト

図1 Firebugのサイト

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

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

図2 Firebugのインストール

図2 Firebugのインストール

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

著者プロフィール

堀邦明(ほりくにあき)

徳山工業高等専門学校卒業後,ヤフー株式会社に入社。Yahoo! JAPAN トップページのフロントエンドエンジニアとして主にJavaScript,PHPによる開発を行う。

また,個人の活動として,JavaScriptに関するオンライン上のイベント「Roppongi.JS」の企画・主催を行う。

トラックバック

  • firefox3をインストールしてみました。

    今日、Ubuntuを7.10から8.04にアップデートさせたんですが、firefox3の出来が予想以上に良かったので書きます。現在、この記事を書いてる時はWinなんですが、Winにも同じくfirefox3を入れてます...

    Tracked : #1  Tatsuya Blog (2008/05/22, 21:30)

コメント

コメントの記入