jQuery入門（その1）

はじめに

　実を言うと、私はずっとJavaScriptを嫌っていました。JavaScriptのコードを書くのが嫌でしたし、いろいろなブラウザに対応するために大量のスクリプトコードを使わなければならないのも嫌でした。そうした点は今でも変わらないのですが、最近になってJavaScriptへの理解が深まったことと、jQueryという小さなJavaScriptクライアントライブラリのおかげで、クライアント中心のAJAXスクリプトコードを書かなければならないときでも恐怖を抱かなくなりました。それどころか、今では喜んで引き受けるほどになっています。クライアントロジックがもっと複雑になり、ブラウザの機能や実装の多様化がさらに進んだとしても、jQueryをはじめとするクライアントライブラリが、JavaScriptやHTML DOMを扱う際に必要な正規化を提供してくれます。

　私はJavaScriptの初心者として活動を始め、長いことそのレベルにとどまっていました。妥当性検査や単純な操作タスクを実現するためにJavaScriptをあちこちで使ってはいましたが、本気でJavaScriptに取り組むようになったのはほんの数年前、AJAXが登場したときのことでした。その後、多少時間はかかりましたが、それまでは考えたこともなかった現代的なJavaScriptの概念――例えばクロージャの効果的な使い方、プロトタイプモデル、クラス定義、関数をコードとして使用する方法など――を学び、なんとか追いつくことができました。これらはいずれも、C#などの静的言語を扱う際に知っておきたい概念です。

　しかし、JavaScriptに多少詳しくなっても、それだけで十分とは言えません。最近のスマートなプログラマは、生のJavaScriptだけでDOMプログラミングをしたりはしません。その代わりに、ブラウザ固有の動作に対処したり、ユーティリティ機能やブラウザ非依存の環境を提供したりするライブラリを利用するのです。私はこの数年で多くのライブラリを調べてみましたが、jQueryは本当に納得のいくものでした。jQueryは非常に単純で直観的な原理に基づく比較的小さなライブラリです。このライブラリは、サイズと機能セットと使いやすさの点でバランスがとれているように思われます。jQueryを数日使ってみただけで使い勝手のよさを感じました。

　jQueryを利用すると驚くほど生産性が向上します。jQueryは学ぶのも使うのも簡単です。jQueryはクライアントサイド開発に関する私の考え方を抜本的に変えたツールの1つであり、もっと言うなら、私のスキルセットを大きく向上させてくれたツールです。また、jQueryのおかげで私の生産性は高まり、JavaScriptで安心して複雑なUIとフロントエンドロジックに取り組めるという自信がつきました。

jQueryの重要な機能

　jQueryの主な機能を次に示します。

DOM要素セレクタ

　jQueryセレクタではDOM要素を選択できるので、jQueryのオペレーショナルなメソッドでそれらの要素に機能を適用できます。jQueryではCSS 3.0の構文（およびいくつかの拡張機能）を使ってドキュメント内の1つまたは複数の要素を選択します。HTMLのスタイルを設定するCSS構文については既によくご存じでしょう。そうでないとしても、重要なCSSセレクタ機能を覚えるのは簡単です。実は私がCSSを本当に理解するようになったのはjQueryのためだと言ってもいいくらいです。CSS構文を使用すると、ID、CSSクラス、属性フィルタ、またはそれらの他の要素との関係によって要素を選択することができます。フィルタ条件同士をつなぐことさえできます。次の例では、単純なセレクタを使ってテーブル内のすべての第2列のTD要素を選択しています。

　 $("#gdEntries td:nth-child(2)")

jQueryオブジェクト「ラップセット」

　セレクタはラップセット（wrapped set）と呼ばれるjQueryオブジェクトを返します。これは選択されたDOM要素がすべて含まれる配列のような構造です。配列のようなラップセットを反復処理したり、インデクサ（例えば$(sel)[0]）を使って個々の要素にアクセスしたりすることができます。さらに重要なことですが、選択した全要素に対してjQueryの機能を適用することもできます。

ラップセット操作

　ラップセットの本当のパワーは、選択した全DOM要素に対してjQueryの操作を同時に適用することにあります。jQuery.fnオブジェクトはラップセットに対して実行できる100個ほどの関数を公開します。これにより、選択したDOMオブジェクトの情報をバッチ的に操作したり取得したりすることができます。例えば、$("#gdEntries tr:odd").addClass("gridalternate")でCSSクラスを追加することにより、テーブル内のすべての行を1つおきに操作することができます。

　jQueryは1つのコマンドでマッチした要素のおのおのに対して.addClass()関数を適用します。.css()などの直観的なメソッドを使用すると、CSSスタイルを直接にgetしたりsetしたりすることができます。これらのメソッドには、代入の型と値についてのブラウザ間の違いに対処するスマートなロジックが含まれています。型に関して言えば、主として数値と文字列の変換です。値に関して言えば、例えばopacityという値は、もしブラウザによって扱いが違うとしても、すべてのブラウザに関して適切なことを行います。.attr()では属性を設定したり取得したりできます。また、.val()、.text()、.html()では値を取得したり設定したりできます。

