Cutting Edge

jQuery によるリッチなクライアント スクリプトについて (第 2 部)

Dino Esposito

目次

jQuery イベント化モデル
イベント ハンドラをバインドする
イベントをプログラムでトリガする
特殊なイベント関連メソッド
イベント ヘルパ
視覚的効果
カスタム アニメーション
AJAX 機能
クライアントのキャッシュ
まとめ

強力な Web アプリケーションには強力なクライアント機能が必要です。Web 開発者は、これまで JavaScript を使用してクライアント機能を提供してきました。JavaScript だけでは提供できる機能に制限がありますが、ライブラリとオブジェクト指向によって一部の制限を補うことができます。

多数の JavaScript ライブラリがありますが、結局、どれもが同じように見えてしまいます。何から始めればよいかわからない場合、お勧めしたいのが jQuery です。先月号で説明したように、jQuery にはセレクタ、フィルタ、ラップされたセット、また jQuery の大きな特徴である関数のチェーン機能など便利な機能が備わっています (「jQuery によるリッチなクライアント スクリプトについて (第 1 部)」を参照)。今月は、イベント化モデル、視覚的効果、キャッシュ、AJAX などについて説明します。

jQuery イベント化モデル

多くの場合、ブラウザには固有のイベントの表現があります。Internet Explorer 固有のイベント化モデルがあり、Firefox や Safari も同様です。ライブラリを使用しなかった場合、ブラウザ間でイベントの互換性を保持するのは困難な作業です。そこで、ほとんどすべての JavaScript ライブラリでは、イベントを処理するための抽象モデルを提供する必要があるわけです。jQuery ライブラリも例外ではありません。

jQuery イベント処理 API は、2 つの関数グループに分けられます。ハンドラの追加と削除を行ういくつかの汎用的なイベント メソッドと、多数のヘルパ関数です。汎用的なメソッドは、ヘルパが動作するときの基礎となります。ヘルパは、jQuery プログラミングを簡単かつ効果的に行うために役立ちます。

ラップされたセットの一致する要素に対して、イベント ハンドラのバインドおよびバインド解除を行うことのできるメソッドの一覧を図 1 に示します。

ここで、jQuery でのメソッドと関数の意味に注目しましょう。メソッドは、ラップされたセットの内容を処理するためのコードであり、関数は、ラップされたセットの内容を処理することを特に目的としないコードです。

イベント ハンドラをバインドする

bind メソッドは、ラップされたセット内のすべての要素に対して特定のイベントのハンドラをバインドします。bind メソッドの完全なシグネチャは次のとおりです。

bind(eventName, eventData, eventHandler)

最初の引数は、処理するイベントを示す文字列です。2 番目の引数は、イベントで受け取るすべての入力データを表します。最後に、3 番目の引数はバインドする JavaScript 関数です。

jQuery は抽象イベント化モデルを提供するので、サポートされるイベントの一覧を参照することは重要です。完全な一覧を図 2 に示します。

ブラウザごとに違いがあり、ライブラリで提供される抽象化のレベルがあるため、実際はこの一覧から想像するほど単純ではありません。たとえば、change イベントと select イベントでは適用されるシナリオが大きく異なります。change イベントは、テキスト ボックスやドロップダウン リストなどの入力要素の値の変更を参照します。select イベントは、単純に、入力要素つまり textarea 要素内のテキストの選択を参照します。

mouseover イベントまたは mouseenter イベントと、mouseout イベントまたは mouseleave との間にも多少の違いがあります。これらはほとんど同じ説明になっていますが、mouseover と mouseout の場合はユーザーがマウスを子要素内または子要素外へ移動するときにも発生する点が異なります。子を持たない要素の場合、これらのイベントは等価です。

複数のイベントに対して同一の JavaScript ハンドラを登録できます。その場合は、イベント名を空白で区切ります。次の例では、マウスが特定のスタイルを持つ DIV タグに入る場合、または DIV タグから出る場合に CSS スタイルを切り替えています。

$("div.sensitiveArea").bind("mouseenter mouseleave", 
   function(e) {
        $(this).toggleClass("hovered");
    }
);

bind メソッドの 2 番目の引数はオプションです。このオプションが指定されている場合は、ユーザー定義データがすべてハンドラに渡されることを示しています。図 3 は、やや汎用的な JavaScript ハンドラを使用してテキスト ボックスの CSS スタイルをどのように切り替えるかを示しています。

図 3 テキスト ボックス スタイルを切り替える

