もっと便利に!jQueryでラクラクサイト制作(実践サンプル付き)

第6回 フェードの活用と簡易ロールオーバー

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

今回は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()を入れたサンプルを見てみましょう。

様々なところに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);
    });
});

様々なところにconsole.log()を入れたサンプルの実行結果

コ様々なところにconsole.log()を入れたサンプルの実行結果

上記のデモを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となっている部分が下記の表示結果です。

サンプル8~9行目

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

サンプル11~15行目

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

サンプル11~15行目

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

サンプル17~31行目

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

サンプル17~31行目

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()を活用してください。

著者プロフィール

長谷川広武(はせがわひろむ;h2ham)

1984年生まれ。出版会社勤務でWeb製作・運用更新の経験を経て,2009年より株式会社24-7に入社。Webサイトの運用更新業務を中心に制作業務を行う。各種CMSのカスタマイズやjQueryを利用したUI設計などを得意とする。ブログではjQueryや日々の思いなど書いたり,自作のjQueryプラグインなどを公開している。

http://h2ham.seesaa.net/


徳田和規(とくだかずのり;5509;nori)

マインドフリー株式会社,ディレクター。Web製作会社にてHTML/CSSコーディングなどの業務を行いながらAjax/JavaScriptに興味を持ち,ブログで自作のjQueryプラグインなどを公開する。2009年9月からマインドフリー株式会社に参加。

http://moto-mono.net/

コメント

コメントの記入