「jQuery」(ジェイ・クエリー)は、John Resig氏が開発したJavaScriptの軽量ライブラリです。「Write Less, Do More(もっとシンプルに、もっとたくさんのことを)」がモットーで、これまで複雑なJavaScriptを使わないとできなかったリッチな効果を簡単に生み出せます。本特集は、前半でまずjQueryの基本を解説した後、後半でリッチな効果を生み出すプラグインを紹介します。

 jQueryはその手軽さから、JavaScriptライブラリとしては後発であったものの、急速にユーザー数を伸ばしました。世界の上位100万サイトの実に過半数*1がjQueryを利用しています。今やJavaScriptでの開発にjQueryは欠かせなくなったといえるでしょう。表1は人気の要因を挙げたものです。特に最後のプラグインは大事です。世界中のいたるところでプラグインが提供され、目的特化した機能が何千種類というボリュームで提供されています。 リッチな効果を簡単に生み出すことができるのは、こうしたプラグインがあるからだといえます。

表1●人気の理由
表1●人気の理由

jQueryを準備しよう

図1●ダウンロードパッケージはPRODUCTION、DEVELOPMENTから選択
図1●ダウンロードパッケージはPRODUCTION、DEVELOPMENTから選択

 jQueryを利用するには、まずjQueryの本家サイトからソースコードをダウンロードしてください(図1)。jQueryのパッケージは、PRODUCTION、DEVELOPMENTという2種類の形式で提供されています。PRODUCTIONは、ソースコードから余計なコメントや空白を取り除いたパッケージです。サイズも小さく、ダウンロード時間も短くて済むので、実運用環境での利用に適しています。一方、DEVELOPMENTは、コメントや空白をそのまま残したパッケージです。サイズは大きいですが、jQueryの中身を確認しながら開発したいという人向けです。

 今回は、まずjQueryの基本的な機能を利用できればよいので、PRODUCTION形式を使いましょう。入手したjquery-x.x.x.min.js(x.x.xはバージョン番号)をHTMLから読み込むようにすれば、jQueryの機能を利用できるようになります。

<script type="text/javascript" src="libs/jquery-1.6.2.min.js"></script>

 パスやファイル名は、本誌ダウンロードサイト上のサンプルに沿っています。自分の環境や利用しているバージョンに応じて、適宜読み替えてください。

 ではさっそく、jQueryを動かしてみましょう。

 最初のサンプルは、条件に合致した画像をアニメーションぽくリサイズするというものです。具体的には、HTMLファイル内の「id属性が"list"である要素の配下から、class属性が"recommend"である<img>要素を取り出し、そのサイズを3秒かけて大きくする」という題材です(図2図3)。

図2●条件に合致した画像を3秒かけてリサイズ
図2●条件に合致した画像を3秒かけてリサイズ
図3●図2のソースコード(basic.html)
図3●図2のソースコード(basic.html)
[画像のクリックで拡大表示]