レベル: 中級 Jesse Skinner, Web Developer, Freelance
2007年 04月 10日 jQuery は、JavaScript™ と Ajax (Asynchronous JavaScript + XML) のプログラミングを単純化する JavaScript ライブラリーです。jQuery は、他の類似の JavaScript ライブラリーとは異なるユニークな考え方を持っており、一般的で複雑なコードを簡潔に表現することができます。この記事では、jQuery の考え方を学び、その特徴と機能を知り、いくつかの一般的な Ajax タスクを実行し、またプラグインを使って jQuery を拡張する方法を学びます。
jQuery とは何か
2006年の初めに John Resig によって作成された jQuery は、JavaScript コードを扱うすべての人にとって素晴らしいライブラリーです。JavaScript 言語の初心者で DOM (Document Object Model) Scripting や Ajax の複雑さに対応するためのライブラリーを必要とする人にも、あるいは DOM Scripting と Ajax の退屈な繰り返しに飽きている JavaScript の上級者にも、jQuery は最適です。
jQuery は、コードを単純で簡潔なものにしておくために役立ちます。jQuery を利用することで、大量の繰り返しループや DOM Scripting ライブラリー・コールを作成する必要がなくなります。jQuery によって、本質的なことに集中することができ、また必要なことを最小限の文字数で表現することができます。
jQuery は非常にユニークな考え方に基づいて、すべてを単純で再利用可能な状態にするように設計されています。jQuery の考え方を理解し、この考え方に慣れると、jQuery によってどれほどプログラム方法が改善されるか、明確にわかるようになります。
いくつかの簡単な単純化
ここでは、jQuery がコードに及ぼす影響のなかでも簡単な例を紹介します。例えば、あるページの 1 つの領域のすべてのリンクにクリック・イベントを追加するなどの、非常に単純で一般的なことをするには、単純な JavaScript コードと DOM Scripting を使います (リスト 1)。
リスト 1. jQuery を使わない DOM Scripting
var external_links = document.getElementById('external_links');
var links = external_links.getElementsByTagName('a');
for (var i=0;i < links.length;i++) {
var link = links.item(i);
link.onclick = function() {
return confirm('You are going to visit: ' + this.href);
};
}
|
リスト 2 は、同じ機能を jQuery を使って実現した場合を示しています。
リスト 2. jQuery を使った DOM Scripting
$('#external_links a').click(function() {
return confirm('You are going to visit: ' + this.href);
});
|
驚きませんでしたか？ jQuery を使うことで本質的なことに集中することができ、コードに実行させたいことのみを、面倒な手間をかけずに表現することができます。要素群に対してループを行う必要はなく、click() 関数が処理してくれます。また、何度も DOM Scripting を呼び出す必要がありません。必要なものは、処理すべき要素を定義するための短い文字列のみです。
しかしこのコードでどのようにして作業を完了するのかは、理解しにくいかもしれません。まず、jQuery で最も強力な関数である、$() 関数があります。ほとんどの場合、この関数を使って文書から要素を選択します。この例では、いくつかの CSS (Cascading Style Sheets) 構文を含む文字列が $() 関数に渡され、jQuery によって可能な限り効率的にその要素が検出されます。
この構文は、CSS セレクターの基礎を知っている人にはおなじみのはずです。リスト 2 では、#external_links は external_links という id を持つ要素を探します。空白とその後の a は、jQuery に対して、external_links 要素の中にあるすべての <a> 要素を探すように命令します。これを言葉で言うのは (そして DOM Scripting でさえ) 大変ですが、CSS を使うと、これ以上ないほど簡単になるのです。
$() 関数は、その CSS セレクターに一致するすべての要素を含む jQuery オブジェクトを返します。jQuery オブジェクトは配列のようなものですが、その中には特別な jQuery 関数が大量に含まれています。例えば click 関数を呼ぶと、jQuery オブジェクトの各要素にクリック・ハンドラー関数を割り当てることができます。
また、要素または要素の配列を $() 関数に渡すと、$() 関数はその要素の前後に jQuery オブジェクトをラップします。この機能を使うと、window オブジェクトのようなものに jQuery 関数を使うことができます。例えば、通常は、ロード・イベントに次のような関数を割り当てます。
window.onload = function() {
// do this stuff when the page is done loading
};
|
jQuery を使うと、同じコードを次のように書くことができます。
$(window).load(function() {
// run this when the whole page has been downloaded
});
|
皆さんも既にご存じのことと思いますが、ウィンドウがロードされるのを待っていると苛立たしいほど時間がかかるものです。これは、ページ上のすべての画像を含めて、ページ全体がロードを完了する必要があるためです。場合によると最初に画像のロードを完了したいことがありますが、たいていの場合は、まず HTML (Hypertext Markup Language) をロードする必要があります。jQuery はこの問題を、文書に対して特別な ready イベントを作成することで解決しています。このイベントの使い方を下記に示します。
$(document).ready(function() {
// do this stuff when the HTML is all ready
});
|
このコードは document 要素の前後に jQuery オブジェクトを作成し、次にそのインスタンスを呼び出すぶ関数を、HTML の DOM 文書が準備できた時に設定します。この関数を、必要な回数だけ何度でも呼び出すことができます。そして本来の jQuery スタイルでは、ショートカットによってこの関数を呼び出すことができます。それには単に、次のようにして、ある関数を $() 関数に渡せばよいのです。
$(function() {
// run this when the HTML is done downloading
});
|
ここまでは、$() 関数を使うための、3 つの異なる方法を説明しました。4 番目の方法では、文字列を使って要素を作成することができ、その結果、作成した要素を含む jQuery オブジェクトが完成します。リスト 3 は、ページに段落を追加する例を示しています。
リスト 3. 単純な段落を作成して加える
$('<p></p>')
.html('Hey World!')
.css('background', 'yellow')
.appendTo("body");
|
上の例から気付いたかもしれませんが、jQuery にはもう 1 つの強力な機能、メソッド・チェーンがあります。jQuery オブジェクトの、あるメソッドを呼び出すと、そのメソッドは必ず同じ jQuery オブジェクトを返します。これはつまり、jQuery オブジェクトの複数のメソッドを呼び出す必要がある場合、セレクターを再入力せずに、次のように行えることを意味しています。
$('#message').css('background', 'yellow').html('Hello!').show();
|
Ajax が単純に
jQuery を使うと、それ以上簡単にならないほど Ajax が簡単になります。jQuery には、容易なことを本当に容易に、そして複雑なことを可能な限り単純にする、いくつかの関数があります。
Ajax の一般的な使い方では、ページのある領域に HTML の塊をロードします。そのためには、単に必要な要素を選択し、load() 関数を使えばよいのです。下記は、ある統計を更新する例です。
$('#stats').load('stats.html');
|
多くの場合、単に何らかのパラメーターをサーバー上のページに渡す必要があります。ご想像のとおり、これも jQuery も使えば信じられないほど単純になります。この場合は、どのメソッドが必要かによって、$.post() あるいは $.get() のいずれかを選択することができます。もし必要な場合には、オプションとしてデータ・オブジェクトやコールバック関数を渡すことができます。リスト 4 は、データを送信し、コールバックを使用する簡単な例を示しています。
リスト 4. Ajax を使ってページにデータを送信する
$.post('save.cgi', {
text: 'my string',
number: 23
}, function() {
alert('Your data has been saved.');
});
|
複雑な Ajax スクリプトを作成したい場合には、$.ajax() 関数が必要です。xml、あるいは html、script、json を指定すると、jQuery はそのコールバック関数の結果を自動的に準備するため、その結果をすぐに使うことができます。また、beforeSend や error、success、complete などのコールバックを指定することで、Ajax のエクスペリエンスに関する多くのフィードバックをユーザーに返すことができます。さらに、Ajax リクエストのタイムアウトを設定する、あるいはページの「最終更新」状態を設定する、他のパラメーターもあります。リスト 5 は、上述のパラメーターをいくつか使って XML 文書を取得する例を示しています。
リスト 5. 複雑な Ajax が $.ajax() によって単純になる
$.ajax({
url: 'document.xml',
type: 'GET',
dataType: 'xml',
timeout: 1000,
error: function(){
alert('Error loading XML document');
},
success: function(xml){
// do something with xml
}
});
|
success コールバックで XML を取得したら、HTML を分析する場合と同じように、jQuery を使って XML を分析することができます。これによって、XML 文書を処理し、また XML 文書のコンテンツとデータを Web サイトに統合する作業が容易になります。リスト 6 は、XML の各 <item> 要素に対応して Web ページにリスト項目を追加するように success 関数を拡張する例を示しています。
リスト 6. jQuery を使って XML を処理する
success: function(xml){
$(xml).find('item').each(function(){
var item_text = $(this).text();
$('<li></li>')
.html(item_text)
.appendTo('ol');
});
}
|
HTML をアニメーション化する
jQuery を使うと、基本的なアニメーションとエフェクトを処理することができます。アニメーション・コードの中心となっているのは、animate() 関数です。この関数は、時間の経過に合わせて CSS の任意の数値を変更することができます。例えば、高さや幅、透明度、位置などをアニメーション化することができます。また、アニメーションのスピードを、ミリ秒で、あるいは事前定義されたスピード (例えば遅い、普通、速い、など) で指定することができます。
下記は、ある要素の高さと幅を同時にアニメーション化する一例です。開始値がなく、終了値しかないことに注意してください。開始値としては、その要素の現在の大きさが使われます。ここではコールバック関数も追加してあります。
$('#grow').animate({ height: 500, width: 500 }, "slow", function(){
alert('The element is done growing!');
});
|
jQuery の組み込みの関数を使うと、一般的なアニメーションを容易に実現することができます。例えば show() 要素や hide() 要素を、その瞬間だけ、あるいは指定されたスピードで使うことができます。また、求めるエフェクトの種類に応じて、fadeIn() と fadeOut()、あるいは slideDown() と slideUp() を使うことで、要素を表示させたり隠したりすることもできます。下記は、ナビゲーションを下にスライドさせる簡単な例です。
$('#nav').slideDown('slow');
|
DOM Scripting とイベント処理
jQuery が最も得意なことは、おそらく DOM Scripting とイベント処理を単純化することでしょう。jQuery を使うと、DOM を容易にトラバースしたり操作したりすることができ、またイベントの追加、削除、呼び出しもとても簡単に行うことができます。そして、手動で処理するよりも、はるかに間違いを少なくすることができます。
要は jQuery によって、DOM Scripting を使った一般的なことを容易に行えるのです。つまり要素を作成することができ、append() 関数を使ってその要素を別の要素にリンクでき、clone() 関数を使って要素を複製でき、html() 関数を使ってコンテンツを設定でき、empty() 関数を使ってコンテンツを削除でき、remove() 関数を使って要素を完全に削除でき、さらには wrap() 関数を使って要素を別の要素でラップすることもできます。
jQuery オブジェクト自体の内容を、DOM をトラバースすることで変更できる関数もいくつかあります。例えば、ある要素のすべての siblings() や parents()、children() を取得することができます。また、next() あるいは prev() という兄弟要素を選択することもできます。おそらく最も強力な関数は、find() でしょう。find() 関数を使うと、jQuery オブジェクトの中にある要素の子孫を、jQuery セレクターを使って検索することができます。
こうした関数を end() 関数と組み合わせて使うと、一層強力になります。end() 関数はアンドゥ機能と似ており、jQuery オブジェクトを、find() あるいは parents() あるいは他のトラバース関数の中の 1 つを呼び出す前の状態に戻します。
こうした関数をメソッド・チェーンと組み合わせて使うと、複雑な操作も単純に見えるようになります。リスト 7 は、ログイン・フォームを見つけ、その前後にあるいくつかの要素を操作する例を示しています。
リスト 7. DOM を容易にトラバースし、操作する
$('form#login')
// hide all the labels inside the form with the 'optional' class
.find('label.optional').hide().end()
// add a red border to any password fields in the form
.find('input:password').css('border', '1px solid red').end()
// add a submit handler to the form
.submit(function(){
return confirm('Are you sure you want to submit?');
});
|
信じられないかもしれませんが、この例は、たった 1 行にチェーン (連結) されたコードを、空白を使って広げたものなのです。最初にログイン・フォームを選択しています。次にそのフォームの中にあるオプションのラベルを見つけ、それを隠し、そして end() をコールして、フォームに戻っています。パスワード・フィールドを見つけ、枠を赤にし、そして再度 end() をコールしてフォームに戻っています。最後に、送信イベント・ハンドラーをフォームに追加しています。ここで特に興味深いことは (明らかに簡潔なことを除くと)、jQuery がすべてのクエリー操作を完全に最適化しており、すべてがきれいにチェーンされれば要素を 2 度探す必要がない点です。
一般的なイベントの処理は、click() や submit()、あるいは mouseover() などの関数をコールし、それをイベント・ハンドラー関数に渡すのと同じぐらい単純な作業です。さらに、bind('eventname', function(){}) を使ってカスタムのイベント・ハンドラーを割り当てるオプションもあります。また、あるイベントを unbind('eventname') を使って削除したり、あるいはすべてのイベントを unbind() を使って削除したりすることもできます。これらの関数や他の関数の使い方の完全なリストについては、「参考文献」にあげた、jQuery の API (application program interface) ドキュメンテーションを参照してください。
jQuery のセレクターの能力を最大限に利用する
要素を選択する場合、通常は ID (#myid など) あるいはクラス名 (div.myclass) などによって選択します。しかし jQuery には、やや複雑で完全なセレクター構文があり、ほとんどすべての要素の組み合わせを、1 つのセレクターで選択することができます。
jQuery のセレクター構文は、CSS3 と XPath に大きく依存しています。CSS3 と XPath の構文を詳しく知っていれば知っているほど、jQuery を使いこなすことができます。CSS3 と XPath を含む jQuery のセレクターの完全なリストについては、「参考文献」にあげたリンクを参照してください。
CSS3 には、すべてのブラウザーでサポートされているわけではないため頻繁には目にしない、いくつかの構文が含まれています。それでも jQuery には、jQuery 独自の、カスタムのセレクター・エンジンがあるため、CSS3 を使って要素を選択することができます。例えば、テーブルの中にある、すべての空の欄にダッシュを追加するためには、:empty 疑似セレクターを使います。
では、特定のクラスを持たない要素をすべて見つけるにはどうするのでしょう。CSS3 にはそのための構文もあり、:not 疑似セレクターを使います。下記は、required というクラスを持たない入力をすべて非表示にする例です。
$('input:not(.required)').hide();
|
また、複数のセレクターを、(CSS の場合と同じように) カンマを使って 1 つのセレクターとして結合することもできます。下記は、ページ上にある、すべてのタイプのリストを同時に隠す例です。
XPath は、文書中の要素を見つけるための強力な構文です。XPath は CSS とは少し異なり、CSS では行えない、いくつかのことを行うことができます。例えば、すべてのチェック・ボックスの親要素に枠を追加するためには、次のように XPath の /.. 構文を使います。
$("input:checkbox/..").css('border', '1px solid #777');
|
jQuery には、CSS あるいは XPath にはないセレクターが追加されています。例えば、テーブルを読みやすくするために、通常はテーブルの奇数行あるいは偶数行ごとに別のクラス名を付加します (これはテーブルのストライピングとして知られています)。しかし jQuery には :odd 疑似セレクターがあるおかげで、これを簡単に行うことができます。下記の例では、テーブルのすべての奇数行の背景を、striped クラスを使って変更しています。
$('table.striped > tr:odd').css('background', '#999999');
|
これらを見ると、jQuery のセレクターの能力を使って、どのようにコードを単純化できるのかがわかると思います。どのように要素を選択したいかによらず、あるいはどれほど明白な定義か、どれほどあいまいな定義かによらず、1 つの jQuery セレクターを使って要素を定義できる方法を見つけられるはずです。どんな要素を選択したいとしても、それがどれほど具体的もしくは曖昧でも、1 つの jQuery セレクターを使ってその要素を明らかにする方法を見つけられるはずです。
プラグインを使って jQuery を拡張する
jQuery 用のプラグインの作成は、大部分のソフトウェアの場合とは異なり、複雑な API を伴うたいへんな作業ではありません。実際、jQuery のプラグインは非常に容易に作成できるため、コードをさらに単純にするためのプラグインを、皆さん自身もいくつか作成したくなるかもしれません。下記は、最も基本的な jQuery のプラグインです。
$.fn.donothing = function(){
return this;
};
|
このプラグインは単純ですが、少し説明が必要です。第 1 に、すべての jQuery オブジェクトに関数を追加するためには、その関数を $.fn に割り当てる必要があります。次にこの関数は、メソッド・チェーンを壊さないように、this (jQuery オブジェクト) を返す必要があります。
この簡単な例を元に、容易にプラグインを作成することができます。css('background') を使う代わりに、背景を変更するプラグインを作成するためには、下記を使います。
$.fn.background = function(bg){
return this.css('background', bg);
};
|
単に css() の値を返すだけで済んでいることに注意してください。これは、css() が既に jQuery オブジェクトを返しているためです。そのため、メソッド・チェーンは相変わらず問題なく動作します。
何かを繰り返さなければならない場合には、jQuery のプラグインを使うようにお勧めします。例えば、each() 関数を使って同じことを何度も繰り返し行う場合には、プラグインを使うことができます。
jQuery のプラグインは非常に容易に作成できるため、既に何百ものプラグインが利用できるようになっています。jQuery には、タブのためのプラグインやコーナーを丸めるためのプラグイン、スライド・ショーやツール・チップ、日付セレクターのためのプラグインの他、おそらく想像できるあらゆるプラグインがあります。プラグインの完全なリストについては、「参考文献」を参照してください。
最も複雑で最も広く使われているプラグインは Interface です。Interface はアニメーション・プラグインであり、ソートやドラッグ・アンド・ドロップ機能、複合エフェクト、その他興味深く複雑な UI (user interface) の処理を行います。jQuery にとっての Interface は、Prototype にとってのScriptaculous のようなものです。
一般的で便利なプラグインとして、Form プラグインもあります。Form プラグインを使うと、Ajax を使ってバックグラウンドで容易にフォームを送信することができます。このプラグインは、フォームの送信イベントを奪い取る必要があるような一般的な状況に対応し、さまざまな入力フィールドを見つけ、それらを使って Ajax コールを作成します。
jQuery を学んでから
ここで紹介した内容は、jQuery を使って実現できることの、ほんの一部にすぎません。jQuery では、とても自然に見える新しいトリックや機能を常に学ぶことができるので、とても楽しく使うことができます。また jQuery を使い始めた瞬間から、JavaScript や Ajax のプログラミングが非常に単純なものになります。そして何か新しいことを学ぶたびに、コードは少しずつ単純になっていきます。
私は jQuery を学んで以来、JavaScript 言語でのプログラミングが非常に楽しくなりました。jQuery が退屈な作業をすべて処理してくれるため、私は興味のある部分のコーディングに集中することができます。jQuery を使い始めたおかげで、最後に for ループを作成したのはいつか、ほとんど覚えていないほどです。さらには、他の JavaScript ライブラリーを使うことを考えることすら避けるようになりました。jQuery は、正直なところ、そして本当に、JavaScript プログラミングに対する私の見方を永遠に変えてしまったのです。
参考文献 学ぶために
製品や技術を入手するために
-
jQuery のサイトを訪れ、ソース・コードをダウンロードしてください。
-
Selectors には、CSS3 や XPath のセレクターを含め、jQuery で使用できるすべてのセレクターの完全なリストがあります。
-
jQuery plug-ins には、入手可能な jQuery プラグインが、ほぼ完全にリストされています。
- アニメーションや視覚効果、ドラッグ・アンド・ドロップ機能、そして UI のための、jQuery の究極的なプラグイン、Interface を試してみてください。
議論するために
著者について  | 
| | Jesse Skinner は JavaScript と CSS を専門とするフリーの Web 開発者です。彼はカナダからドイツに移住し、より楽しく Web を使えるように、そして CSS のブラウザー互換性に関する古代の神秘を解明しようとしています。彼に関して詳しく知りたい方、あるいは Web 開発について読みたい方は、彼のブログ、The Future of the Web を調べてみてください。 |
記事の評価
| 
