［1］JavaScriptライブラリの本命

「jQuery」（ジェイ・クエリー）は、John Resig氏が開発したJavaScriptの軽量ライブラリです。「Write Less, Do More（もっとシンプルに、もっとたくさんのことを）」がモットーで、これまで複雑なJavaScriptを使わないとできなかったリッチな効果を簡単に生み出せます。本特集は、前半でまずjQueryの基本を解説した後、後半でリッチな効果を生み出すプラグインを紹介します。 　jQueryはその手軽さから、JavaScriptライブラリとしては後発であったものの、急速にユーザー数を伸ばしました。世界の上位100万サイトの実に過半数＊1がjQueryを利用しています。今やJavaScriptでの開発にjQueryは欠かせなくなったといえるでしょう。表1は人気の要因を挙げたものです。特に最後のプラグインは大事です。世界中のいたるところでプラグインが提供され、目的特化した機能が何千種類というボリュームで提供されています。 リッチな効果を簡単に生み出すことができるのは、こうしたプラグインがあるからだといえます。 表1●人気の理由 jQueryを準備しよう 図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秒かけてリサイズ 図3●図2のソースコード（basic.html） [画像のクリックで拡大表示] ポイント1 $(function () ポイント1 これは丸暗記！　 $(function () {...}); 　まず最初に覚えなければいけないのが、「$(function () {...});」というブロックです。jQueryによるコードはすべて、このブロックの配下（...の部分）に書くのが基本です。 　$(function() {...}); とは、配下のコードを「ページがすべて読み込まれたあとで実行しなさい」という意味です。 $(document).ready(function(){...}); と書くこともできます。 　この外にコードを書いてしまうと、ページが読み込まれる前に処理が実行されてしまい、正しくコードが動かない場合があるので要注意です。例えば、図4のようなケースでは、操作しようとしている＜img＞要素がまだ読み込まれていませんので、コードは意図したように動作しません。 図4●$(function () {...}); でコードをくくらないと… ポイント2 $()関数から始まる ポイント2 $()関数から始まる 図5●jQueryの基本的な構造 [画像のクリックで拡大表示] 図6●セレクタの例 [画像のクリックで拡大表示] 　jQueryのコードは、「なにを、どうする」で書くのが基本です（図5）。「なにを」を表す$()関数を理解することはとても大切です。$()の中には「セレクタ」という構文が入ります（表2、図6）。このセレクタでHTML内の要素を取り出します。複数の要素をまとめて取り出すこともできます。 　例えば、最もシンプルな例ですが、セレクタが「img」という文字列だった場合、すべての＜img＞要素が該当します。divタグのidを指定する場合は先頭に「#」を付けます。例えば、「#nikkei」というセレクタでは、＜div id="nikkei"＞という要素が該当します。 表2●$()で利用できる主なセレクタ 　さらに、classで絞り込みたい場合は「.」を付けてclass名を指定します。例えば、「a.new」というセレクタの場合は、「class="new"」となっている＜a＞タグを抜き出します。 　$() 関数の最大のポイントは、ページ内の要素を検索する条件式をごくシンプルに表現できることでしょう。例えば、「id属性が"list"である要素の配下から、class属性が"recommend"である＜img＞要素」のような少々複雑な条件も、jQueryではわずかに「$('#list img.recommend')」と簡単に表現できます。このような条件をJavaScriptの基本機能だけで表そうとしたら、1） ページ全体からid="list"である要素を取得する、2）その直下からすべての＜img＞要素を取得、3）取得した＜img＞要素のclass属性が"recommend"であるかを確認＆合致するものだけを抽出――といった手順を踏まなければならないでしょう。面倒だとは思いませんか？ 　しかも「#list img.recommend」のような表現は、jQuery固有のものではありません。CSS（Cascading Style Sheet）で利用されているセレクタ構文を、ほとんどそのままjQueryで利用できるようになっているのです＊2。ですから、CSSを理解してさえいればjQueryではその知識がそのまま生きてきます。 　構文以外にも次のような点を意識しておくと、jQueryが対象の要素を検索する際の効率を高められます。特にIE6のような古いブラウザでは効果的です。 できるだけ「#id」を使う 「.class」はできるだけ利用しない（利用する場合も「element.class」で） なるべく「ancestor descendant」よりも「parent ＞ child」を利用する ポイント3 実体はjQueryオブジェクト ポイント3 実体はjQueryオブジェクト 　$() 関数は、セレクタの条件に合致した要素をjQueryオブジェクトとして返します＊3。jQueryオブジェクトとは、セレクタで取り出した要素を保存するとともに、これらを操作するための機能（メソッド）を持ったオブジェクトです（図7）。 図7●jQueryオブジェクトとは？ 　jQueryでコードを書くとは、$()関数で、操作すべき要素を特定し（＝なにを）、返ってきたjQueryオブジェクトのメソッドでこれを操作する（＝どうする）ということなのです。 　例えば、図3の［ポイント3］は、$()関数で取り出したロゴ画像をanimateメソッドで、3000ミリ秒かけて、150×70にリサイズしなさいという意味になります。animateメソッドの構文は、以下の通りです。 $('セレクタ').animate( {スタイル名: 値, ... }, 時間) 　{ スタイル名: 値, ... }のような書き方を、「ハッシュ」または「連想配列」といいます。ハッシュは複数のパラメータ（オプション）をまとめて表現するのに便利なので、後半のプラグイン編でもよく登場します。書き方には慣れておくようにしてください。 　jQueryオブジェクトで利用可能な主なメソッドは、表3にまとめています。もちろん、これはjQueryが提供する膨大なメソッドのごく一部にすぎません＊4。jQueryがJavaScriptのコードでよくありがちな定型的な操作をサポートしていることがお分かりになるのではないでしょうか。 表3●主なjQueryメソッド [画像のクリックで拡大表示]