jQueryの基本的な書き方

コーディング / 2014.01.20

今回はjQueryの基本的な書き方として、これから「jQueryを覚えて、ブイブイ言わせてやるぜ！」と新しいスキルを身につけたいデザイナーさんには丁度いい内容かと思います。今回は、サンプルも準備したのでそちらも併せてご覧頂ければと思います。

お題：「コンテンツアコーディオンの作成」

DEMO：http://jsfiddle.net/staydaybreak/KW8j5/embedded/result/

実際にｊQueryを使ってみる

実際にjQueryを使って「コンテンツアコーディオン」を作ってみようと思います。

完成サンプル：http://jsfiddle.net/staydaybreak/KW8j5/embedded/result/

1.HTML/CSS/javascript

実装するjQueryのコード

$(function(){
    $('.accordion dt').on('click',function(){
        var $that = $(this);
        $that.next('dd').slideToggle(400,function(){
            $that.toggleClass('active');
        });
    });
});

$(function(){

$('.accordion dt').on('click',function(){

var $that = $(this);

$that.next('dd').slideToggle(400,function(){

$that.toggleClass('active');

});

<div id="wrap">
    <div id="content">
    <h2>アコーディオンを作ってみよう。</h2>
        <dl class="accordion">
        <dt>タイトル1</dt>
            <dd>
            アコーディオンの内容1
            </dd>
        <dt>タイトル2</dt>
            <dd>
            アコーディオンの内容2
            </dd>
        <dt>タイトル3</dt>
            <dd>
            アコーディオンの内容3  
            </dd>
        </dl>
    </div>
</div>

<h2>アコーディオンを作ってみよう。</h2>

<dd>

アコーディオンの内容1

</dd>

<dd>

アコーディオンの内容2

</dd>

<dd>

アコーディオンの内容3

</dd>

</dl>

</div>

body {
  background:#cfcece;
  padding:0;
  margin:0;
  font-size:82.5%;
  line-height:1.5;
}
#wrap {
  width:90%;
  max-width:800px;
  min-width:400px;
  margin:2em auto 0;
  background:#fff;
  min-height:300px;
}
#content {
    padding:2%;
}

.accordion { width:100%;}
.accordion dt,
.accordion dd {
    margin:0;
    padding:0;
}
.accordion dd { padding:1.2em 1.2em 1.5em;display:none; }
.accordion dd:last-child { border-bottom:1px solid #ddd;}
.accordion dt {
    background:#232323;
    border-radius:6px;
    color:#fff;
    margin:0 0 .5em 0;
    padding:10px;
    cursor:pointer;
}
.accordion dt.active {
    background:#2f2f2f;
}

body {

background:#cfcece;

padding:0;

margin:0;

font-size:82.5%;

line-height:1.5;

}

#wrap {

width:90%;

max-width:800px;

min-width:400px;

margin:2em auto 0;

background:#fff;

min-height:300px;

}

#content {

padding:2%;

}

.accordion { width:100%;}

.accordion dt,

.accordion dd {

margin:0;

padding:0;

}

.accordion dd { padding:1.2em 1.2em 1.5em;display:none; }

.accordion dd:last-child { border-bottom:1px solid #ddd;}

.accordion dt {

background:#232323;

border-radius:6px;

color:#fff;

margin:0 0 .5em 0;

padding:10px;

cursor:pointer;

}

.accordion dt.active {

background:#2f2f2f;

}

jQueryコードの解説

では実際のコードの解説をしていこうと思います。

1行目

 $(function(){ //ここにコードが書かれる});

1	$(function(){ //ここにコードが書かれる});

まず、この”$(function(){});”は,jQueryのお約束のようなものです。必ず、書かないと動きません。
またこのコードの意味を簡単に意訳すると、「ページの読込が終わったら～」、命令を実行するという意味になります。

市販の書籍では、以下のように書かれていますがどちらも同じ意味です。
完全に好みが別れるのですが、個人的には記述量が少ない上記のほうを好きです。

/* 同じ意味 */
$(document).ready(function(){
});

/* 同じ意味 */

$(document).ready(function(){

});

2行目

それでは、今回取り上げた、アコーディオンですが以下のコードからが実際の命令文になります。

$('.accordion dt').on('click',function(){
//略
});

$('.accordion dt').on('click',function(){

//略

});

この命令文を日本語的文章に意訳すると以下の様になります。

『accordionクラスの中のdtタグをクリックしたら○○を実行』といった意味になります。

今回のデモでは、「コンテンツアコーディオン」をつくるので、そのイベントのトリガーとなる場所を教えてあげる必要があります。
最初の”$(‘.accordion’)”の箇所がイベントトリガーであるという事です。　また最初にくる「$(’要素名’)」の要素名の所をセレクターと呼ばれます。

セレクターのあとの.on（”click”）の説明です。

selector.on("click",////

1	selector.on("click",////

その要素に対して、”どのような行動をしたら”を決める文となります。

今回はクリックしたら、アコーディオンが展開するので、クリックを指定してあげてます。

.on("click",function(){//実行する命令が入る});

1	.on("click",function(){//実行する命令が入る});

では最後の、”function(){//実行する命令が入る});”この部分が実際に動くアクションを各場所となります。

意訳した文章の『accordionクラスの中のdtタグをクリックしたら○○を実行』の○○の箇所にあたります。

では次に、今回のアコーディオン本体に関して見てみましょう

        var $that = $(this);//①
        $that.next('dd').slideToggle(400,function(){//②
            $that.toggleClass('active');//③
        });

var $that = $(this);//①

$that.next('dd').slideToggle(400,function(){//②

$that.toggleClass('active');//③

});

①の解説

まず、var $that = $(this)に関してですが、そもそも”this”というのは、呼び出し元を指しています。

今回の場合は、”accordionクラスのdt”がそれにあたります。
jQueryとして扱う場合は、$()で囲む必要があるので、$(this)となります。

今回のコードはほんとう、3~4行なので、$(this)でも良いのですが、長い内容となるとそれを常に書くのはめんどくさくなります！
そこで、今回は$thatという変数　=　入れ物の中に簡単にいえばコピーしてあげて、今後は$thatを使える様にするというものです。

②の解説

“accordionクラスのdt”がクリックされたらの実際の命令ですね。
実際にプログラムには正解はありません（勿論、効率の良かったり、無駄の無いコードが正解といえるかもしれませんが）
今回のHTMLを見て頂くとトリガーとなる”dtタグ”の後ろにある”ddタグ”がアコーディオンとなるコンテンツとなります。

つまり、②の内容を日本語的な文章に置き換えると『クリックされたdtの次の要素を開く/閉じるを行う』となります。

“slideToggle”とは、jQueryが予め持っているアクションとなり、”slideToggle”を使う事により、簡単に開閉ができることになります。

...slideToggle(開閉する時間,イージング(省略可),function(){
//開閉が終わったら後に更に実行する内容
});

...slideToggle(開閉する時間,イージング(省略可),function(){

//開閉が終わったら後に更に実行する内容

});

この場合は、『開閉を○○秒かけて行い、その後△△を実行する』となります。

③の解説

アコーディオンとしては②の部分で完成していますが、開閉したメニューがどこか、視覚的にひと目で分かったほうが嬉しいのでその命令を書いています。
今回は開閉後にどこかわかるようにしたらいいので、②の解説にある”slideToggle”の開閉が終わった後に更に実行するように書いてます。
単純にメニューの色が変わればいいので、そこはCSSに任せる事にして、予め”active”というクラスをつくりました。

$that.toggleClass('active');

1	$that.toggleClass('active');

このコードを日本語的文章に意訳すると以下のようになります。『○○にクラスactiveを付いていなかったら付与し、付いていたらクラスを取れ』となります。ざっくりとした紹介にはなりましたが、以上となります。

jQueryを使うと、簡単に色々なことができるので、覚えるとより世界が広がると思います。

おまけ　今時のトレンド-jQuery読込編

jQueryを読込する際に、jQueryのライブラリをダウンロードして、サーバにアップロード若しくは所定の場所において利用していると思います。
それでもよいのですが、最近はCDNというサービスを利用して読み込んでいるサイトが増えております。

『CDN』と聞きなれない、単語がでてきましたが、導入が大変ラクですし、CDNを利用することで、読込が速くなるというメリットがありますので是非覚えておくといいと思います。 代表的なCDNサービス

※クライアントによっては外部サーバーのファイルにアクセスを禁止している場合もあるのでご注意ください。

※CDNとは…

Webコンテンツをインターネット経由で効率よく配信するためのしくみ。コンテンツ・デリバリー・ネットワーク（Contents Delivery Network）を略して、CDN と言うことが多いです。

CDNによるjQueryの導入方法

今回はGoogle Libraries APIを例にして導入してみたいと思います。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery基本的な書き方</title>
<!-- CDN でjQueryを読み込む -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!-- ここまで-->
</head>
<!--省略-->

<!doctype html>

<html>

<head>

<title>jQuery基本的な書き方</title>

</head>

また、ｊQueryのバージョンは複数あり、最新のではなく少し前のを使いたい場合は、

<!--
<script src="//ajax.googleapis.com/ajax/libs/jquery/ここにバージョンを指定する/jquery.min.js"></script>
-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

<!--

-->

とても簡単ですね!　では　ビバ