jQueryコーディングの基本的なことからプラグイン化までの注意書き(Webデザイン)

Posted under - Web Design

39

jQuery でのプログラミングの、基本的なことからプラグインを作るところまで、初心者の頃につまずいた部分を中心にまとめてみました。公式ドキュメントなどで使われている、少し難しい印象の専門用語も織り交ぜながら書きました。jQuery で Webデザインのパーツを作るときの注意書きという感じです。

jQuery Programming

Webサイトを作るとき、私的にはとってもよく使っている jQuery。jQuery を勉強しだしたころは、自分の書いたコードが動いたりするのが、とっても楽しくて嬉しかった覚えがあります。私はあまり JavaScript でのコーディングが得意ではないので、今でもよく jQuery を使ってコーディングしてます …。

以前:CSSは分かるけど jQuery は苦手 … という人が jQuery に親しんでくれるといいなーと思って書きました という記事を書いたのですが、今回はその復習 & jQuery コーディングの注意書きといった感じのブログです。

内容的には、初心者のころから勉強してきたコーディングの基本的なことや、私なりに注意しているポイント、そしてプラグイン化まで … といった注意書きです。

また、最後はアコーディオンを作ってプラグインにまとめていますが、「こう書いた方が効率的だよー!」とか「こうした方がパフォーマンス的にいいよ!」などがあったら、教えていただけるとうれしいです。

jQuery コーディング 目次

  1. jQueryの一番小さな基本形
  2. jQuery のセレクタはCSSでお馴染みのものばかり!
  3. 要素に「何か」をするメソッド
  4. プログラムの動くきっかけ … イベント系メソッドとイベントハンドラ
  5. ちょっと寄り道 … 予備知識 – DOMとは?
  6. イベントハンドラと自己参照変数 this
  7. ひとつの処理が終ったら、次の処理を実行する – コールバック
  8. それぞれの要素に対して処理を実行する – each()メソッド
  1. ちょっと寄り道 … DOM要素とjQueryオブジェクト
  2. this の中身は記述場所によって違うので気をつけよう!
  3. アコーディオンを作りながら復習してみよう!
  4. ちょっと寄り道 … 変数 this の中身は?
  5. アコーディオンの汎用化に挑戦!
  6. プラグイン化に挑戦!
  7. オプションを設定できるようにしてみよう!

1. jQueryの一番小さな基本形

まずは jQuery のコーディングの基本中の基本の部分、セレクタメソッドを使った一番小さな基本形について。HTML + CSS は分かるけど、jQuery は初めて … という人には、セレクタとかメソッドって何?っていう人もいると思うので、jQuery の基本形に入る前に少しだけおさらい。ここでちょっと CSS のコードを例えにしてみます。

CSSの基本形

CSSの書き方

CSSでは、1セレクタで要素を指定して、それに対して 2プロパティを指定してスタイルをつけていきますよね。例えば h1 のフォントのサイズを大きくしたい … という場合は、下記のようにセレクタで指定して、プロパティと値を記述します。

  • h1 { font-size: 200%; }

これが jQuery の書き方とどこが関係があるのかというと、ちょっとこの CSS の書き方に考え方が似ているんです。

jQueryの基本形

jQueryの書き方

この書き方が jQuery の一番小さな基本的な記述の仕方です。まず jQuery も CSS のように、1セレクタで HTMLソース上の要素を指定することから始めます。

続いて 2メソッドというもので、セレクタで指定した要素に対して何らかの処理をしていきます。処理って何だろう … と思う人もいるかもしれませんが、ここではセレクタで指定した要素に対して「何かをする」という感じです。またメソッドにはパラメータを指定したりしますが、CSS でいうと値 … にあたるイメージです。

Attention

メソッドの中に記述するものは、正確にいうとパラメータだけではないんですけど、CSS と比較しやすいようにとりあえずパラメータと書いています。

CSS ではプロパティと値でスタイルを変更しましたが、jQuery のメソッドではいろんなことができます。例えば … フェードやスライドでアニメーションさせたりすることだってできるし、画像の src 属性を変更して、別の画像に取り替えることだってできちゃいます。これがさっき言ってた何かをする処理の部分です。

ここではセレクタに対して、メソッドで「何をするか?」を指定していく … というイメージをつかんでいただければいいかな?と思います!

POINT
  • jQuery の基本形は、セレクタで要素を指定してメソッドで何かをする。

2. jQuery のセレクタはCSSでお馴染みのものばかり!

さっきも書いたとおり、jQuery も CSS と同じように、HTMLソース上の要素に対して何らかの処理をしていきます(HTMLソース上以外のものも扱えますが …)。その HTMLソース上の要素を指定するのがセレクタの部分です。これは CSS のコーディングと同じ感覚ですね!

セレクタ

そしてこのセレクタは、基本的に $() で囲んで記述します。でもセレクタは CSS でお馴染みのものばかりなので、すでに HTML + CSS を使っている人にはおさらい感覚で学習できると思います。

お馴染みのセレクタ

  • $("#header") … IDセレクタ
  • $(".attention") … クラスセレクタ
  • $("li a") … 子孫セレクタ
  • $("#header, #footer") … グループセレクタ
  • $("h2 + h3") … 隣接セレクタ
  • $("li > ul") … チャイルドセレクタ

といった具合です。$() の中に、ダブルクォーテーション(")やシングルクォーテーション(')で囲んで記述するだけで、セレクタ自体は CSS のセレクタと同じです。

もちろん上記以外のセレクタもたくさんありますし、疑似クラスや CSS3 のセレクタだって使えます。IE8 や IE7 などの CSS3 未対応ブラウザに対しても、CSS3 のセレクタが jQuery では使えます!

疑似クラスセレクタや CSS3 のセレクタ
  • $("li:last-child") … :last-child疑似クラス
  • $("li:not(:first-child)") … 否定疑似クラスと:first-shild疑似クラスの組み合わせ
  • $("li:nth-child(2)") … :nth-child疑似クラス
  • $("li:has(ul)") … :has疑似クラス

こんな風に基本的に CSS で利用しているものが使えるので、セレクタでの要素の指定は特に難しくないですね!

また、jQuery 独自のセレクタ(フィルター)もあるので、慣れてきたら公式サイトなどでチェックしてみてください。

POINT
  • セレクタで HTMLソース上の要素を指定する!

MEMO

先程「jQuery も HTMLソース上の要素に対して何らかの処理をしていきます。」と書きましたが、jQuery は HTML ソース上以外のものに対して処理を行うこともできます。Webデザインだと HTML ソース上のものに対して処理をすることが多いので、こういう表現をしています。

また、jQuery 2.0からは(2012年11月現在のバージョンは 1.8.3)、IE8 以下はサポート外になることが決まっているようです。

3. 要素に「何か」をするメソッド

次は「一番小さな基本形」の後ろの部分、メソッドの部分を見ていきます。

メソッド

さっきも書きましたけど、jQuery の基本形は、セレクタで要素を指定して、それに対して何らかの処理を加えます。この処理の部分がメソッドという部分です。命令文って思ってもらって差し支えないと思います。例えば「画像をフェードインで表示させる … 」というプログラムで例えると、「画像」がセレクタ「フェードインで表示させる」の部分がメソッド(命令)の部分です!

POINT
  • セレクタで指定した要素に「何か」をするのがメソッド!

メソッドは本当にたくさん用意されているので、全部はとても紹介しきれませんが、大きく分類すると下記のようなものに分類できます。

3.1. CSS系メソッド

CSS系メソッドでは、要素の CSS を操作したりすることができます。代表的なものを見ていきますね!

css()

css()メソッドは、要素のスタイル(CSS)を操作するメソッドです。

  • 例)$("p").css("color", "pink");
    … p 要素の CSS を変更して、カラーをピンクにする。