<script type="text/javascript">
  $(document).ready( 
     function() {
       $("#TextBox1").bind("focus", 
                           {cssStyle: "focusedTextBox"}, 
                           setCSS);
       $("#TextBox1").bind("blur", 
                           {cssStyle: "focusedTextBox"}, 
                           setCSS);
     }
  );

  function setCSS(e)
  {
     var name = "#" + e.target.name;
     $(name).toggleClass(e.data.cssStyle);
  }
</script>

上記のコードは、純粋に bind 関数の説明を目的としたものであり、スタイルを切り替える方法として正しく動作しない可能性があります。要素にフォーカスがある間に、:focus 擬似クラスを使用して要素に特殊なスタイルを追加する方法をお勧めします。最新のブラウザではその方法がサポートされています。JavaScript ハンドラは、イベント データ構造を宣言して受け取る関数です。このオブジェクトが保持するメンバの一覧を図 4 に示します。

target プロパティが jQuery のラップされたセットではなく DOM 参照オブジェクトを返していることに注目してください。要素の ID を見つけるには、id プロパティまたは name プロパティを呼び出す必要があります。ハンドラは、カスタム データの expando プロパティを通して渡されるデータをすべて受け取ります。

2 つのメソッドにより、イベント データ オブジェクトの定義が完了します。preventDefault メソッドは、イベント後にブラウザで通常実行される既定のアクションが実行されないようにします。たとえば、送信ハンドラの preventDefault を呼び出しても、フォームの送信が行われないようにします。ただし、preventDefault メソッドは、オブジェクトのスタックを通じたイベントのバブリングを停止しません。

これに対して、stopPropagation メソッドは、イベントのバブリングを停止しますが、アクションは停止しません。イベントの伝達を停止し、既定のアクションが行われないようにするには、これらのどちらのメソッドも呼び出さずに、イベント ハンドラから false を返すだけです。

bind メソッドを通してアタッチされたハンドラは、unbind メソッドを使用してデタッチされます。このメソッドは 2 つのオプション パラメータを受け取ります。イベントおよびハンドラの名前です。何も指定されていない場合は、ラップされたセット内のすべての要素からすべてのハンドラが削除されます。

イベントをプログラムでトリガする

trigger メソッド (図 1 を参照) は、指定されたイベントに登録されているハンドラをすべて呼び出すように jQuery に指示します。ユーザーによる特定のボタンのクリックをシミュレートするには、以下を使用します。

$("#Button1").trigger("click");

要素のクリック イベントに登録された JavaScript ハンドラがない場合、このコードは何も行いません。

triggerHandler メソッドは次の 2 つの点で trigger と異なります。1 つには、triggerHandler メソッドによりブラウザの既定のアクションが停止されることです。もう 1 点は、このメソッドが、ラップされたセット全体ではなく 1 つの要素にのみ影響することです。ラップされたセットに複数の一致する要素が含まれている場合、最初の要素のみが、指定されたイベントでハンドラを起動します。

次に示すように、triggerHandler メソッドを使用して、プログラムで入力フィールドのフォーカス イベントをトリガする場合は、入力フォーカスをフィールドに移動するという既定のアクションは行われず、登録された任意のハンドラが実行されます。

 $("#TextBox1").triggerHandler("focus");

図 5 を参照してください。

図 5 フォーカス イベントをプログラムでトリガする

特殊なイベント関連メソッド

jQuery ライブラリは、よく使用されるイベント メソッド (ready、hover、toggle) を提供します。ready メソッドは、DOM でコードによるトラバースおよび操作の準備が整ったときに関数を受け取って実行します。

$(document).ready(
  function() {
...
  }
);

ライブラリには、このようにブラウザのウィンドウ オブジェクトの onload イベントを置き換える機能が必要です。すべての画像がロード済みになると、onload イベントが発生するには遅すぎます。一方、ready イベントは、ページおよびライブラリが完全に初期化されたときに発生します。

hover 関数では、ユーザーがページ要素のセット内に入る、またはセット外に出るときに実行するコードを配置します。hover 関数では 2 つのハンドラを受け取ります。最初の実行は、マウスがラップされたセット内の要素の上に置かれたときです。2 番目の実行は、マウスが要素の領域から出たときです。

最後に、toggle 関数で効率的なタスクを実行します。この関数は 2 つ以上のハンドラを受け取り、ユーザーのクリックに応じて順に実行します。つまり、一致する要素の最初のクリックにより最初のハンドラが実行され、2 番目のクリックで 2 番目のハンドラが実行され、その後も同様に動作します。リストの最後のハンドラが実行された後、それ以降のクリックに対しては、リスト内の最初の関数から順に実行されます。

イベント ヘルパ

