Boost」など、さまざまなカンファレンスを企画・運営しています。BOOKS(コードジン・ブックス)は、CodeZineの連載からカットアップした、開発現場の課題解決に役立つ書籍シリーズです。MB)jQueryはHTMLベースのクライアントJavaScriptの開発作業を大幅に軽減してくれる小さなJavaScriptライブラリです。本稿ではjQueryの基本を紹介します。参考資料リソースクイックリファレンスシート書籍はじめに実を言うと、私はずっとJavaScriptを嫌っていました。JavaScriptのコードを書くのが嫌でしたし、いろいろなブラウザに対応するために大量のスクリプトコードを使わなければならないのも嫌でした。した点は今でも変わらないのですが、最近になってJavaScriptへの理解が深まったことと、jQueryという小さなJavaScriptクライアントライブラリのおかげで、クライアント中心のAJAXスクリプトコードを書かなければならないときでも恐怖を抱かなくなりました。それどころか、今では喜んで引き受けるほどになっています。DOMを扱う際に必要な正規化を提供してくれます。私はJavaScriptの初心者として活動を始め、長いことそのレベルにとどまっていました。妥当性検査や単純な操作タスクを実現するためにJavaScriptをあちこちで使ってはいましたが、本気でJavaScriptに取り組むようになったのはほんの数年前、AJAXが登場したときのことでした。その後、多少時間はかかりましたが、それまでは考えたこともなかった現代的なJavaScriptの概念――例えばクロージャの効果的な使い方、プロトタイプモデル、クラス定義、関数をコードとして使用する方法など――を学び、なんとか追いつくことができました。これらはいずれも、C#などの静的言語を扱う際に知っておきたい概念です。JavaScriptに多少詳しくなっても、それだけで十分とは言えません。最近のスマートなプログラマは、生のJavaScriptだけでDOMプログラミングをしたりはしません。その代わりに、ブラウザ固有の動作に対処したり、ユーティリティ機能やブラウザ非依存の環境を提供したりするライブラリを利用するのです。私はこの数年で多くのライブラリを調べてみましたが、jQueryは本当に納得のいくものでした。jQueryは非常に単純で直観的な原理に基づく比較的小さなライブラリです。このライブラリは、サイズと機能セットと使いやすさの点でバランスがとれているように思われます。jQueryを数日使ってみただけで使い勝手のよさを感じました。jQueryを利用すると驚くほど生産性が向上します。jQueryは学ぶのも使うのも簡単です。jQueryはクライアントサイド開発に関する私の考え方を抜本的に変えたツールの1つであり、もっと言うなら、私のスキルセットを大きく向上させてくれたツールです。jQueryのおかげで私の生産性は高まり、JavaScriptで安心して複雑なUIとフロントエンドロジックに取り組めるという自信がつきました。Magazineの2009年1-2月号に掲載されたものですが、許可を得てここに転載しました。今日のJavaScriptの使われ方は初期のJavaScriptとずいぶん違っているので、オブジェクト指向の概念を言語に取り入れている今日のJavaScriptの基本原理を学ぶことが大切です。検討すべき重要な機能は、クロージャ、プロトタイプモデル、DOMイベント処理です。Crockfordのサイトが参考になるでしょう。jQueryの重要な機能jQueryの主な機能を次に示します。DOM要素セレクタjQueryセレクタではDOM要素を選択できるので、jQueryのオペレーショナルなメソッドでそれらの要素に機能を適用できます。3.0の構文(およびいくつかの拡張機能)を使ってドキュメント内の1つまたは複数の要素を選択します。HTMLのスタイルを設定するCSS構文については既によくご存じでしょう。ないとしても、重要なCSSセレクタ機能を覚えるのは簡単です。実は私がCSSを本当に理解するようになったのはjQueryのためだと言ってもいいくらいです。CSS構文を使用すると、ID、CSSクラス、属性フィルタ、またはそれらの他の要素との関係によって要素を選択することができます。フィルタ条件同士をつなぐことさえできます。次の例では、単純なセレクタを使ってテーブル内のすべての第2列のTD要素を選択しています。set)と呼ばれるjQueryオブジェクトを返します。これは選択されたDOM要素がすべて含まれる配列のような構造です。配列のようなラップセットを反復処理したり、インデクサ(例えば$(sel)[0])を使って個々の要素にアクセスしたりすることができます。重要なことですが、選択した全要素に対してjQueryの機能を適用することもできます。ラップセット操作ラップセットの本当のパワーは、選択した全DOM要素に対してjQueryの操作を同時に適用することにあります。jQuery.fnオブジェクトはラップセットに対して実行できる100個ほどの関数を公開します。これにより、選択したDOMオブジェクトの情報をバッチ的に操作したり取得したりすることができます。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を統合する方法を解説します。1999年9月にオープンした、日本初のネットビジネス専門ニュースサイト。最新記事を日本語に翻訳して掲載するとともに、日本独自のネットビジネス関連記事やレポートを配信。Technologies社の社長。FoxProに主軸を置いている。NEW1DMM.comの施策から見る、事業をむしばむ「技術負債」への処方箋──リファクタリングの「言語化」でインシデントを予防2企業の7割超が「2025年の崖」を理解していないことが明らかに。NEW1DMM.comの施策から見る、事業をむしばむ「技術負債」への処方箋──リファクタリングの「言語化」でインシデントを予防2企業の7割超が「2025年の崖」を理解していないことが明らかに。NEW1DMM.comの施策から見る、事業をむしばむ「技術負債」への処方箋──リファクタリングの「言語化」でインシデントを予防2企業の7割超が「2025年の崖」を理解していないことが明らかに。12:00法務担当者、6割超が今後業務で「生成AIを使用したい」と回答。NEW新着記事一覧を見るイベント今後の予定を見るCodeZineは、株式会社翔泳社が運営するソフトウェア開発者向けのWebメディアです。「デベロッパーの成長と課題解決に貢献するメディア」をコンセプトに、現場で役立つ最新情報を日々お届けします。イラストの無断転載を禁じます。記載されているロゴ、システム名、製品名は各社及び商標権者の登録商標あるいは商標です。