下のボタンを押すと、ここのテキストカラーがピンクになります!


addClass()

addClass()メソッドは、要素にクラスを追加するメソッドです。

  • 例)$("li:first-child").addClass("first");
    li:first-child に「first」というクラスを付ける。

下のボタンをクリックすると、クラスが付いてスタイルが変わります。


removeClass()

removeClass()メソッドは、要素のクラスを削除するメソッドです。

  • 例)$("a.active").removeClass("active");
    a.active から「active」というクラスを削除する。

クラスが付いているのでテキストがピンクですが、下のボタンを押すと、クラスが削除されます。


もちろん他の CSS系のメソッドもあるので、公式サイトでチェックしてみてください!

3.2. HTML/属性操作系メソッド

HTML/属性操作系メソッドでは、HTMLソース上のマークアップを書き換えたり、新たに挿入したりすることができます。

text()

text()メソッドは、要素内のテキストを置き換えるメソッドです。

  • 例)$("h1").text("テキスト置き換え!");
    h1要素のテキストを「テキスト置き換え!」にしちゃう。

ここに書かれているテキストは、下のボタンを押すと変わります。


html()

html()メソッドは、要素内のマークアップを置き換えるメソッドです。

  • 例)$("#pagination").html('<a href="#">Prev</a><a href="#">Next</a>');
    #pagination の中を、<a href … で置き換える。

ここは em要素でマークアップしていますが、下のボタンを押すと、a要素でのマークアップに変わります。


append()

append()メソッドは、要素の最後にマークアップを挿入するメソッド。先頭に挿入する prepend()メソッドもあります。

  • 例)$("#slider").append('<img src="image.jpg" alt="">');
    #slider 内の最後に <img src … を挿入する。

リストは 2つだけですが、下のボタンを押すと、末尾にもうひとつ追加されます。

  • リスト1
  • リスト2


attr()

attr()メソッドは、要素の属性を操作するメソッド。title 属性や alt 属性など、いろんな属性を操作できます。

  • 例)$("#photo img").attr("src", "images/cake.jpg");
    #photo 内の img要素の src属性を、”images/cake.jpg” にする。

下のボタンをクリックすると、img要素の src属性を変更します(画像が変わる)。


val()

val()メソッドは、フォームで使われる input 要素などの value 属性を操作するメソッドです。

  • 例)$(input.textbox).val("入力してください")
    クラス textbox が付いた input 要素の value 属性を「入力してください」にする。

下のボタンをクリックすると、テキストフィールドの value 属性の値が変わります。


もちろんもっとたくさんの HTML、属性系のメソッドがありますので、公式サイトでチェックしてみてください!

3.3. ちょっと寄り道 … メソッドでの操作と値の取得

CSS や HTML系のメソッドでは、CSS のコードや HTMLソースを操作する … といった感じで紹介しました。でも操作だけでなく、取得することもできます。例えばある要素の高さを知りたいなーとなったとき、下記のように記述すれば「高さ」を取得することができます。

  • var boxHeight = $("#column").height();

コードの書き方はちょっと置いておいて …。height()メソッドは要素の高さを操作するメソッドです。height(300)とすれば、その要素の高さを 300px にすることができます。

でも上記のように height() と、() 内を空にすれば、高さを取得することができます。例えば val() メソッドも、val() と空にすれば value 属性の値を取得できます。取得してどうするの?って思うかもしれませんが、ここでは「値を取得することもできる!」っていうことをチェックしておいてください。

3.4. エフェクト系メソッド

エフェクト系メソッドは、アニメーション効果を付けるメソッドです。見た目にも楽しいメソッドです!

fadeOut()

fadeOut()メソッドは、要素をフェードアウトさせるメソッドです。反対に fadeIn()メソッドはフェードインです。

  • 例)$("#photo img").fadeOut("slow"); … #photo 内の img要素をゆっくりフェードアウトで非表示にする。

下のボタンを押すと、フェードアウトで非表示になります。


fadeTo()

fedeTo()メソッドは、指定した不透明度にフェードしてくれるメソッドです。パラメータにはスピードと不透明度の両方を記述します。

  • 例)$("#photo img").fadeTo(400, .5);
    #photo 内の img要素を 400ミリ秒のスピードで、不透明度 .5 にフェードする。

下のボタンを押すと、画像の不透明度が変わります。


slideDown()

slideDown()メソッドは、要素をスライドしながら表示(開くっていうイメージです)します。反対のメソッドに slideUp()メソッドがあります。

  • 例)$(".submenu").slideDown("fast");
    クラス submenu の要素をスライドしながら表示します。

下のボタンを押すと、スライドダウンしながら画像が表示されます。


hide()

hide()メソッドは、要素を小さくしながら非表示にするメソッドです。

  • 例)$(".submenu").hide("slow");
    クラス submenu の要素をゆっくり非表示(display: none)にします。パラメータ(スピード)指定しないと、一瞬で非表示になります。反対のメソッドに show()メソッドがあります。

下のボタンを押すと、画像が非表示になります。


もちろんもっとたくさんのエフェクト系メソッドもあります!

ちょっと駆け足気味に紹介しましたけど、この他にもトラバース系Ajax 系などいろいろなメソッドがあります。公式サイトのドキュメントなどを参考にしてみてください。今回は長くなりそうなので、ここまでにしますね!

こんな感じで jQuery にはたくさんのメソッドが用意されています。はじめのうちは、ひとつひとつを覚えるのは大変かもしれませんが、実際にコードを書き出すと、代表的なものはすぐに覚えられると思います!

4. プログラムの動くきっかけ … イベント系メソッドとイベントハンドラ

ここまで紹介してきたメソッドを使うと HTMLソースや CSS を操作したり、アニメーション効果を付けたりすることができます。でもプログラムを動かすには、何かしらのきっかけを与えてあげることが少なくありません。例えばクリックしたときとか、マウスを乗せたのをきっかけにして、画像をフェードさせたりする … という感じです。

そういったきっかけ(イベントといいます)を設定するのがイベント系メソッドです。さっきまでのメソッドは、要素に対して何かをするという命令でしたが、イベント系メソッドは「要素に何かをしたときに … 」という命令になりますね!

イベントのイメージ

リスト型メニューなどで、「クリックしたら、サブメニューを表示させる …」とか。

そしてイベント系メソッドは、他のメソッドと組み合わせて使うのが基本です。「クリックしたらフェードアウトする」という場合は、click()メソッドと fadeOut()メソッドを組み合わせて使うことになります。

  • $("#trigger").click(function(){
  •      $("#photo img").fadeOut("fast");
  • });