jQuery ライブラリは、一般的なイベントのハンドラを簡単に構築するための一連のヘルパ メソッドが付属していることで、より使いやすいものになっています。ヘルパには 2 種類の形式があります。関数パラメータが指定されたものと、指定されていないものです。

パラメータが指定されたヘルパは JavaScript 関数を受け取り、イベントが発生したときに実行します。パラメータが指定されていない場合、メソッドはラップされたセット内のあらゆる要素に対して特定のイベントをトリガします。図 6 に、サポートされるヘルパの一覧と、binder メソッドと trigger メソッドの違いを示します。

次のコードは、click イベントを特定のボタンに登録します。イベントとハンドラの間のバインドは、ドキュメントが完全にロードされてプログラムによる操作の準備が完了するとすぐに発生します。

$(document).ready( function() {
   $("#btnProcess").click(
       function(e) {
this.text("Please wait ... ");
       }
   );
});

scroll、resize、mouse など一部のイベントが、明示的なユーザー アクションによってのみトリガされるのは当然の動作です。図 6 に示すように、このようなイベントには trigger メソッドがありません。

視覚的効果

jQuery ライブラリの人気が高い主な理由の 1 つに、視覚的効果のための組み込みエンジンがあります。ライブラリ内には、カスタムのアニメーションおよびいくつかの機能を構築するための効果的なエンジンがあり、フェーディングやスライディングのような一般的な効果をすばやく実装できます。

定義済みの効果は、動作に使用される CSS 属性に基づいて 3 つのグループに分けることができます。表示、スライディング、およびフェーディングです。図 7 に、ネイティブに使用できるすべての効果を示します。

図 7 のすべてのメソッドは、ラップされたセット内の各要素に適用されます。表示メソッドは、display CSS 属性に基づいて動作し、適切な組み込みアニメーションを使用して要素を表示または非表示にします。たとえば、次のコードでは、ユーザーがボタンをクリックしたときに HTML パネルが表示されます。

$("btnShowOrders").click(
   function(e) {
      $("#panelOrders").show(2000);
   }
);

アニメーションの完了には 2 秒かかります。オプションの引数を使用して、表示メソッドにアニメーションの速度を含めたり、完了時に呼び出すコールバックを指定したりできます。アニメーションのタイプはハードコードされ、コンテンツが左上隅から徐々に表示されます。

スライディング メソッドは、一致する要素の CSS height 属性に基づいて動作します。slideDown メソッドは、ループ内で要素の高さを高くしていくことにより、要素が徐々に見えるような表示を実現します。slideUp メソッドはその逆を実行し、実際の高さから 0 になるまで高さを下げることで要素を徐々に隠していきます。

フェーディング メソッドは、スライディング メソッドに少し似ています。オプションの速度または完了コールバックがサポートされ、opacity CSS 属性に基づいて要素の表示と非表示をループ実行します (図 8 を参照)。

図 8 フェーディング

$("#btnShowOrders").click(
   function(e) 
   {
      // Hide the current panel.
      $("#panelOrders").fadeOut(1000);

      populateOrderPanel();

      // Show new content and when done 
      //apply some CSS styles
      // to denote the new content.
      $("#panelOrders").fadeIn(2000, 
         function() {
            $("#panelOrders").css(...);
         }
      );
   }
);

前の例では、既存の HTML パネルをフェード アウトする方法、非表示のときに更新する方法、およびフェード イン アニメーションを使用して再表示する方法を示しています。明示的な時間 (ミリ秒) を使用することで目的の速度を指定したり、3 つの定義済みの速度をそれぞれ表す文字列 (slow、normal、または fast) を利用したりできることに注目してください。

カスタム アニメーション

図 6 に示した表示効果はすべて jQuery アニメーション エンジンに実装されます。このエンジンの中心は animate 関数です。

function animate( prop, speed, easing, callback ) 
{ 
  …
}

この関数の最初の引数は、プロパティと値のペアの配列です。このプロパティは CSS 属性を参照します。この関数は、一致する要素の CSS プロパティ値が現在の値から指定の値まで変化するようすをアニメーション化します。

その他のオプションの引数を使用して、表示メソッドにアニメーションの速度を含めたり、完了コールバックを指定したりできます。easing 引数は、遷移の間に使用するイージング効果の名前を指定します。組み込まれている 2 つの値は、linear と swing です。その他のイージング オプションは、プラグインを使用して追加できます。

animate メソッド用のサンプル呼び出しを次に示します。

$("#Element1").animate(
   { width: "70%",
     opacity: 0.4,
     borderWidth: "10px"
   }, 
   3000);

