「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)
[画像のクリックで拡大表示]

この先は会員の登録が必要です。有料会員(月額プラン)は登録月無料!

日経 xTECHには有料記事(有料会員向けまたは定期購読者向け)、無料記事(登録会員向け)、フリー記事(誰でも閲覧可能)があります。有料記事でも、登録会員向け配信期間は登録会員への登録が必要な場合があります。有料会員と登録会員に関するFAQはこちら