上記のコードは、#triggerクリックしたら、#photo 内の img 要素を、フェードアウトで非表示にするというコードです。ちょっと今までと違って、少し複雑な感じがしますね。今まで jQuery の基本構文は、$(セレクタ).メソッド() という記述だと説明しましたが、これとはちょっと違う気がします … 。

イベント系のメソッドを記述するときは、下記のように記述します!

イベント系メソッド

1のメソッド(イベント系メソッド)の()の中に、function(){ … } と記述します 2。何だか (){} が多くて、初心者のころはよく混乱しました …。一個でも多かったり少なかったりすれば、当然エラーになってしまいます。

でもイベントメソッドの()の中に、2function(){ … } という部分がすっぽり入ってるので、整理して落ち着いて考えればすぐに慣れると思います。

そしてこのイベント系メソッドの中に記述された function(){ … } の部分は、イベントハンドラと呼んでいます。

イベントハンドラ

イベントハンドラっていう言葉が少し難しい印象ですが、ハンドルっていう言葉に変えて考えてみると分かりやすいと思います!

ハンドルっていうのは、自転車とかにもついていて、自転車を操作するものですよね。このイベントハンドラも、メソッド(クリックとかマウスホバーとか)をきっかけに、対象物を操作するっていうイメージです!

前述した図で見ると、メソッド() の () の中にすっぽりイベントハンドラが入ってるのが分かりやすいと思います。function(){ … } がイベントハンドラで、あくまでイベントメソッドの () の中に収まってるっていう風に整理して考えると、(){} が多くても、混乱しないでコードを読み解けるかなーと思います。

そしてやっぱり jQuery の基本構文の記述形式になっているのも理解していもらえると思います!

jQuery の基本形

それではイベント系メソッドの代表的なものを簡単にご紹介していきます!

click()

click()メソッドは、クリックしたとき … を設定するメソッドです。

  • 例)$("#trigger").click() … #trigger をクリックしたら …。

下のボタンをクリックすると、画像が切り替わります。


mouseenter()

mouseenter()メソッドは、マウスをのせたとき … を設定するメソッドです。

  • 例)$("#trigger").mouseenter() … #trigger にマウスを乗せたら …。

下のボタンにマウスを乗せると、画像が切り替わります。


mouseleave()

mouseenter()メソッドは、マウスが外れたとき … を設定するメソッドです。

  • 例)$("#trigger").mouseleave() …#trigger からマウスが外れたら …。

下のボタンにマウスを乗せただけでは変化はありませんが、マウスを外すと画像が切り替わります。


hover()

hover()メソッドは、mouseenter / mouseleave を一緒に設定できるメソッドです。

  • 例)$("#trigger").hover(handler1, handler2)
    マウスをのせたとときは handler1 を実行、マウスが外れたときは handler2 を実行します。

下のボタンにマウスを乗せると、画像が切り替わり、マウスを外すと再び変わります。


focus()

focus()メソッドは、フォーカスしたとき … を設定するメソッドです。反対にフォーカスが外れたときは、blur()メソッドを使います。

  • 例)$("textarea").focus() … textarea がフォーカスされたら …。

下のテキストフィールドをフォーカスすると、value 属性の値が変わります。


もちろん他にもある(ウインドウがスクロールしたら … とか、キーが押されたら … など)のですが、クリックとかホバーは、Webデザインでは特に使うことが多いと思います。公式サイトのドキュメントもチェックしてみてくださいね!

POINT
  • イベント系メソッドは、「プログラムの動くきっかけ」を設定する。
  • イベント系メソッドには、イベントハンドラを記述する。
  • それでもやっぱり基本形の記述になってます!

Attention

イベントハンドラは function(){ … } と書く … と説明していますが、これは必ずという訳ではありません。イベントハンドラはイベントメソッドで実行させる処理のことなので、記述の仕方はいろいろです。また、今回は省略しますが、イベントハンドラにはイベントオブジェクトというものを渡すこともできたりします。

この記事は基本的な記述をしています …。それが function(){ … } という書き方 … という風に思っていただければと思います。

5. ちょっと寄り道 … 予備知識 – DOMとは?

JavaScript を学習すると、必ずと言っていい程登場するのが DOM(Document Object Model / ドキュメント オブジェクト モデル)という言葉。DOM というのは、HTML 文書や XML 文書の API(Application Programming Interface / アプリケーション プログラミング インターフェース)です。少し難しい言葉ですが、既に JavaScript を学習したことがある人にはお馴染みの言葉だと思います。

前半では jQuery のセレクタを使って、HTMLソース上のいろいろな要素にアクセスしました。また HTML系メソッドでは HTMLソースを変更したりもできます。このようにプログラムから HTMLソース上の要素にアクセスしたり変更できるのも、この DOM という仕組みのおかげなんです。

DOM は HTMLソースとプログラムをつなぐための架け橋のようなもの(インターフェース)。この DOM のおかげで、JavaScript などのプログラム言語で HTML ソースを操作することが可能になるんですね!

  • MOZILLA DEVELOPER NETWORK

    DOM

6. イベントハンドラと自己参照変数 this

jQuery でコーディングをすると、必ずと言っていいほど利用する自己参照変数 this。この変数 this を理解していないと、jQuery のコーディングはちょっと無理 … というくらい大事なものですね。this っていうのは、英語で「これ」とか「この」という意味の言葉ですが、変数 this っていうのは何でしょう?

まず this を説明するために、下記のサンプルを見てくださいね!サンプルには 2つのテキストフィールドがあります。そしてテキストフィールドをフォーカスしたときに、value 属性の値を「フォーカスされました!」に変更したいと思います。

HTML
  • <input type="text" class="textbox" value="お名前" />
  • <input type="text" class="textbox" value="メールアドレス" />
jQuery
  • $(".textbox").focus(function(){
  •      $(".textbox").val("フォーカスされました!");
  • });

この jQuery のコードを実行した場合、どっちかひとつテキストフィールド(.textbox)をフォーカスしたとき、どんな結果になるでしょう?

複数のテキストフォームで試してみると …

両方に処理が実行されちゃう

フォーカスしたところだけでなく、両方に処理が実行されちゃう …。

どれかひとつをクリックしても、全部のテキストフィールド(.textbox)の value 属性が「フォーカスされました」に変更されてしまいます。さっきのコードでは、
$(".textbox").val("フォーカスされました") となっているので、全ての .textbox の value 属性が変更されるのも当然ですね。

でも、フォーカスしたところだけ「フォーカスされました」に変更したいと思ったのに …。そこでイベントハンドラ内のセレクタを、.textbox ではなく、自己参照変数 this を利用して書き直してみます。

  • $(".textbox").focus(function(){
  •      $(this).val("フォーカスされました!");
  • });
SAMPLE

するとキチンとフォーカスしたところだけ、「フォーカスされました!」に変更されるようになりました!

