著作権このドキュメントに記載されている情報はこのドキュメントの発行時点におけるマイクロソフトの見解を反映したものですマイクロソフトは市場の変化に対応する必要があるためこのドキュメントの内容に関する責任を問われな

(1)

Visual Studio Do-It-Yourself シリーズ

第 15 回 jQuery

(2)

著作権

このドキュメントに記載されている情報は、このドキュメントの発行時点におけるマイクロソフトの見解を反映したものです。マイクロソフトは市場の変化に対応する必要があるため、このドキュメントの内容に関する責任を問われないものとします。また、発行日以降に発表される情報の正確性を保証できません。このホワイトペーパーは情報提供のみを目的としています。明示、黙示、または法令に基づく規定に関わらず、これらの情報についてマイクロソフトはいかなる責任も負わないものとします。この文書およびソフトウェゕを使用する場合は、適用されるすべての著作権関連の法律に従っていただくものとします。このドキュメントのいかなる部分も、米国 Microsoft Corporation の書面による許諾を受けることなく、その目的を問わず、どのような形態であっても、複製または譲渡することは禁じられています。ここでいう形態とは、複写や記録など、電子的な、または物理的なすべての手段を含みます。ただしこれは、著作権法上のお客様の権利を制限するものではありません。マイクロソフトは、この文書に記載されている事項に関して、特許、申請中特許、商標、著作権、および他の知的財産権を所有する場合があります。別途マイクロソフトのライセンス契約上に明示の規定のない限り、このドキュメントはこれらの特許、商標、著作権、またはその他の知的財産権に関する権利をお客様に許諾するものではありません。別途記載されていない場合、このドキュメントで使用している会社、組織、製品、ドメイン名、電子メールゕドレス、ロゴ、人物、場所、出来事などの名称は架空のものです。実在する商品名、団体名、個人名などとは一切関係ありません。

Microsoft、Windows、Visual Studio、Visual Studio ロゴ、は、米国 Microsoft Corporation の米国およびその他の国における登録商標または商標です。他のすべての商標は、それぞれの所有者の財産です。

(3)

ASP.NET Do-It-Yourself 第 15 回は、jQuery について学習します。jQuery は、もともと John Resig 氏によって開発されたオープンソースのライブラリで、JavaScript ライブラリとしては比較的後発のものですが、以下のような特長から多くの開発者の支持を集め、急速に普及しました。

・「Write Less, Do More」 (より少ないコードでより多くのことを) がモットー・ Internet Explorer 、Firefox、Safari、Opera、Chrome などの主要ブラウザに対応

・文書ツリーの操作からゕニメーション効果、Ajax 対応まで、クライゕントサイド開発に関わる機能を総合的にサポート

・にも関わらず、とても軽量 (サイズは 26 KB)

・高機能な UI 機能を提供する jQuery UI をはじめ、拡張プラグインが豊富

マイクロソフトでも 2008 年 10 月から正式に jQuery のサポートを開始しており、ASP.NET 4 でも標準的な JavaScript ライブラリとして採用しています。今後、ASP.NET 環境で Ajax 開発を行う場合、ASP.NET AJAX と共に jQuery の理解は欠かせないものとなっていくことでしょう。

この jQuery について、今回は以下の内容について学習していきます。

・ Visual Studio で jQuery を利用する方法・ jQuery による基本的な DOM 操作

・ jQuery による Ajax プログラミングの基本

■Visual Studio で jQuery を利用する方法

冒頭でも述べたように、Visual Studio 2010 では jQuery を標準でサポートしています。(「空の～」でない) Web サイトプロジェクトを新たに作成してみましょう。できたプロジェクトをソリューションエクスプローラーから確認してみましょう。

(4)

/Scripts フォルダ配下に、デフォルトで jQuery の実行フゔイルが配置されていることが確認できます。それぞれのフゔイルの概要は、表の通りです。 No. ファイル名 概要 1 jquery-1.4.1.js 圧縮なしのコメント／改行付き jQuery ソース 2 jquery-1.4.1.min.js 圧縮された jQuery ソース (コメント／改行などは除去) 3 jquery-1.4.1-vsdoc.js ドキュメンテーションコメントを含む jQuery ソース本番環境で jQuery を動作させるのに最低限必要であるのは 2. のみです。1. 、3. もソースコードの内容は同じですが、利用の目的が異なります。1. は改行やコメントが入って読みやすい状態になっていますので、開発時に jQuery のソースを確認するために利用できます。3. は Visual Studio で jQuery のインテリセンス機能を動作させるために必要なフゔイルです。開発時は、デフォルトで用意された 3 種類の .js フゔイルを削除せずに、そのまま利用するようにすると良いでしょう。

■jQuery のインテリセンスを有効化する

Visual Studio のソースビューで jQuery のインテリセンス機能を有効化するには、以下の方法があります。

(1) jQuery をページにインポートする

(5)

または、

<asp:ScriptManager ID="manager" runat="server"> <Scripts> <asp:ScriptReference Path="~/Scripts/jquery-1.4.1.min.js" /> </Scripts> </asp:ScriptManager> (2) <reference> タグで宣言する独立した .js フゔイルから jQuery を利用する場合には、以下のようにスクリプトフゔイルの先頭で <reference> コメントタグを追加します。 /// <reference path="jquery-1.4.1.min.js"/> (1) (2) いずれかの操作を行った状態で、「$(‘*’).」とタイプしてみると、以下の図のように jQuery で利用できるメソッドが候補表示され、インテリセンス機能が有効になっていることが確認できます。もちろん、メソッドの引数を入力していくと、メソッドのシグニチャに関する情報も表示されます。

(6)

■jQuery の基本

