今回はFirebugの利用とフェード効果を使ったサンプル

前回の第5回では，第1回から第4回までの復習と，Firebugの使い方を主としてみてきました。jQueryについての基本的な使い方に加えて，Firebugの基本的な使い方を押さえていますので，まだ復習をされていない人は，まずはこの先に進むまえに，一度復習をしてから是非読むようにしてください。

さて，今回の内容ですが，今回も前回に引き続きもう少しだけFirebugを使って，jQueryを使ったコードの状態を確認する方法などを見ていく方法と，フェード効果を使った簡易ロールオーバー機能についてをご紹介しようと思います。

コード中のconsole.log()

これまでの回で何度かconsole.log()を使って，Firebugのコンソール上に選択されている要素が何であるかを確認したりしてきたのをおぼえていますでしょうか？前回もconsole.log()の利用方法をいくつか挙げましたが，console.log()を使うと，括弧（）内に指定した値を，Firebugのコンソール上に表示させる(ログとして残しておく)ことができるので，変化の様子を都度追うのに活用することができます。

前回の復習として，一つチェックしてみましょう。

var elements = $('p');
console.log(elements);

この上記のコードを，入れたページを表示してみると下記のような結果になります。

これをFirebugのコンソール上で実行する場合，一度変数の中に入れておき，変数名だけを書いておくことでconsole.log()で指定したのと同じ結果が表示されます。

この変数名だけを書いてコンソールに表示させるのは，あくまでFirebugのコンソール上での指定のみということだけはお忘れずに。

変数の中身を追う

console.log()の便利な点は，コード上のconsole.log()が実行された時点の中身を随時コンソール上に表示してくれるので，コード内での変数の中身の変化なども追うことができます。

コード中の様々な箇所にconsole.log()を入れたサンプルを見てみましょう。

$(function(){
    //elementsにP要素をjQueryオブジェクトを入れる
    var elements = $('p');
    
    //変数elementsをコンソールに表示
    console.log(elements);
    
    //P要素の数をコンソールに表示
    console.log(elements.length);
    
    //変数cをコンソールに表示(この時点ではcの中は空)
    console.log(c);
    
    //変数cに文字を入れる
    var c = 'P要素のテキストを変数に代入';
    
    //変数cをコンソールに表示
    console.log(c);
    
    //P要素の数だけ繰り返す，加算されるiも指定
    elements.each(function(i){
    	
        //each()中のthisはドコを参照しているかコンソールに表示
        console.log($(this));
        
        //変数cにthisのテキストを代入
        c = $(this).text();
        
        //変数cをコンソールに表示
        console.log(c);
        
        //変数iをコンソールに表示
        console.log(i);
    });
});

上記のデモをFirebugで表示すると，コンソール上に以下のような表示がされます。

jQuery(p, p, p, p, p, p, p, p, p, p)
10
undefined
P要素のテキストを変数に代入
jQuery(p)
P要素1番目
0
jQuery(p)
P要素2番目
1
・・・以下略

サンプル8～9行目

変数cの中身が変化していることと，その他の変数やthisの中身はどれを示しているのかなどが表示されるようになります。

結果で2行目「10」となっている部分が下記の表示結果です。

//P要素の数をコンソールに表示
console.log(elements.length);

サンプル11～15行目

結果で3行目で「undefined」となっているのは，そこまでに変数の宣言も何も指定がないので，中身が何もないという結果の「undefined」が表示されます。変数の宣言とそこへの代入を行ったあとは，代入した値が表示されるのも。4行目の結果「P要素のテキストを変数に代入」の表示でわかると思います。

//変数cをコンソールに表示(この時点ではcの中は空)
console.log(c);
    
//変数cに文字を入れる
var c = 'P要素のテキストを変数に代入';

サンプル17～31行目

each()メソッドを使って，P要素それぞれに対して指定しているので，each()内がP要素分繰り返されます。繰り返されている中でそれぞれの値がどのように変化しているのかも，console.log()を入れておくことで毎回の変化を表示してくれます。

span class="comment">//P要素の数だけ繰り返す，加算されるiも指定
elements.each(function(i){
    	
//each()中のthisはドコを参照しているかコンソールに表示
console.log($(this));
        
//変数cにthisのテキストを代入
c = $(this).text();
        
//変数cをコンソールに表示
console.log(c);
        
//変数iをコンソールに表示
console.log(i);
});

「.each(function(i){});」と，eachのfunctionでiなどの変数を入れておくことで，繰り返されている回数が代入されます。（⁠1回目＝0番目）今回のサンプルの場合，P要素が10あるので，each内では10回繰り返し処理が行われます。数値も0スタートなので，最終的にはiの値は9になっています。

このように，console.log()を確認したいところに入れておくことで，変数や要素の確認などをすることができます。自分達も，コードを書くような場合で，うまく動作しないような場合は，このconsole.log()を利用しています。自分が意図した値が入っていないようなこともありますので，自分の書いたコードがうまく動作しないような時に，このconsole.log()を活用してください。