イベントハンドラ(function(){ … } の部分)の中に書かれた変数 this は、このようにイベントが発生している要素を指定するもので、予め jQuery で用意されている便利な自己参照変数なんです!イベントが発生している要素 … というのは、この例でいったら「フォーカスされた .textbox」ということになります。

POINT
  • イベントハンドラ内の this は、「イベントが発生している要素」

7. ひとつの処理が終ったら、次の処理を実行する – コールバック

プログラミングしていると、ある処理を終らせてから次の処理をしたい場合がでてきます。例えば … アニメーションが終ってからメッセージを表示するとか、あるファイルを読み込んでから実行させたいとか …。

そんなときに利用できるのがコールバックという仕組みです。例えば以下のようなコードがあったとします。

  • $("#photo1").fadeOut(1000);
  • $("#photo2").fadeOut(1000);

#photo1(画像)を fadeOut()メソッドでフェードアウトさせます。そして #photo2(画像)も同じようにフェードアウトさせています。

サンプルでは、ボタンをクリックするとふたつの画像が同時にフェードアウトして消えていきます。

SAMPLE


コールバックを使ってみよう!

今度はコールバックを使ってみます。コールバックは、「最初の処理が完了してから、次の処理を実行する」というものなので、ひとつめのアニメーションが完了してから、ふたつのアニメーションを開始します!

  • $("#photo1").fadeOut(1000, function(){
  • 	$("#photo2").fadeOut(1000);
  • });
SAMPLE

ひとつ目のfadeOut() メソッドの () の中に、function(){ ... } がすっぽり入っています。この部分がコールバックです。コールバックは元のメソッドが実行されると呼び出され、元のメソッドが終了してから実行されます。なのでひとつ目のアニメーションが終ってから、ふたつ目のアニメーションが開始される … という訳なんです!

そしてコールバックは、下記のように記述します。

callback

1のメソッド中、パラメータの後に、カンマ(,)で区切って 2function(){ ... } と記述します。

イベントハンドラと書き方が似ていますね。でもイベントハンドラは、イベントメソッドの中に書くものです。ごっちゃにならないように注意しましょう!

また、メソッドの中にはパラメータを記述します(例えばアニメーションならスピードなど)が、これはひとつとは限りません。例えば fadeTo()メソッドの場合は、アニメーションのスピードと不透明度のふたつを記述しなくてはいけないので、fadeTo("slow", 1, function(){ ... }) とふたつ記述します。

また、後で紹介しますが、each()メソッドのようにパラメータを指定しないメソッドもあります。その場合は、each(function(){ ... }) というように記述します。

やっぱり基本形になっています!

イベントハンドラのときと同じように、(){}、カンマ(,)などが増えて混乱しそうですけど、それでもやっぱり下記のような基本形、$("セレクタ").メソッド() になっているので、どこからどこまでがコールバックで … というように整理して考えると変わりやすいと思います!

基本形

POINT
  • コールバックはメソッドの中に記述して、次の処理を呼び出すための記述です。
  • ひとつ目の処理が終ってから、次の処理を実行します!
コールバックが使えるメソッド

コールバックが使えるメソッド

コールバックが使えるメソッドは、公式ドキュメントに [callback] って書いてあります!画像は fadeIn メソッドです。

Attention

コールバックは function(){ … } と書く … と書きましたが、これは必ずという訳ではありません。コールバックは最初の処理が呼び出されたあとで実行される処理のことなので、記述の仕方はいろいろです。

function(index){ … } などとして、引数を渡すこともできます。この記事では基本的な記述をしています …。それが function(){ … } という書き方 … という風に思っていただければと思います。

7.1. コールバックの由来

コールバックという言葉は、ちょっと難しいイメージの言葉ですが、言葉の由来を知ると「なるほど!」って思ってもらえるかなー … と思ったので、ちょっと由来を書いておきますね!

MEMO

コールバックというのは、電話をかけ直すという意味の言葉です。まずあなたが誰かに電話をします。そしてその人に電話をかけ直してもらうことにしました。そこで一度電話を切りますよね。ここまでが最初の処理になります。電話を切った時点で最初の処理は終了です。そして相手からもう一度電話がかかってきます。これが次の処理です。基本的にひとつの処理が終ったら次、また次 …といった感じで繰り返していくイメージです。

8. それぞれの要素に対して処理を実行する – each()メソッド

each()メソッドも jQuery のコーディングではとってもよく使うメソッドです。each という単語は、英語で「それぞれ」とか「めいめい」という意味の言葉ですね!each()メソッドと利用すると、それぞれの要素に対して、要素の数だけ処理を実行してくれます。

言葉だと説明が難しいので、下のサンプルを見てください。

HTML
  • <input type="text" class="textbox" value="お名前" />
  • <input type="text" class="textbox" value="メールアドレス" />

さっきも登場したマークアップです!value の値は、それぞれ「お名前」、「メールアドレス」となっています。これを val()メソッドを使って「デフォルトの値は、お名前です!」とか「デフォルトの値はメールアドレスです!」に変更したいと思います。

jQuery
  • var defaultValue = $(".textbox").val();
  • $(".textbox").val("デフォルトの値は" + defaultValue + "です!");

下のサンプルのボタンを押してみてください。

SAMPLE

これだと両方とも「デフォルトの値はお名前です!」になってしまいます …。そこで each()メソッドを使ってみます。

  • $(".textbox").each(function(){
  •      var defaultValue = $(this).val();
  •      $(this).val("デフォルトの値は" + defaultValue + "です!");
  • });

each()メソッドのコールバック(function(){ … })にさっきのコードがすっぽり入っています。また、コールバック内の .textboxthis と書き直しています。

下のサンプルのボタンを押してみてくださいね!

SAMPLE

each()メソッドは、それぞれの要素に対して、要素の数だけ処理を実行してくれます。なのでコールバックの部分は、上記の例では 2回実行されて、別々の値もキチンと反映される … っていう仕組みです!

そして each()メソッドのコールバックの中でも、自己参照変数 this が使えます。イベントハンドラ内の this は、「イベントが発生している要素」でしたが、each()のコールバック内の this は、「処理中の要素」ということになります!

POINT
  • each()メソッドを使えば、それぞれの要素に対して、個別に処理することができる!
  • each()メソッドのコールバックでは、変数 this が使えます。
  • each()メソッドのコールバックの変数 thisは、「処理中の要素」。

9.ちょっと寄り道 … DOM要素とjQueryオブジェクト

jQueryでは $(セレクタ)と記述して、HTMLソース上の要素を取得することができました。また、いろいろなメソッドで要素を操作することもできました。もちろん JavaScript で同じことができたりします。例えば下記の HTMLソースを見てください。

HTML
  • <h2 id="headline">テキストを置き換えてみよう</h2>

この #headline を取得してテキストを置き換えたいとき、jQuery では以下のように書きますよね。

jQuery
  • $("#headline").text("jQueryでテキスト置き換え");

これを jQuery を使わないで、JavaScript で記述すると下記のようになると思います。

JavaScript
  • document.getElementById("headline").innerText = "JavaScriptで文字列置き換え";

document.getElementById("headline") で HTMLソース上の #headline を取得して、innerText で文字列を置き換えます。ではふたつを組み合わせて下記のように記述することができるんでしょうか?jQuery も JavaScript ですからできそうな気がしますよね?

