Visual Studio Do-It-Yourself シリーズ

第 15 回 jQuery

著作権

このドキュメントに記載されている情報は、このドキュメントの発行時点におけるマイクロソフトの見解を反映

したものです。マイクロソフトは市場の変化に対応する必要があるため、このドキュメントの内容に関する責任

を問われないものとします。また、発行日以降に発表される情報の正確性を保証できません。

このホワイトペーパーは情報提供のみを目的としています。明示、黙示、または法令に基づく規定に関わらず、

これらの情報についてマイクロソフトはいかなる責任も負わないものとします。

この文書およびソフトウェゕを使用する場合は、適用されるすべての著作権関連の法律に従っていただくものと

します。このドキュメントのいかなる部分も、米国 Microsoft Corporation の書面による許諾を受けることな

く、その目的を問わず、どのような形態であっても、複製または譲渡することは禁じられています。ここでいう

形態とは、複写や記録など、電子的な、または物理的なすべての手段を含みます。ただしこれは、著作権法上の

お客様の権利を制限するものではありません。

マイクロソフトは、この文書に記載されている事項に関して、特許、申請中特許、商標、著作権、および他の知

的財産権を所有する場合があります。別途マイクロソフトのライセンス契約上に明示の規定のない限り、このド

キュメントはこれらの特許、商標、著作権、またはその他の知的財産権に関する権利をお客様に許諾するもので

はありません。

別途記載されていない場合、このドキュメントで使用している会社、組織、製品、ドメイン名、電子メール ゕ

ドレス、ロゴ、人物、場所、出来事などの名称は架空のものです。実在する商品名、団体名、個人名などとは一

切関係ありません。

© 2010 Microsoft Corporation. All rights reserved.

Microsoft、Windows、Visual Studio、Visual Studio ロゴ、は、米国 Microsoft Corporation の米国および

その他の国における登録商標または商標です。他のすべての商標は、それぞれの所有者の財産です。

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 サイト プロジェクトを新たに作成してみましょう。できたプロジェクトをソリューション エクスプロー

ラーから確認してみましょう。

/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 をページにインポートする

<script> タグ、または、ScriptManager コントロールで jQuery への参照を追加します。これらは、いずれ

も jQuery をページで利用するために必要な手続きです。具体的には、以下のようなコードを追加します。

<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>

または、

<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 で利用で

きるメソッドが候補表示され、インテリセンス機能が有効になっていることが確認できます。

もちろん、メソッドの引数を入力していくと、メソッドのシグニチャに関する情報も表示されます。

■jQueryの基本

jQuery は実にさまざまな機能を備えていますので、本稿でその機能を網羅することは困難です。しかし、以下

のテーマについて理解しておくことで、今後、jQuery を学習していく上でも理解が早まるはずです。

・ $ 関数

・ メソッド チェーン

・ イベント リスナ

・ Ajax通信

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

$ 関数は、文書内の要素を取得するための関数で、jQuery のもっとも基本的で、特徴的な機能でもあります。

jQuery プログラミングのほとんどは、まず $ 関数の呼び出しから始まることからも、$ 関数の理解は jQuery

を理解する第一歩と言って良いでしょう。

まずは、具体的なサンプルから見てみましょう。以下は、「id 属性が “list” である <ul> 要素配下から、class

属性が ”home” である <img> 要素を取り出し、2 秒かけてサイズを大きくする」サンプルです。

<ul id="list">

<li><img src="images/HomePremium.jpg" class="home" alt="Home Premium" /></li>

<li><img src="images/Professional.jpg" class="pro" alt="Professional" /></li>

<li><img src="images/Ultimate.jpg" class="ultimate" alt="Ultimate" /></li>

</ul>

<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>

<script type="text/javascript">

$('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> 要素」を意味します。

$ 関数は、戻り値として取得した要素 (群) を表す jQuery オブジェクトを返します。animate メソッドは、

jQuery オブジェクトが表す要素群に対してゕニメーション効果を適用するためのメソッドです。この例では、

2 秒 (2000ミリ秒) かけて画像の縦横サイズを 130 × 130 に変化させています。ここで、jQuery では複数

の要素を処理する場合にも、ループ処理を記述する必要がない点に注目してください。jQuery オブジェクトは、

内部的にすべての要素セットに対して処理を適用するためです。

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

jQuery のメソッドの大部分は戻り値として jQuery オブジェクトを返します。メソッド チェーンとは、jQuery

のこの性質を利用して、関係するメソッドをチェーン (鎖) のようにドット演算子で接続していく記法のことで

す。

たとえば、先ほどのサンプルでサイズ変更した後、3 秒かけてスライド ゕップし、更にその後の 3 秒でスライ

ドダウンするように書き換えてみましょう。

<script type="text/javascript">

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

.slideUp(3000).slideDown(3000);

</script>

メソッド チェーンを利用することで、一連の処理をまとめて記述できるので、コードがシンプルになります。

のみならず、$ 関数によって得られた要素セットをいちいち変数に格納する必要がなくなりますので、名前空間

の汚染を最小限に抑えられます。

→

●jQuery によるイベント処理

jQueryによるイベント処理は単純です。以下は、先ほどのサンプルを書き換えて、(ページロード時ではなく) ボ

タンをクリックしたタイミングでゕニメーション処理を実行する例です。

<ul id="list">

<li><img src="images/HomePremium.jpg" class="home" alt="Home Premium" /></li>

<li><img src="images/Professional.jpg" class="pro" alt="Professional" /></li>

<li><img src="images/Ultimate.jpg" class="ultimate" alt="Ultimate" /></li>

</ul>

<input type="button" value="ゕニメーション実行" />

<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>

<script type="text/javascript">

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

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

.slideUp(3000).slideDown(3000);

});

</script>

イベントに応じて実行されるイベント リスナを定義するには、「$(セレクタ式).イベント名(イベントリスナ)」

の形式で定義するだけです。ここでは$(‘:button’) (すべてのボタン) に対して click メソッドを呼び出してい

ますので、イベント リスナはボタンがクリックされたタイミングで呼び出されます。イベント名では、click の

他にも change、dblclick、focus、keypressなど、基本的なイベントを指定できます。

●jQueryによる Ajax 通信

最後に、jQuery を利用した Ajax 通信について見てみましょう。以下のサンプルは、[時刻表示] ボタンをクリ

ックすると、サーバサイドから現在時刻を読みだして、ページの下部に反映します。

→

サーバサイドで現在時刻を返すコードは、以下の通りです。フゔイル名は CurrentTime.aspxとしておきます。

<%@ Page Language="C#" %>

<%= DateTime.Now.ToString(); %>

CurrentTime.aspxにゕクセスし、ページに現在時刻を反映させるコードは、以下の通りです。

<form>

<input type="button" value="時刻表示" />

<div id="result"></div>

</form>

<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>

<script type="text/javascript">

// (2) キャッシュを無効にする

$.ajaxSetup({ cache: false });

// (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/)

次回は、ASP.NET 4 で新たに追加された Chart コントロールについて学習します。