　選択したDOM要素を複製したり、セレクタとして使用しているHTMLテキストから新しい要素を作成して、それらを.appendTo()や.prependTo()などのメソッドでドキュメントに挿入することができます。新しい要素や選択した要素を.append()または.prepend()する親要素を見つけて使用することもできます。また、基本的ながら便利なエフェクトメソッドを適用して、要素をインテリジェントに.show()したり.hide()したりすることができます（opacity、display、visibilityを調べ、それらの値を調整することによって、要素を表示したり非表示にしたりします）。なお、こうしたことはラップセット内のすべての選択要素に対して行えます。

　大部分のラップセット操作はチェイン可能であり、結果としてjQueryラップセットオブジェクトを返します。これはつまり、いくつものメソッドを1つのコマンドとしてチェイン化できるということです。一度選択すれば、同じオブジェクトに対して繰り返し操作を行えることになります。.find()、.filter()、.add()といったメソッドを使用して、ラップセットをフィルタしたり拡張したりすることもできます。

　これら多くの関数の長所は、実際に我々がやりたいことを実行してくれることと、直観的にオーバーロードできるということです。例えば、.val()メソッドと.text()メソッドは、取得（ゲッター）メソッドと設定（セッター）メソッドの両方の働きをします。数値を扱うメソッドはテキストと数値のいずれの値も受けつけることができます。jQueryはブラウザ依存タグへのCSS割り当てを自動的に調整します。jQueryの関数の数は比較的少ないのですが、それらの関数の多くは直観的な動作を実現するためにオーバーロード機能を提供しています。そのため、比較的小規模なAPIの使い方を覚えれば幅広い機能を実現できるようになります。

単純化されたイベント処理

　JavaScriptコードで行う処理は、DOM操作からAJAX呼び出しにいたるまで、その多くが非同期で、イベントを使用する必要があります。あいにく、イベント処理のDOM実装はブラウザによって大きく異なります。jQueryはイベントのバインドとアンバインドのための簡単なメカニズムと、正規化されたイベントモデルを提供しており、このモデルによって、サポートしているすべてのブラウザでのイベント処理と結果ハンドラのフックが容易になります。

　jQueryのイベントハンドラはイベントを発生させた要素（すなわちthisポインタ）のコンテキストで呼び出され、一貫性のある調整されたブラウザ正規化イベントオブジェクトを受け取ります。

小さなフットプリント

　jQueryはかなりコンパクトな基本ライブラリですが、実用的な機能が数多く含まれています。私はjQueryを使い始めてからまだ日が浅いのですが、自分のコードで既にjQuery関数の85％以上を使っています。このことはjQueryがいかに有用であるかを示すものでしょう。これほどの機能が圧縮した状態で約16KBに収まっているのです（コメント付きで未圧縮状態のもので94KB）。

　その中にセレクタ、ラップセットに対して行える非常に多くの操作、大部分のブラウザに対するDOM正規化、AJAX機能、オブジェクト/配列操作のための多数のユーティリティ関数、種々の基本エフェクト機能などが詰まっています。私のjQueryの利用度の高さから見て、この16KBのスクリプトダウンロードは大変な値打ちものと言えるでしょう。

容易なプラグイン拡張

　jQueryの言語とDOM拡張ライブラリ機能が十分でないとき、jQueryはある単純なプラグインAPIを提供します。このプラグインAPIには一群のDOM要素に対して実行するものとして想像しうるほとんどすべての一般的操作に対応した何百ものプラグインがあります。

　jQueryのAPIは、関数を作成してjQueryラップセットをパラメータとして渡すだけでコアjQueryオブジェクトの操作を拡張できるようになっており、それによってプラグインがそこに作用してjQueryチェイニングに加わることができます。プラグインの数が多いこととjQueryがこれほど短期間に人気を得たことの鍵は、この単純ながら強力なプラグインモデルにあるのでしょう。何か特別な機能が必要になっても、その機能を持つプラグインが既に存在する可能性があります。たとえ存在しなくても、自分で作成したり既存のプラグインを拡張したりすることが簡単に行えます。

　以上でjQueryが何を提供してくれるのか概ねお分かりいただけたと思いますので、この後はjQueryの使い方を簡単に説明します。本稿では、もっぱらクライアントサイドの見地からjQueryのドキュメント操作について概念的な説明を行います。次回の記事では、AJAXコールバック用のサーバーでASP.NETと組み合わせてjQueryを使用する方法と、サーバーサイドのコントロールやコンポーネントとjQueryを統合する方法を解説します。