jQuery?
  • document.getElementById("headline").text("jQueryでテキスト置き換え?");

これは … できないんです。でもどうしてなんでしょう?これは取得した #headline に、DOM要素jQueryオブジェクトという違いがあるからなんです。

9.1. DOM要素

JavaScript では、document.getElementById("headline") とすると、HTMLソース上の #headline を取得することができました。

JavaScript
  • var obj = document.getElementById("headline");

変数 obj の中には #headline がついた h2 要素が代入されています。これは DOM でアクセスした <h2 id=”headline”>テキストを置き換えてみよう</h2> という要素そのものです。これを DOM 要素と呼んだりします。

9.2 jQueryオブジェクト

それでは jQuery で取得した要素は DOM 要素とどう違うんでしょう?

jQuery
  • var obj = $("#headline");

ここで 変数 obj に入っているのは単なる DOM 要素ではなく、jQuery オブジェクトといいます。イメージとしては、DOM 要素を jQuery で操作できるように加工したもの … といった感じです。

jQuery のメソッドを利用するには、このように単に要素を取得するだけでなく、jQuery オブジェクトに加工してあげなくてはなりません。そしてこの jQuery オブジェクトにしている部分が $() なんです。

JavaScript & jQuery
  • var obj = document.getElementById("headline");
  • $(obj).text("jQueryで文字列置き換え");

こうすると単なる DOM 要素だった変数 obj も、jQuery オブジェクトに加工されて、jQuery のメソッドを利用できるようになるんですね!

10. this の中身は記述場所によって違うので気をつけよう!

これまで何度が登場した変数 this。イベントハンドラ内に記述された this「イベントが発生している要素」で、each()メソッドの中に書かれた this「処理中の要素」だと書きました。

そして jQuery のコードを書いていくと、each()メソッドやイベント系メソッドを複数使うことも少なくありません。例えばさっきのコードに focus()メソッドを加えてみます。

HTML
  • <input type="text" class="textbox" value="お名前" />
  • <input type="text" class="textbox" value="メールアドレス" />
jQuery
  • $(".textbox").each(function(){
  • 	var  defaultValue = $(this).val();
  • 	$(this).focus(function(){
  • 		$(this).val("デフォルトの値は" + defaultValue + "です");
  • 	});
  • });

下のサンプルは、フォーカスすると値が変わります。

SAMPLE

まず .textbox に対して、each()メソッドで「それぞれ」に処理を実行します。なので each() のコールバックに書かれた黄色い部分の this は、処理中の .textboxです。

そして青い this は、さらに focus() メソッドのイベントハンドラ内にあるので、「処理中の .textbox」のうちの「フォーカスされた .textbox」になります。

ちょっとややこしいですけど、ここでは this は記述されている場所によって、中身が変わるっていうことだけ覚えておいてください!

POINT
  • this は記述されている場所によって中身が変わるので注意!

11. アコーディオンを作りながら復習してみよう!

アコーディオンは省スペース化するときにとっても便利な UI ですね。タイトル部分をクリックすると、その部分が開き、今まで開いてた部分が閉じるっていう感じです。これを jQuery を利用して作っていくことにします。

jQueryで作るアコーディオン

タイトル部分(dt要素)をクリックすると、パネル(dd要素)が開きます!

まずは HTML のマークアップがどうなっているかを見てみます。シンプルに作成していきたいので、今回は dl要素を使ってみます。

HTML
  • <dl class="accordion">
  • 	<dt><span class="icon"></span>HTML</dt>
  • 		<dd>Hypertext …省略... </dd>
  • 	<dt class="active"><span class="icon"></span>CSS</dt>
  • 		<dd>Cascading …省略... </dd>
  • 	<dt><span class="icon"></span>JavaScript</dt>
  • 		<dd>プラウザで動作 …省略...</dd>
  • 	<dt><span></span>jQuery</dt>
  • 		<dd>JavaScript …省略...</dd>
  • </dl>

マークアップ自体は、.accordion というクラスが付いた dl 要素でマークアップされてます。また、タイトル部分となる dt 要素には、一カ所だけ .active というクラスが付いています。span 要素もマークアップされていますが、これはハートのアイコンを表示するためのものです。

まずは HTML だけのとき、どんな風に表示されるかを見てみます。

HTML + CSS のとき

HTML + CSS

当然全部のパネル(dd 要素部分)は開いた状態で表示されます。これをアコーディオンにするには、どんな風にコーディングしていけばいいでしょう?jQuery でコードを実際に記述していく前に、どういう流れで作っていけばいいのかを考えてみることにします。

考え方
  • active 部分以外の dd 要素を隠す。
  • dt 要素をクリックしたら、開いている dd 要素は閉じて、クリックした部分の dd 要素を開く。
  • CSS でデザインしやすいように、開いている部分の dt 要素にはクラス(.active)を付ける。

言葉でイメージすると、こんな感じでしょうか?こんな風にして、コードを書く前にはどんな風に組み立てていくかを考えてみることが始まりだなーと思っています。

まだいろんなメソッドなどを把握していないうちは、こんな風にイメージを組み立てることも難しく感じるかもしれません …。でも慣れてきたら、どうやって組み立てていくのかを考えるのもとても大事なことだと思います!

それでは「考え方」を踏まえて、実際に jQuery でコーディングしていきます。

11.1. STEP1 – 開いてる dd 要素を閉じることからはじめよう!

さっきチェックした「考え方」では、.active 部分以外の dd要素は隠す … ということでした。要素を隠すには、どんなメソッドを使えばいいかというと、hide()メソッドが便利です!それでは hide()メソッドを使って、dd 要素を隠して(display: none)しまいます。

hide()メソッドで隠しちゃう

hide()メソッドを使って、dd要素を隠してしまう!