アニメーションの最後に、一致する要素の幅、不透明度、および境界線の幅が指定された値になります。アニメーションは 3 秒以内に完了し、CSS 属性値は現在の値から増減して目標の値に達します。

CSS プロパティは、camelCase を使用して指定する必要があります。つまり、最初の文字が小文字になり、それぞれ後に続く語の最初の文字が大文字になります。例として、要素の境界をアニメーション化するには、境界の幅を示す元の CSS プロパティ名の代わりに、"borderWidth" を使用する必要があります。

animate メソッドは、パーセントまたは固定値で指定した分だけプロパティ値を増減させるなど、相対的なアニメーションもサポートします。たとえば、次のコード スニペットは、要素の幅を 20% ずつ大きくし、0.4 という値の分だけコンテンツの明度を暗くする方法を示しています。また、すべての変更が 2 秒間で適用されるように指定しています。

$("#Panel1").animate(
   { width: "+=20%",
     opacity: "-=0.4"
   }, 
   2000);

最後に、jQuery のすべてのアニメーションが自動的にキューに登録され、1 つずつ順に実行されることに注目してください。キューに登録されたアニメーションは、ラップされたセット内の要素で複数の呼び出しをチェーン化するために必須の前提条件です。ただし、キューに登録されたアニメーションは単なる既定の動作です。開発者としては、アニメーションを並列で実行するツールを利用してみましょう。

並列処理を行うには、animate メソッドのオーバーロードを使用してアニメーションのキューを作成する必要があります。

function animate( prop, options )
{
   …
}

前のシグネチャの場合と同じように、最初の引数ではアニメーション化する style 属性のセットを指定し、目的の値を指定します。

2 番目の引数は、アニメーションを構成するオプションのセットを指定します。オプションには、期間、イージング、完了コールバックなどや、キューに登録されたアニメーションかどうかを示すブール値 (既定値は true) があります。

animate 呼び出しのオプションで queue 属性を false に設定することにより、アニメーションをキューに登録せずに即座に実行できます。次のコード スニペットについて考えてみましょう。

$("#div1").animate({ width: "90%" }, {queue:false, duration:5000 });
$("#div1").animate({ fontSize: '10em' }, 1000);
$("#div1").animate({ borderWidth: 5 }, 1000);

最初のアニメーションは、キューに登録されず、即座に実行されます。2 番目のアニメーションはキューに登録されますが、キュー内の最初のアニメーションと見なされるため、すぐに実行されます。実質的な効果としては、最初の 2 つのアニメーションが同時に開始されることになります。3 番目のアニメーションは、キューに登録され、2 番目のアニメーションが終了するとすぐに開始されます (1 秒後)。最初のアニメーションは終了まで 5 秒間かかるので、境界のアニメーションも、要素の幅を変更するアニメーションと並列に実行されます。

AJAX 機能

AJAX 非同期呼び出し用の強固なインフラストラクチャがなければ、現在の JavaScript ライブラリはどうなっていたでしょう。jQuery では、AJAX のサポートは ajax 関数に基づいています。この関数を通じて、Web 要求のすべての要素を制御できます。ajax 関数を呼び出す一般的な方法を次に示します。

$.ajax(
 {
   type: "POST",
   url: "getOrder.aspx",
   data: "id=1234&year=2007",
   success: function(response) {
     alert( response );
   }
 }
);

この関数は、単一のオブジェクトにグループ化されたパラメータのリストを受け取ります。Feasible オプションは、type、url、data、dataType、cache、async、username、password、timeout、および ifModified です。

dataType パラメータは、予測される応答のタイプを示します。cache パラメータ (false に設定された場合) は、要求されたリソースがブラウザでキャッシュされないようにします。type、password、username、url などその他のパラメータの働きは一目瞭然ですね。

ajax 関数のオプションには、基になる XMLHttpRequest オブジェクトのライフサイクル内の各段階で、特定の動作の前に呼び出されるオプションのコールバックもいくつか含まれます。success コールバックは、完了コールバックを示しています。このコールバック関数は、単一の引数で応答を受け取ります。その他のコールバックは、error、beforeSend、および complete です。complete コールバックは、要求の最後に success コールバックまたは error コールバックが呼び出されたときに実行されます。

興味深い点は、ajax 関数が、呼び出し元コードに戻る前に Web 応答を事前処理するコールバックを使用することです。これは dataFilter というコールバックで、XMLHttpRequest によりダウンロードされた未処理の応答を扱います。このコールバックの目的は、必要とされるデータ型に基づいてフィルタリングを行い、不適切な部分が排除されたデータのみが呼び出し元に返されるようにすることです。このコールバック関数が受け取る 2 つの引数は、サーバーから返された未処理データと、dataType パラメータに割り当てられた値です。