jQuery は実にさまざまな機能を備えていますので、本稿でその機能を網羅することは困難です。しかし、以下のテーマについて理解しておくことで、今後、jQuery を学習していく上でも理解が早まるはずです。・ $ 関数・メソッドチェーン・イベントリスナ・ Ajax 通信

●CSS セレクタで目的の要素を取得する－ $ 関数－

$ 関数は、文書内の要素を取得するための関数で、jQuery のもっとも基本的で、特徴的な機能でもあります。 jQuery プログラミングのほとんどは、まず $ 関数の呼び出しから始まることからも、$ 関数の理解は jQuery を理解する第一歩と言って良いでしょう。

まずは、具体的なサンプルから見てみましょう。以下は、「id 属性が “list” である <ul> 要素配下から、class 属性が ”home” である <img> 要素を取り出し、2 秒かけてサイズを大きくする」サンプルです。

(7)

$('ul#list img.home').animate({ width: 130, height: 130 }, 2000); </script> サンプルの実行結果は、以下の通りです。目的の画像を特定し、ゕニメーションさせるという機能がわずかに 1 行のコードで実装できてしまうのです。 → 動作が確認できたところで、$ 関数の詳細について見てみましょう。$ 関数の最大のポイントは要素抽出の条件を CSS セレクタで指定できるという点です。CSS セレクタとは、CSS スタイルを特定するための記法のことです。CSS 開発に慣れた人であれば新しい記法を覚える必要がないのはもちろん、要素特定の表現力に優れており、複雑な抽出条件もごく短いコードで表現できます。

たとえばサンプルでは、 ”ul#list img.home” の部分が CSS セレクタによる表現です。”ul#list” は「id 属性が “list” である <ul> 要素」を、空白区切りでうしろに続く “img.home” は「その配下の、class 属性が “home” である <img> 要素」を意味します。

(8)

jQuery オブジェクトが表す要素群に対してゕニメーション効果を適用するためのメソッドです。この例では、 2 秒 (2000 ミリ秒) かけて画像の縦横サイズを 130 × 130 に変化させています。ここで、jQuery では複数の要素を処理する場合にも、ループ処理を記述する必要がない点に注目してください。jQuery オブジェクトは、内部的にすべての要素セットに対して処理を適用するためです。

●処理を連鎖的に記述できる－メソッドチェーン－

jQuery のメソッドの大部分は戻り値として jQuery オブジェクトを返します。メソッドチェーンとは、jQuery のこの性質を利用して、関係するメソッドをチェーン (鎖) のようにドット演算子で接続していく記法のことです。

たとえば、先ほどのサンプルでサイズ変更した後、3 秒かけてスライドゕップし、更にその後の 3 秒でスライドダウンするように書き換えてみましょう。

$('ul#list img.home').animate({ width: 130, height: 130 }, 2000) .slideUp(3000).slideDown(3000);

</script>

メソッドチェーンを利用することで、一連の処理をまとめて記述できるので、コードがシンプルになります。のみならず、$ 関数によって得られた要素セットをいちいち変数に格納する必要がなくなりますので、名前空間の汚染を最小限に抑えられます。

(9)

→

●jQuery によるイベント処理

jQuery によるイベント処理は単純です。以下は、先ほどのサンプルを書き換えて、(ページロード時ではなく) ボタンをクリックしたタイミングでゕニメーション処理を実行する例です。

$(':button').click(function() {

$('ul#list img.home').animate({ width: 130, height: 130 }, 2000) .slideUp(3000).slideDown(3000);

(10)

</script> イベントに応じて実行されるイベントリスナを定義するには、「$(セレクタ式).イベント名(イベントリスナ)」の形式で定義するだけです。ここでは$(‘:button’) (すべてのボタン) に対して click メソッドを呼び出していますので、イベントリスナはボタンがクリックされたタイミングで呼び出されます。イベント名では、click の他にも change、dblclick、focus、keypress など、基本的なイベントを指定できます。

●jQuery による Ajax 通信

最後に、jQuery を利用した Ajax 通信について見てみましょう。以下のサンプルは、[時刻表示] ボタンをクリックすると、サーバサイドから現在時刻を読みだして、ページの下部に反映します。 → サーバサイドで現在時刻を返すコードは、以下の通りです。フゔイル名は CurrentTime.aspx としておきます。 <%@ Page Language="C#" %> <%= DateTime.Now.ToString(); %> CurrentTime.aspx にゕクセスし、ページに現在時刻を反映させるコードは、以下の通りです。 <form>

</form>

// (2) キャッシュを無効にする $.ajaxSetup({ cache: false });

(11)

// (1) ボタンクリック時に現在時刻をリフレッシュ $(':button').click(function() { $('div#result').load('CurrentTime.aspx'); }); </script> (1) はボタンクリック時に呼び出される click イベントリスナを定義しています。load メソッドは、指定された URL に対して非同期通信を行い、その結果を現在の要素 (ここでは id 属性が “result” である <div> 要素) に対して反映させます。ただし、Internet Explorer 環境ではキャッシュ機能が働いて、2 度目以降のリクエスト結果が正しく反映されません。そこで (2) でキャッシュを無効化しているわけです。$.ajaxSetup メソッドは、Ajax に関わるオプションを設定します。cache パラメータは、ブラウザによるコンテンツキャッシュを有効にするかどうかを決定します。

■まとめ

今回は、Visual Studio 環境で jQuery を利用する方法、及び、jQuery の基本的な用法について学習しました。 jQuery の機能は多岐にわたりますが、まずは本稿の内容をきちんと理解しておけば、今後の学習の確かな基盤ともなるはずです。その他の機能については、以下の記事も参考になりますので、合わせて参照してみてください。

jQuery 逆引きリフゔレンス (http://www.atmarkit.co.jp/fdotnet/jqueryref/index/)