jQuery：Dev Basics／Keyword
jQueryはクロスブラウザで動作する、高機能なJavaScriptライブラリであり、現在のWebアプリ開発には欠かすことができない。
jQueryは、HTMLドキュメントの操作やイベント処理、各種のアニメーション効果、Ajaxによる非同期通信など豊富な機能を持ったJavaScriptライブラリだ。クロスブラウザで動作し、現在のWebアプリ開発には欠かすことができないライブラリとなっている。本稿執筆時点（2016年7月11日）での最新メジャーバージョンは「3」となっている。
jQueryでできること
jQueryの特徴は次のようなものだ。
- write less, do more（多くのことを少ないコードで）
- クロスブラウザ
先頭に挙げたようにjQueryは「write less, do more」をモットーとしている（上に示したjQuery公式サイトの左上にある「jQuery」ロゴに注目）。すなわち、Webアプリ（のクライアントサイド）をJavaScriptで記述する際に、よく使う機能や頻繁に行われる処理をライブラリ化してまとめることで「多くのことを少ないコードで」行えるようにしたものがjQueryだといえる。
また、広範な種類のブラウザをサポートしていることもjQueryの特徴だ。jQueryがブラウザ間の差異を吸収してくれるので、数多くのブラウザをサポートしなければならないWebアプリ開発においては、jQueryを使うことで個別のブラウザについて頭を悩ませる必要が少なくなる。
実際にjQueryが提供してくれるのはおおよそ次のような機能だ。
- DOM操作
- イベント処理
- アニメーション効果
- Ajax通信
この他にも、日頃のJavaScriptコーディングを簡単にしてくれる各種のユーティリティー関数が用意されている。また、プラグインを用いることでjQueryを拡張することも可能だ。
以下では、例を見ながら、これらの特徴の幾つかを見ていくことにしよう。
セレクタを用いたDOM操作とイベント処理
jQueryを使用した簡単なWebページの例を以下に示す。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>sample</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script>
$(document).ready(function() {
$('.settitle').on('click', function() {
$('h1').text('DevBasics/keyword jQuery');
});
});
</script>
</head>
<body>
<h1 id='title'></h1>
<button class='settitle'>set title</button>
</body>
</html>
実行結果を以下に示す。
jQueryのロード
ここでは以下のようにしてCDN（Contents Delivery Network）からjQueryファイルを読み込んでいる。
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
$()関数
本稿ではHTMLファイル内に直接JavaScriptコードを記述している。以下にjQueryを利用したJavaScriptコードの例を示す。
$(document).ready(function() {
$('.settitle').on('click', function() {
$('h1').text('DevBasics/keyword jQuery');
});
});
jQueryではHTMLページの読み込みが終わり、DOMが構築されるまでは安全にDOM操作を行えない。「$(document).ready()」メソッドはこのDOM構築が完了し、その操作が可能になると呼び出される。そこでこれを利用して、ページが読み込まれた後にそこで使用するさまざまな処理の準備を行うのが定型パターンとなる（ただし、画像ファイルの読み込みなどは未完了の可能性がある。ページ全体が読み込まれた際に何かをするのであれば「$(document).load()」メソッドを使用する）。
$(document).ready(function() {
…… DOM構築の完了後に一度だけ実行する処理を記述 ……
});
なお、このコードは以下のコードと同様だ。「$(function() {})」および「jQuery(function() {})」は「$(document).ready(function() {})」の簡略記法である。
実際にはjQuery()関数は引数に後述するセレクタやコールバック関数を取るもので、これを「$()」のように簡略表記できる。そして、コールバック関数をjQuery関数に引き渡した場合には、その関数がDOMの構築完了後に実行される仕組みになっている。このため、jQueryを使ったコードでは「$()」という記述がよく見られる。
$(function() {
…… DOM構築の完了後に一度だけ実行する処理を記述 ……
});
jQuery(function() {
…… DOM構築の完了後に一度だけ実行する処理を記述 ……
});
ここではHTML内に記述してある［set title］ボタンがクリックされた際の処理を記述している。ここで使用しているのがセレクタと呼ばれる機構だ。
セレクタ
セレクタは、Webページ（DOM）中に記述されている要素を選択して、操作するために使用する。例えば、上のコードでは次のように2種類のセレクタを使用している。
$('.settitle').on('click', function() {
$('h1').text('DevBasics/keyword jQuery');
});
先ほども述べたが「$()」は「jQuery()」関数の簡略表記であり、これにセレクタを渡した場合には、そのセレクタの内容とマッチする要素がDOMから検索される。
では、最初に内側の「$('h1')」から見ていこう。これは「要素セレクタ」と呼ばれるもので、指定したタグ名（この場合は「h1」）にマッチする要素が選択される。その後のtext()メソッドでそのタグのテキストを設定している。
もう1つの「$('.settitle')」は「クラスセレクタ」と呼ばれるもので、ページ中の要素でclass属性がこのセレクタでの指定とマッチするものが選択される（先頭のドットを除く）。例えば、［set title］ボタンはHTMLコード中で次のように記述されていた。
<button class='settitle'>set title</button>
これにより、［set title］ボタンが選択される。on()メソッドは、選択された要素に対してイベントハンドラーを設定するものだ。ここでは「click」イベントハンドラーを設定している（その内容は上で見たように、<h1>要素のテキストを設定するものだ）。
jQueryには非常に多くの種類のセレクタが用意されていて、Webページ（DOM）内の要素をとても柔軟な形で選択し、それに対してさまざまな操作を加えることができるようになっている。例えば、何らかの条件によって「特定の要素の子要素を一括して選択し、その背景色を設定する」といったことがセレクタ一発で簡単に行える。
アニメーション処理
最後に簡単なアニメーションの例を示す。コードは先ほどとほとんど変わらない。
<!doctype html>
<html>
<head>
…… 省略 ……
<script>
$(function() {
$('#toggle').on('click', function() {
$('h1').toggle('slow');
});
});
</script>
</head>
<body>
<h1 id='title'>DevBasics/keyword jQuery</h1>
<button id='toggle'>show/hide title</button>
</body>
</html>
ここでは<h1>要素には既にタイトルが設定されている。また、セレクタにはIDセレクタを指定している。これはid属性がセレクタで指定されたものにマッチする要素を選択するものだ。コードを見れば分かる通り、IDセレクタは「$('#toggle')」のように「#」に続けてid属性の値を指定する。
イベントハンドラー内では、toggle()メソッドを使用して、<h1>要素の表示／非表示を切り替えている。引数に指定している「'slow'」はこの際に「ゆっくり」と表示の切り替えを行うことを意味する。実行画面は割愛するが、［show/hide］ボタンをクリックすると、アニメーション効果を伴って表示が切り替わるのが分かるはずだ。
このようにWebページに動きを付けるのもjQueryを使えば簡単に行える。自分で、アニメーションを行うためのコードを記述する必要はない（しかも、クロスブラウザで動作する）。「write less, do more」が実現できていることが分かるはずだ。
jQueryはクロスブラウザで動作する、高機能なJavaScriptライブラリであり、現在のWebアプリ開発には欠かすことができない。Visual Studioを使ったWebアプリ開発でもクライアントサイドではjQueryを使用するのが一般的なので、ぜひともマスターしておきたい技術だ。
参考資料
- jQuery： jQuery公式サイト
- Tech Basics／Keyword： jQuery（ジェイ・クエリ）： jQueryの概要をまとめたキーワード解説記事
- jQuery逆引きリファレンス： 兄弟サイトであるBuild InsiderでのjQueryのTIPS連載
- jQuery逆引きリファレンス： 本フォーラム内のjQuery逆引きリファレンス。少々古い記事だが、基本は通じるはずだ
- jQuery×HTML5×CSS3を真面目に勉強： ＠IT内の連載記事
Copyright© Digital Advantage Corp. All Rights Reserved.