jQuery ライブラリを使用する場合は、ajax 関数を直接的に使用することはほとんどありません。getScript、load、getJSON などの AJAX ヘルパを使用するのが一般的です。

次のコードは、必要に応じてスクリプト ファイルを読み込む方法を示しています。スクリプトは読み込み時に自動的に実行されます。

$.getScript("sample.js");

次に使用例を示す load 関数も非常に便利です。load 関数は、HTML マークアップをダウンロードし、それを自動的に現在の DOM に挿入します。次のコードは、メニューをプログラムによって設定する方法を示しています。

$("#menu").load("menu.aspx");

URL のコンテンツは、セレクタに一致する任意の要素の DOM サブツリーにアタッチされます。load メソッドは既定では GET 要求ですが、次に示すようにデータ引数を追加するだけで、これを POST に変更できます。

$("#links").load(
   "menu.aspx", 
   { topElement: "Books" },
   function() 
   {
       // completion callback code
   }
);

上記のように、コールバックに対して、ダウンロード完了時の実行を指定することもできます。

また、URL 内の jQuery セレクタを使用して、受信するマークアップをあらかじめフィルタリングして一致する要素のみを選択することもできます。その場合の構文では、URL に対する selector 式が必要です。次の例では、menuItems という名前の <ul> 要素からすべての <li> 要素を抽出します。

$("#links").load("/menu.aspx ul#menuItems li");

最後に、get、post、および getJSON 関数で直接的な GET および POST を実行し、JSON コンテンツを URL から取得します。

クライアントのキャッシュ

クライアント側のキャッシュは、重要な JavaScript コードに必須です。このコンテキストにおいて、キャッシュとは、開発者が特定の DOM 要素に関連するデータを格納できる配列です。次のコードでは、URL を呼び出して、テキスト ボックスのコンテンツが有効であるかどうかを判断し、その後で IsValid という配列要素に応答をキャッシュします。

var url = "...";
var contentIsValid = $.get(url);
$("#TextBox1").data("IsValid", contentIsValid);

各 DOM 要素には、固有のローカル キャッシュがある場合があります。jQuery では、ラップされたセット内の要素に data メソッドを使用します。

ストアの内容を再度読み取るには、要素の名前を示す引数を 1 つだけ指定して、同じ data 関数を使用します。

alert($("#grid").data("Markup"));

キャッシュに追加された要素を削除するには、removeData 関数を使用します。

expando プロパティではなく deta 関数を使用する方がなぜ適しているかを知っておくとよいでしょう。expando プロパティは、標準でない HTML 属性を使用してカスタム情報を DOM 要素に追加します。これは、確かにクライアント側キャッシュですが、ブラウザによってはカスタム属性が好ましくない場合もあります。その場合は、通常、標準ではない方法で alt や rel など標準の属性を使用します。deta 関数のようなクライアント側キャッシュ フレームワークは、データを古いプレーンな JavaScript オブジェクトに格納し、辞書を使用してターゲット DOM 要素へのリンクを保持します。この方法の場合、ブラウザの競合を回避できます。

まとめ

約 10 年間、JavaScript にはほとんど変更が加えられていません。言語の大幅な見直しが順に行われていますが、言語が完全に定義される時期や、(最も重要なことですが) それがブラウザでサポートされるかどうかはわかりません。昨年、現在の言語と、提案されている新しい ECMAScript 4 言語の間に位置する言語バージョンについて合意が成立しました。この言語バージョンは今日の JavaScript とは大きく異なっています。JavaScript 2.0 を生み出す新しいプロジェクトは、Harmony と呼ばれています。

どう見てもこれから数年間は、効率的かつ効果的なクライアント側の開発を計画するうえで、ブラウザ間ライブラリは信頼できる唯一の方法です。このような状況において、jQuery は非常に優れたライブラリであり、次の Microsoft Web 開発ツールに統合されます。jQuery を理解するにつれ、その良さが実感できると思います。どうぞ jQuery コーディングを楽しんでください。

ご意見やご感想は、cutting@microsoft.com まででお送りください。

Dino Esposito は、IDesign 社のアーキテクトであり、『Microsoft .NET:Architecting Applications for the Enterprise』(Microsoft Press、2008 年) の共著者です。Dino はイタリアに在住し、世界各国で開催される業界のイベントで頻繁に講演しています。ブログは weblogs.asp.net/despos で読むことができます。