前回は、スタイルの操作、AJAX、フォームの取り扱いについてまとめた。ここでは、機能だけをシンプルに実装できる jQueryを中心としたライブラリについて解説する。
１ ライブラリを使うべき理由
本格的なWebアプリを構築する上でライブラリの使用は不可欠である。また、前述のようにクライアントサイドJavaScriptで一番労力を割かなければならないのはクロスブラウザ対策、特にInternet Explorer対策である。ライブラリを使いこなした上で、いざというときは自分でブラウザの挙動を理解して処理を記述できるようになることが重要である。
２ jQueryの特徴
jQueryは今世界で最も多く利用されているJavaScriptライブラリである。作者はJohn Resig氏である。jQueryは以下の4つの特徴を持つ。
- 圧縮後で31KBと軽量であること
- メソッドチェーンによる記述
- CSS3 セレクタや独自セレクタによる要素の取得
- プラグインによる拡張性の高さ
３ jQueryの基本
記述例
jQueryを使うと、独自セレクタやメソッドチェーンの効果でJavaScriptとは異なる言語であるかのように記述できる。例えばクラスfooである最初のdiv要素がクリックされたときにリンクを作成して追加する処理は、jQueryによって簡潔に記述できる。
メソッドチェーン
メソッドチェーンとは、メソッドをつなげて記述する方法である。jQueryオブジェクトを返すメソッドを実行すれば、その返り値に対してさらにjQueryオブジェクトのメソッドを実行できる。
- メソッドチェーン中のjQueryオブジェクト：jQueryでは返り値のjQueryオブジェクトを変更することで、メソッドチェーンの中で捜査対象の切替を実現している
４ $関数
jQueryの$関数（jQuery関数）は引数によって様々な処理を行う。jQueryの$関数はその場の文脈に合わせて最適な処理を行うようになっている。$関数の機能を以下にまとめる。
セレクタにマッチする要素を抽出する
$関数にCSSセレクタを渡すと、それにマッチする要素を抽出する。また第2引数で、検索する範囲を指定できる。
新しくDOM要素を作成する
$関数にhtmlのタグとして解釈できる文字列を渡すと、その要素を作成できる。
既存のDOM要素をjQueryオブジェクトに変換する
$関数に既存のDOM要素を渡すとその要素をjQueryオブジェクトに変換する。
DOM構築後のイベントリスナを設定する
$関数に関数オブジェクトを渡すと、その関数がDOM構築後に実行されることになる。
５ jQueryによるDOM操作
要素の選択
要素の選択には$関数を使う。
要素の作成・追加・置換・削除
要素の作成には$関数を使う。また、append()メソッドを使うと、要素の追加と作成を同時に実行できる。置換はreplaceWith()メソッドなどを使い、削除にはremove()メソッドなどを使う。
６ jQueryによるイベント操作
イベントリスナの登録・削除
- bind()／unbind()：jQueryでイベントリスナを登録するためにはbind()メソッドを使い、削除するためにはunbind()メソッドを使う
- live()／die()：live()メソッドを使ってもイベントリスナの登録ができ（実行後に追加された要素にも作用）、解除するにはdie()メソッドを使う
- delegate()／undelegate()：delegate()メソッドを使うとdocumentオブジェクト以外のオブジェクトに対してイベントリスナを設定するlive()が実行でき、解除するにはundelegate()メソッドを使う
- one()：bind()の特殊形。one()で登録したイベントリスナは一度だけ実行される
イベント専用のイベントリスナ登録メソッド
標準的なイベントについては専用のメソッドが用意されているため、そちらを利用することもできる。例えばclick、dblclickなど。
ready()メソッド
jQueryでDOM構築後の処理を設定するにはready()メソッドを使う。
７ jQueryによるスタイル操作
基本的なスタイル操作
要素に設定されているクラス名やCSSのプロパティを変更するといった基本的なスタイル操作を行うメソッドがある。例えばcss(prop)、css(prop, val)など。
アニメーション
単純なスタイル変更ではなく、アニメーションを伴ってスタイルを変更させるメソッドも複数用意されている。これらのメソッドの多くが受け取ることができる引数として、以下の3つがある。
- duration：アニメーション完了までの時間を指定する。単位はミリ秒
- easing：アニメーションの加減速（変化させる値の変化量を指定）
- callback：アニメーション完了時処理
jQueryで実行されるアニメーション全体にかかわるプロパティとしてjQuery.fx.intervalとjQuery.fx.offがある。
- jQuery.fx.interval：アニメーションのフレーム間隔を指定する
- jQuery.fx.off：trueを指定するとすべてのアニメーション効果が無効になる
８ jQueryによるAJAX
AJAX()関数
jQueryでAJAX処理にはjQuery.ajax()関数を使う。ajax()関数には引数を2つ指定する。第1引数に対象のURLを指定する。第2引数にはパラメータや使用するHTTPメソッド、コールバック関数などを指定したオブジェクトを渡す。
AJAX()のラッパー関数
ajax()関数にはいろいろなオプションが指定できるが、よく使われる設定や処理については専用のラッパー関数が用意されている。
グローバルイベント
ajax()関数を使うといくつかのイベントが発火する。これらのイベントはどのよう曽爾も適用されるためグローバルイベントと呼ばれる。グローバルイベントを発火させたくない場合は、ajax()関数のオプションでglobalプロパティにfalseを指定する。
９ Deferred
Defferedは非同期処理を直列に記述、実行するための仕組みである。処理の順番を指定しにくいという非同期処理の特徴を解消するための仕組みである。
Deferredの基本
- Deferredオブジェクト：unresolved, resolved, rejectedのいずれかの状態を持つオブジェクト。初期状態はunresolved。状態がresolvedまたはrejectedになってはじめて後続の処理が実行される
- Promiseオブジェクト：Deferredオブジェクトから一部のメソッドを削除したオブジェクト
状態遷移
Deferredオブジェクトの初期状態はunresolvedである。これをresolvedに遷移させるメソッドがresolve()である。同様にrejectedに遷移させるメソッドはreject()である。
後続関数
- then(), done(), fail(), always()：done()は状態がresolvedになった場合に実行する処理を指定する。fail()はrejectedになった場合の処理。then()は両方を指定する。then()の第1引数がresolvedの場合の処理、第2引数がrejectedの場合の処理。always()で指定した処理はresolved,rejected両方で実行される
- pipe()：pipe()はthen()と同じく状態がresolvedになった場合の処理と、rejectedになった場合の処理の2つを引数に受け取る。pipe()には引数の値の変更とDeferredオブジェクトのチェーンという2つの機能がある
並列処理
when()関数を使うと、複数の非同期処理がすべて完了するまで後続の処理を遅延させることができる。
10 jQueryプラグイン
jQueryには様々なプラグインが存在する。プラグインが簡単に作成でき、また他人が作成したプラグインを簡単に利用できることもjQuery人気の後押しとなった。
jQueryプラグインの利用
jQueryでプラグインを利用するには、jQueryライブラリを読み込んだ後でプラグインのJavaScriptライブラリを読み込むだけである。
jQueryプラグインの作成
jQueryのプラグインはjQuery.fnを拡張することで実現されている。
11 他のライブラリとの共存
$オブジェクトの衝突
Prototype.js以降のJavaScriptライブラリも$関数をセレクタメソッドなどの多用するメソッドとして定義している。そのため複数のライブラリを共存させようとすると$という名前は衝突する可能性が高い。
$オブジェクトの衝突回避
jQueryには名前衝突を回避するためにnoConflict()メソッドがある。noConflict()メソッドを使用するとjQueryが定義するwindow.$オブジェクトは削除され、もともと定義されていた$オブジェクトが利用できるようになる。
12 ライブラリの利用方法
ライブラリの利用にはそのライブラリであるJavaScriptファイルを読み込まなければならない。しかし、Google Libraries APIを利用することでJavaScriptライブラリを読み込むことができる。Google Libraries APIはJavaScriptライブラリのコンテンツデリバリネットワーク（CDN）である。例えばChrome Frame、Dojoなど。
最後に
機能だけをシンプルに実装できる jQueryを中心としたライブラリについてまとめた。
メソッドチェーンやプラグインシステムで人気の高いjQueryを中心にライブラリの利用方法をまとめた。ライブラリを使うことで、定型的な処理やクロスブラウザ対策などの煩雑な記述をなくすことができる。現在ではGoogle Libraries APIを利用することでJavaScriptライブラリを読み込むことができるため、有効に活用していきたい。
次回は、統一されたブラウザ仕様の策定が目的である HTML5の概要について解説する。
 |
