Pocket

今回はjQueryの基本的な書き方として、これから「jQueryを覚えて、ブイブイ言わせてやるぜ!」と新しいスキルを身につけたいデザイナーさんには丁度いい内容かと思います。

今回は、サンプルも準備したのでそちらも併せてご覧頂ければと思います。

お題:「コンテンツアコーディオンの作成」
DEMO:http://jsfiddle.net/staydaybreak/KW8j5/embedded/result/

 

 

実際にjQueryを使ってみる

 

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

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

 1.HTML/CSS/javascript

実装するjQueryのコード

 

 

 

jQueryコードの解説

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

1行目

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

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

 

2行目

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

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

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

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

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

その要素に対して、”どのような行動をしたら”を決める文となります。
今回はクリックしたら、アコーディオンが展開するので、クリックを指定してあげてます。

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

意訳した文章の『accordionクラスの中のdtタグをクリックしたら○○を実行』の○○の箇所にあたります。
では次に、今回のアコーディオン本体に関して見てみましょう

 ①の解説

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

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

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

 

②の解説

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

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

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

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

③の解説

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

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

ざっくりとした紹介にはなりましたが、以上となります。

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

 

 

 

 

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

jQueryを読込する際に、jQueryのライブラリをダウンロードして、サーバにアップロード若しくは所定の場所において利用していると思います。
それでもよいのですが、最近はCDNというサービスを利用して読み込んでいるサイトが増えております。
『CDN』と聞きなれない、単語がでてきましたが、導入が大変ラクですし、CDNを利用することで、読込が速くなるというメリットがありますので是非覚えておくといいと思います。

代表的なCDNサービス

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

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

CDNによるjQueryの導入方法

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

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

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

 

スタッフ募集のお知らせ

株式会社それからデザインでは現在、エンジニア・プログラマー、デザイナー、ディレクターを募集しています。自社サービスやクライアント企業のブランディングに関わるモノづくりの現場であなたの経験を活かしてみませんか?
ご興味のある方は、下記より募集要項をご覧ください。

生きるように働く人の仕事探しサイト「日本仕事百貨」に、当社のSE・プログラマー募集の記事が掲載されました。是非ご覧ください。