内容が難しくなる前にFirebugに慣れる！

第1回から第4回まで，jQueryについての各セレクタやメソッドなどを見てきました。各回で簡単なサンプルも載せていましたが，皆さんここまでの内容については問題なくついてこれていますでしょうか？

まだjQueryの基礎について全てを説明し終えてはいないのですが，そろそろスクリプトも長くなってきて，考えることも難しくなってきています。第3回と第4回の内容を振り返ってみても，少しずつスクリプトの量も増えてきているのがわかると思います。この先も，内容が増えていくにつれて，スクリプトも長く，手順をうまく考えなくてはならなくなってきます。

内容がもっと難しくなっていく前に，一度ここで復習をして，この先に備えておきましょう。

Firebugをもっと使ってみる

ここまで，いくつかサンプルなどを紹介してきましたが，まだまだjQueryがいまいち理解できていない人もいると思います。jQueryやHTMLにしろ，Webの技術を覚えるためには，まずは実際にコードを書いてみる事が大切です。しかし，実際にテストのためのHTMLやCSSをかいて，そこにjQueryの練習のスクリプトを書いていくとなると，少し大変ですよね。

そんなときに活用してもらいたいのが，ここまでにも何回も登場している，FirefoxのアドオンのFirebugとFireQueryです。Firebugのコンソールと，FireQueryのjQuerifyを使うことによって，どんなサイトでもjQueryを試してみることができるようになります。

jQueryをすでに使っているサイトなら，そのままコンソールにコードを書いて実行してみるだけですし，jQueryを使っていないサイトでは，一度jQuerifyのボタンを押して，jQueryを使えるようにしてからコンソールにコードを書くだけで，実際に動作するのかや，どんな動作になるかの確認になるのです。

ちょっとしたスクリプトを試してみるような時でも気軽に利用することができるので，練習に最適のツールだと思っています。

gihyo.jpのサイトで練習

gihyo.jpのサイトでjQuerifyを使う場合，第4回でも紹介した通り，$()ではなく$jq()を使い書きます。この違いについては後ほど説明いたします。まずは前回と同じく一つのタグを入れてみましょう。前回はDIV要素を選択しましたが今回はP要素を選択してみましょう。

jQuerifyをクリックし，jQueryを使えるようにした後に，Firebugのコンソールにて$jq('p')を実行。

$jq('p');

ページ中のP要素全てがjQueryオブジェクトとなってコンソールに表示されます。

表示された結果はそれぞれの要素がどこの要素なのかを確認することができます。要素にマウスを乗せると，表示画面上の該当位置の色がかわりますし，また，コンソール上の要素をクリックすることができ，クリックするとFirebugのHTML表示画面にて該当部分のHTMLが表示されます。表示されている画面上での位置と，HTML中のどの要素なのかなどが，そこでチェックすることができます。

複数行になるコードを書くとき

Firebugコンソールの入力部分は2パターンあり，上記の画像などで紹介してきたのは一行で書けるようなコードの時でした。2行以上の複数行にまたがるようなコードを書く場合などは，右下にある赤いボタンをクリックすることで，複数行書ける入力エリアが右側に出てきます。

先ほどの一行入力の時と違い，改行やタブでのインデントなどもつけることが可能です。コード実行際は入力エリアの左下にある「実行」のボタンを押すします。