jQuery
  • $(function() {
  • 	$(".accordion > dd).hide();
  • });
Attention

上記のコードには、$(function(){ ... }); という記述がありますが、これは「ページが読み込まれたら、jQuery のコードを実行する」という意味です。詳しくは過去記事を見てみてくださいね!

それではコードに戻ります。チャイルドセレクタを利用して、.accordion 直下の dd 要素を隠しました。… つまり … 全部の dd 要素です …。でも「考え方」では「.active 部分以外の dd 要素を隠す」でした。そこでセレクタを工夫して、「dt.active の隣りの dd要素以外」を隠すようにしてみます。

  • $(".accordion > dd:not('dt.active + dd')").hide();

:not 疑似セレクタで、:not( ... ) とします。こすれば「…以外」という指定ができますね!また隣接セレクタを使えば、dt.active + dd「.active とういうクラスが付いた dt 要素の次の dd 要素」という指定もできます。

ちょっとこんがらがっちゃいますが、こんな風にセレクタを工夫するのも、jQuery のコーディングでは覚えておきたいテクニックだと思います。

POINT
  • セレクタの書き方を工夫してみる。

11.2. STEP2 – クリックしたとき … という大枠を作る

それでは次に、dt 要素をクリックした時に、dd 要素を開く仕組みを作ってみたいと思います。使うのはもちろん click()メソッドです!

jQuery
  • $(".accordion > dd:not('dt.active + dd')").hide();
  • $(".accordion > dt").click(function(){
  • 	/* ここに処理 */
  • });

こんな風に click() メソッドのイベントハンドラに、dd 要素を開いたりする処理を書いていけば良さそうです。でもコードをよく見ると、セレクタの中に .accordion という記述が複数ありますね …。こんな風に複数回セレクタで指定すると、その回数だけ jQuery がその要素を探しにいってしまいます。結果、処理速度が遅くなってしまうそうです。なので一旦変数にしておいて、それを使った方がいいですね!

jQuery
  • var accordion = $(".accordion");
  • $("> dd:not('dt.active + dd')", accordion).hide();
  • $("> dt", accordion).click(function(){
  • 	/* ここに処理 */
  • });

ちょっと変数を使ったときのセレクタ部分の記述について補足しますね!さっきまではクラスを使って書いていたので、下記のように書いていました。

クラスなどを使ったセレクタ

$("クラス > 子要素")

でも var accordion = $(".accordion") として、.accordion を変数に代入しました。なので変数を使って書くと、下記のようになります。

変数を使った書き方

$("> 子要素", 変数)

まずは子要素などを今まで通りクォーテーションで囲んで、カンマ(,)の後ろに変数を書けば OK です!

POINT
  • 複数回セレクタを書くなら、変数にしてしまう。
  • 変数を使った書き方に注意!

変数などの JavaScript の基礎については、下記サイトが参考になると思います!

11.3. STEP3- クリックで開閉する仕組みを作る

クリックしたとき … という大枠はできたので、今度はクリックしたときの実際の処理を作っていきます。「考え方」では以下の 2点の部分ですね!

  • dt 要素をクリックしたら、開いている dd 要素は閉じて、クリックした部分の dd 要素を開く。
  • CSS でデザインしやすいように、開いている部分の dt 要素にはクラス(.active)を付ける。

上記を踏まえて、コードを読み解いていってみます。

  • $("> dt", accordion).click(function(){
  • 	if( $("+ dd", this).css("display") == "none" ){ ... 1
  • 		$("> dd", accordion).slideUp("fast"); ... 2
  • 		$("> dt.active", accordion).removeClass("active"); ... 3
  • 		$(this).addClass("active").next("dd").slideDown("fast"); ... 4
  • 	}
  • });
1if( $("+ dd", this).css("display") == "none" ){

ここは if文の条件分岐です。既にクリックした部分のパネルが開いていたら、開く処理をする必要がないので、「もしパネルが開いていないなら …」という条件を付けました。

変数 this にはクリックされた dt 要素が代入されてますから、$("+ dd", this) と隣接セレクタを使用することで、隣接してる(次にマークアップされている)dd 要素を指定できます。そして
.css("display") で display プロパティの状態を取得して、display: none の状態なら … という条件分岐を完成させます!

2$("> dd", accordion).slideUp("fast");

ここでは全ての dd 要素を slideUp() メソッドでスライドアップさせてます。

3$("> dt.active", accordion).removeClass("active");

active というクラスを一旦削除!

4$(this).addClass("active").next("dd").slideDown("fast");

最後に this(クリックされた dt 要素)に クラス active を付けます。スライドダウンで表示させるのは、dt 要素じゃなくて、次にマークアップされている dd 要素なので、.next("dd").slideDown("fast") で、スライドアップして完成です!

MEMO

next() メソッドのように、セレクタで指定した要素からさらに要素を絞り込むメソッドもあります。next() の場合は、セレクタで指定した要素の次の要素を指定できます。トラバーシング系とかトラバース系メソッドといいます。これについては過去記事で書いたことがあるので、そちらを見てみてくださいね!

全部まとめると、下記のようになりました!

jQuery
$(function(){
	var accordion = $(".accordion");
	$("> dd:not('dt.active + dd')", accordion).hide();
	$("> dt", accordion).click(function(){
		if( $("+ dd", this).css("display") == "none" ){
			$("> dd", accordion).slideUp("fast");
			$("> dt.active", accordion).removeClass("active");
			$(this).addClass("active").next("dd").slideDown("fast");
		}
	});
});
ひとまず完成したアコーディオン
HTML
Hypertext Markup Language の略。Webサイトをマークアップするためのマークアップ言語です。
CSS
Cascading Style Sheets の略。HTML や XML を装飾するために使われる言語です。
JavaScript
プラウザで動作するプログラム言語で、主に HTML や CSS を操作するために使われます。JS と略されることもあります。
jQuery
JavaScript のライブラリのひとつです。比較的習得しやすいため、プログラミングに慣れていない Webデザイナーにも人気のライブラリです。

ひとつのプログラムを作るには、こんな風にいろんなセレクタを工夫したり、いろんなメソッドを組み合わせて作っていくんですね!

MEMO

今回は dt 要素内に、はじめからハートのアイコン用の span 要素 をマークアップしていました。でも空要素をマークアップするのがいやだなーという場合は、prepend() メソッドなどで、jQuery で挿入してもよさそうですね!

12. ちょっと寄り道 … 変数 this の中身は?

イベントハンドラや each() メソッドのコールバック内で、何度も登場している変数 this。これまでは「イベント発生中の要素」「処理中の要素」といった表現をしてきました。では実際に変数 this の中身は、何が代入されているんでしょう?実は変数 this の中身は DOM 要素が代入されています。

jQuery
  • $("input.textbox").focus(function(){
  • 	$(this).val("フォーカスされました");
  • });

上記のコードは、フォーカスされた input要素(this)の value 属性の値を、「フォーカスされました」に変更するコードでした。

でも変数 this は DOM要素 … ということなので、そのままでは jQuery のメソッドが使えません。そのため $(this) として、jQuery オブジェクトに加工しているんですね。

逆に JavaScript のメソッド value を使うのであれば、jQuery オブジェクト化する必要はありませんから、下記のように記述することもできます。

jQuery & JavaScript
  • $("input.textbox").focus(function(){
  • 	this.value="フォーカスされました";
  • });

jQuery オブジェクトと DOM 要素の違いが分かると、いろんな記述法で書き分けることもできるようになりそうですね!jQuery オブジェクト化しない分、パフォーマンス的によくなったりするのかな …?

13. アコーディオンの汎用化に挑戦!

さっきのコードでアコーディオンはひとまず完成しました。でもここでちょっと意地悪して、複数のアコーディオンをページに設置してみます。するとどういう風になるでしょう?

複数のアコーディオン
HTML
Hypertext Markup Language の略。Webサイトをマークアップするためのマークアップ言語です。
CSS
Cascading Style Sheets の略。HTML や XML を装飾するために使われる言語です。
JavaScript
プラウザで動作するプログラム言語で、主に HTML や CSS を操作するために使われます。JS と略されることもあります。
jQuery
JavaScript のライブラリのひとつです。比較的習得しやすいため、プログラミングに慣れていない Webデザイナーにも人気のライブラリです。
Photoshop
Webデザインをする上で、写真を補正したり、UIパーツを作るのに人気のソフトウェアです。
Illustrator
イラストを制作するのに適したソフトウェア。Webデザインでは幅広い用途で使われています。
Fireworks
Web制作におけるグラフィックを作成することに特化したソフトウェア。Photoshop や Illustorator に比べ、Web制作ならではの機能が充実しています。

片方をクリックすると、両方のアコーディオンが一緒に動いてしまいます … X( これを回避するにはどうすればいいでしょう?ここで前述した each()メソッドの登場です!each()メソッドを利用すれば、「それぞれ」のアコーディオンに対して処理を実行してくれるので、上記のように一緒に動いてしまうこともなくなります!

jQuery
  • $(function() {
  • 	$(".accordion").each(function(){
  • 		var accordion = this;
  • 		$("> dd:not('dt.active + dd')", accordion).hide();
  • 		$("> dt", accordion).click(function(){
  • 			if($("+ dd", this).css("display") == "none"){
  • 				$("> dd", accordion).slideUp("fast");
  • 				$("> dt.active", accordion).removeClass("active");
  • 				$(this).addClass("active").next("dd").slideDown("fast");
  • 			}
  • 		});
  • 	});
  • });

each() メソッドのコールバックの中に、すっぽり以前のコードが入りました。また、each() の中でも this が使えるので、一部 this を利用して書き直しました(青い部分)。

POINT
  • each() を使うと汎用化できる!

14. プラグイン化に挑戦!

each()メソッドを使うことで、複数のアコーディオンを設置することもできました。せっかくなので、作ったアコーディオンをプラグインにしてしまいましょう!まず、プラグインにするには、下記のように記述します。

メソッドの作成

1 の部分には、なにやら「メソッド名」と書かれています …。プラグイン化のお話なのに、メソッド名って何だろう? … と思う人もいるかもしれません。俗にいうプラグインというのは、結局のところ、自分でオリジナルのメソッドを作ることなんです。jQuery では、こんな風にして自分だけのメソッドを作ることができるんですね!

そしてオリジナルのメソッドを作る訳ですから、メソッドには名前を付けてあげなくてはいけません。それが 1の部分 … という訳なんです。

ここではアコーディオンのメソッドを作るので、名前は simpleAccordion にすることにします。

プラグイン化のコードの中身は置いておいて、この作ったメソッドを実行するときには、下記のように記述します。

  • $(".accordion").simpleAccordion();

今まで見てきた他のメソッドと同じように記述すれば OK です!そしてここで指定したセレクタが、プラグイン化のコードの中では、変数 this として利用できます。

プラグイン化のコードの this

これを踏まえてプラグイン化のコードをチェックしてみます!

jQuery
  • $.fn.simpleAccordion = function(){
  • 	this.each(function(){ ... A
  • 		var accordion = this; ... B
  • 		$("> dd:not('dt.active + dd')", accordion).hide();
  • 		$("> dt", accordion).click(function(){
  • 			if($("+ dd", this).css("display") == "none"){ ... C
  • 				$("> dd", accordion).slideUp("fast");
  • 				$("> dt.active", accordion).removeClass("active");
  • 				$(this).addClass("active").next("dd").slideDown("fast"); ... C
  • 			}
  • 		});
  • 	});
  • 	return this; ... A
  • }

基本的には $.fn.simpleAccordion = function(){ ... } というプラグイン化のコードの中に、今までのコードがすっぽり入っています。変更したのは 2カ所だけ、Aの部分です。

プラグイン化のコードでは、セレクタで指定した jQuery オブジェクトを、そのまま this として利用できると書きました。なので下記のように書き換えることができますね!

以前のコード
  • $(".accordion").each(function(){ ... }
プラグイン化のコード
  • this.each(function(){ ... }A

また、上記のコードではたくさんの this がありますが、前述したとおり、this は記述されてる場所によって中身が違います。これは要注意ですねー。

  • Athis … 実行コードのセレクタで指定した要素(dl 要素)
  • Bthiseach() による「処理中の要素(dl 要素)」
  • Cthis … クリックされた dt 要素
MEMO

コードの最後に return this という記述がありますが(2つめの A)、これがなくてもメソッドとしてキチンと動作します。ではこれは何のための記述かというと、メソッドチェーンを意識してのもの。下記のように他のメソッドをメソッドチェーンでつなぐ場合にに必要な記述です。

  • $("セレクタ").myMethod().メソッド();

return this とすることで、次のメソッドにそのまま this(セレクタで指定した jQuery オブジェクト)を渡すことができるんですね!

Attention

「12. ちょっと寄り道 … 変数 this の中身は?」のところで、this の中身は DOM 要素だと書きました。でもプラグイン化コードの中の thisA の部分)は、jQuery オブジェクトになっています。なので $(this).each() とする必要はなく、this.each() とすれば OKです。

これでプラグイン化ができました!作ったプラグインは別ファイルなどにしておけば、色んなサイトで使い回しが効きます。ファイルを読み込んだら、下記のように実行コードを記述すれば OK です。

  • $(".accordion").simpleAccordion();
POINT
  • プラグイン化 … はメソッドを作ること。
  • プラグイン化のコードの中では、セレクタで指定した要素が this。
  • プラグイン化のコードの中の this は、jQuery オブジェクト。

15. オプションを設定できるようにしてみよう!

さっきはシンプルにアコーディオンのコードをプラグイン化してみました。でもせっかくプラグイン化するんだから、いろいろなオプションを設定して、任意に変更できるようにしたいです。

例えばアニメーションのスピードを変更できたり、事前に決まっていたクラス名「active」を、好きなクラス名に変更したり … というオプションを設定できれば、もっと便利に使えますよねー。そこでオプションを指定できるように改良してみます。

まず、オプションを設定するためには、下記のように記述します。

オプションの設定

プラグイン化のコードの function(){ ... () の中に、何やら options と書かれています 1。これを記述することで、実行コードの方で指定したオプション(後述)を反映させることができます。また、この部分は任意の名前で構いません。今回は分かりやすく options という名前にしました。

そしてコードの中の 2の部分では、オプション名1: 値 などとなっています。ここにはオプションのデフォルトの値を記述します。

例えば、今回のアコーディオンでは、下記のふたつのオプション(オプション名には任意の名前を付けます)を設定したいと思います。

  • duration: アニメーションのスピード
  • activeClass: アクティブの部分につけるクラス名
jQuery
  • $.fn.jqueryAccordion = function(options){
  • 	options = $.extend({
  • 		duration: 400,
  • 		activeClass: "active"
  • 	}, options);
  • }

そして実行コードで下記のように記述すると、このデフォルトの値が設定されます。

オプションを指定しない(デフォルトの値を使う)書き方
  • $("セレクタ").jqueryAccordion();

今度は自分でオプションを指定してみます。

オプションを指定した書き方
  • $("セレクタ").jqueryAccordion({
  • 	duration: "fast",
  • 	activeClass: "current"
  • });

こんな風に記述すれば、$.extend()(後述)によってオプションの値が上書きされ、自分で設定したオプションを利用できるようになります!

15.1. オプションをコードに反映する

$.extend() の説明はちょっと置いておいて、先ほど設定したオプションを、アコーディオンのコードの中に反映させていきます。

といっても反映のさせ方は簡単です。まず options と、オプションの名前をピリオド(.)でつなぎます。こんな風に options.durationoptions.activeClass と記述するだけで、設定してあるオプションの値を利用することができます。

例えばアニメーション(slideUp())のスピードにオプションを反映させるには …

  • $("> dd", accordion).slideUp("fast");
  • $("> dd", accordion).slideUp(options.duration);

今までのコードで、"fast" となっていた部分を、options.duration に書き換えます。これでオプションの値を、アコーディオンのコードに反映させることができそうです!

jQuery
  • $.fn.jqueryAccordion = function(options){
  • 	options = $.extend({
  • 		duration: 400,
  • 		activeClass: "active"
  • 	}, options);
  • 	this.each(function(){
  • 		var accordion = this;
  • 		$("> dd:not('dt." + options.activeClass + "+ dd')", accordion)
  • 		.hide();
  • 		$("> dt", accordion).click(function(){
  • 			if($("+ dd", this).css("display") == "none"){
  • 				$("> dd", accordion).slideUp(options.duration);
  • 				$("> dt." + options.activeClass, accordion)
  • 				.removeClass(options.activeClass);
  • 				$(this).addClass(options.activeClass)
  • 				.next("dd").slideDown(options.duration);
  • 			}
  • 		});
  • 	});
  • 	return this;
  • }

ふたつのオプションを設定したコードが上記のものです。ここまでとっても長い道のり … でした … 記事も長ーくなってしまいました … X(

アコーディオンプラグイン完成!
HTML
Hypertext Markup Language の略。Webサイトをマークアップするためのマークアップ言語です。
CSS
Cascading Style Sheets の略。HTML や XML を装飾するために使われる言語です。
JavaScript
プラウザで動作するプログラム言語で、主に HTML や CSS を操作するために使われます。JS と略されることもあります。
jQuery
JavaScript のライブラリのひとつです。比較的習得しやすいため、プログラミングに慣れていない Webデザイナーにも人気のライブラリです。
Photoshop
Webデザインをする上で、写真を補正したり、UIパーツを作るのに人気のソフトウェアです。
Illustrator
イラストを制作するのに適したソフトウェア。Webデザインでは幅広い用途で使われています。
Fireworks
Web制作におけるグラフィックを作成することに特化したソフトウェア。Photoshop や Illustorator に比べ、Web制作ならではの機能が充実しています。
POINT
  • $.extend() を利用して、オプションを設定する
  • オプションの値は、opsitons.optionName のように記述して利用する。

MEMO

$.extend() は、複数のオブジェクト(操作する対象物)をマージ(合併とか融合)してくれる便利なもの。例えば下記にはふたつのオブジェクトがあります。

  • var obj1 = {
  •   apple: "200円",
  •   banana: "100円"
  • }
  • var obj2 = {
  •   banana: "150円"
  •   cherry: "300円"
  • }

このふたつの obj1obj2 を、$.extend() を使えば簡単にマージ(ニコイチって言った方が分かりやすいかも)できます。

  • var margeObj = $.extend(obj1, obj2);

上記を実行すると、margeObj の中身は、下記のようにマージされたものが入ります。

  • apple: “200円”
  • banana: “150円”
  • cherry: “300円”

obj1 では バナナは 100円でしたけど、ふたつをニコイチにしたので、上書きされて 150円になりました。また、合併なのでチェリーも加わりました。

この仕組みを利用して、プラグインコードの中ではオプションの設定に $.extend() を利用していました。obj1 がデフォルトのオプション値、obj2 の方が、自分で設定したオプション値というイメージです。

15.2. 補足 – $() は jQuery() のエイリアス

今までサンプルコードに始まって、最後はアコーディオンのプラグインを jQuery で作成してきました。そしてそのコードの中には、必ず $() という記述をしてきました。この $() という記述は、セレクタで指定した要素などを、jQuery が操作するための jQuery オブジェクトにするための記述でした。

実はこの $()エイリアス(偽名・別名といった意味の言葉)と呼ばれるもので、本来は jQuery() と記述します。ですから今まで $() と記述してきた部分は、全て jQuery() と記述することができます。

Attention

$() は全て jQuery() と書けますって書いてますけど、$() という書き方は、JavaScript の正規表現などでも利用されています。なのであくまで jQuery のコードの $() という意味です。

15.3. 補足 – 他のライブラリとの競合をさける

$() という書き方は、実は jQuery だけの書き方ではありません。他の JavaScript ライブラリでも利用されている書き方です。jQuery を他のライブラリと一緒に使う場合などは、$() という記述に注意しなくちゃなりません …。

前述したように、$()jQuery() のエイリアスですから、はじめから jQuery() と書いておけば、ライブラリ間での競合(コンフリクト)は避けることができます。

でも自分で書いたコードならそれでも OK ですが、インターネット上でダウンロードしたプラグインなどは、一般的に $() を使って書かれています。そこで下記のような記述を覚えておくと便利です!

今までの書き方
  • $(function() {
  • 	$("セレクタ").メソッド();
  • });
コンフリクトを意識した書き方
  • jQuery(function($) {
  • 	$("セレクタ").メソッド();
  • });

こんな風に書けば、jQuery(function($) { ... }); 内の $() は、jQuery() として扱ってもらえます。


また、プラグイン化コードを書くときも、コンフリクトを意識しておいて、カプセル化しておくのがお作法みたいになっています。

今までの書き方
  • $.fn.メソッド名 = function(){
  • 	...省略...
  • }
コンフリクトを意識した書き方
  • (function($){
  • 	$.fn.メソッド名 = function(){
  • 		...省略...
  • 	}
  • })(jQuery);

(function($){ ... })(jQuery); で囲んじゃうので、カプセル化っていうっぽいです。

POINT
  • プラグインコードは、カプセル化しておこう!

16. 最後に

随分長い記事になってしまったし、いろいろややこしい部分もあったので、上手くまとめられませんでした …。こんなに長い記事を、最後まで読んでいただいた方、ありがとうございました!

また、最近 jQuery にすごく詳しい方に、ご指導を頂くことができました。今までちゃんと理解できてなかった部分も、理解できるようになったと思います …。この記事も、その方に教えて頂けたから書けました。この場を借りてお礼申し上げます!Nさん、ありがとうございました!

おすすめの jQuery の書籍

jQueryデザイン入門

Web制作の現場で使う jQueryデザイン入門 (WEB PROFESSIONAL)

Web制作でよく使う感じのサンプルが、コードと一緒にたくさん収められています。コードの解説も、難しい専門用語を使ってないので、とても分かりやすいと思います。jQuery の入門書としてはピッタリな一冊です!

Webデザイナーのための jQuery入門

Webデザイナーのための jQuery入門 魅力的なユーザーインターフェースを手軽に作る (Books for Web Creative)

jQuery の実際のコーディングについてはもちろん、jQuery の知識をキチンと学習できる素敵な本だと思います。できるだけ難しい言葉を使わないようにしてる … というのが感じられて、とても丁寧な入門書だと思います。

Comments

Thank you for the comment.