Visual Studio 2008 と jQuery

  • Article

Visual Studio 2010 に同梱予定の jQuery ですが、ASP.NET MVC Framework には一足早く含まれています。

 

その前に jQuery について簡単に紹介しましょう。

 

jQuery とは

jQuery とは 2006年初めに Mozilla Corporation のエバンジェリスト　John Resig　(ぢょん・れしぐ)氏によって作られた JavaScript のライブラリで、jQuery.com にて配布されているものです。

Java Script のライブラリというと prottype.js が有名ですが、jQuery はそれよりも軽く、高速に動作すると言われています。

また、ご本人がタグを書いているわけではないと思いますが、米国第 44 第大統領 バラク・オバマ氏のホームページでも jQuery が使用されています。

 

jQuery の特徴と利点

jQuery は "軽量で高速" といった特徴以外にも、以下のような特徴があります。

  • 大量の繰り返しループや DOM Scripting ライブラリー・コールを作成する必要がなくなる
    • メソッドを実行した際に返されるデータ形式が「jQueryオブジェクト」
    • メソッドチェーンで処理をつないで記述できる特徴を持つ
  • MITライセンスとして配布
  • 著作権を表示すれば商用利用、ソース改変、再配布なども可能
  • 豊富なプラグインの追加で機能の拡張が容易

中でも特徴的なのは、DOM 参照のショートカットでしょう。

たとえばブラウザ上に表示されている ID が "title" のエレメントに JavaScript からアクセスする場合、以下のような参照式を記述する必要がありました。

document.getElementById("title")

jQuery では以下の短い記述で同様のことを行うことができます。

$("#title")

また上記の 1 行の記述でコレクションに対し、ループ文の記述なしにアクセスを行うことが可能です。

ex) すべての <p> タグに囲まれた文字列を変更

$("p").text("jQuery wrote"); 

ex) class 属性に "about" と指定されているすべてのエレメントの文字列を変更

$(".about").text("jQuery wrote"); 

jQuery は上記のようなショートカットコード以外にも、以下のようなアニメーション機能も提供します。

メソッド名 効 果
show 表示
hide 非表示
fadeIn 非透可率を上げながら表示
fadeOut 透可率を上げながら非表示
slideDown 下方向にスライドするように表示
slideUp 下方向にスライドするように非表示
slideToggle 上下方向にスライドするように表示/非表示

ex)  <div id="panel"> で囲まれた範囲をスライドアップ/ダウン表示させる

<a href="JavaScript:slideUpDown()">表示/非表示</a> <div id="panel">  ・ ・ ・ </div> <script type="text/JavaScript">   function slideUpDown(){        $("#panel").slideToggle("slow");   }  </script>

 

Visual Studio 2008 SP1 での jQuery の使用

ASP.NET MVC Framework RC 版のプロジェクトには jQuery のライブラリファイル jquery-1.2.6.js が含まれていますので、<script> タグの src 属性にファイルの参照パスを記述すれば、そのまま jQuery のコードを記述して使用することができます。

また、jQuery 用インテリセンス・アノテーション jquery-1.2.6-vsdoc.js も含まれていますので、以下のパッチを Visual Studio 2008 SP1 に追加することにより、jQuery 構文の記述にインテリセンスを使用することができます。

『JScript Editor support for “-vsdoc.js” IntelliSense documentation files - KB958502』
https://code.msdn.microsoft.com/KB958502/Release/ProjectReleases.aspx?ReleaseId=1736

ちなみに β 版 ASP.NET Framework には、jQuery のライブラリファイルは含まれていたものの、インテリセンス用のファイルが含まれていなかったために、以下の URL から、jquery-1.2.6-vsdoc.js を別途入手する必要がありました。

jQuery.com 内の以下のドキュメント内のリンク “Documentation: Visual Studio” をクリックし、ファイル “jquery-1.2.6-vsdoc.js” を入手
https://docs.jquery.com/Downloading_jQuery#Download_jQuery

既存のアプリケーションや Web フォームアプリケーションで jQuery を使用する場合は、以下の順番で行ってください。

  1. Visual Studio 2008 SP1 にパッチを適用
  2. jQuery.com から jQuery のライブラリをダウンロードしてきて、使用しているスクリプトのフォルダに配置
  3. jQuery のライブラリと同じフォルダに jquery-1.2.6-vsdoc.js を配置
  4. HTML の<SCRIPT> タグに jQuery ライブラリへの参照を記述する(※)

(※)Web フォームアプリケーションで ASP.NET AJAX を使用する場合は、ScriptManager コントロールの [Scripts] プロパティに設定すると、ツゥっぽくて良いのかもしれません。

 

プラグインの使用

jQuery には非常に多くのプラグインが用意されており、それらを追加して簡単に機能の拡張を行うことができます。

ここでは例として UI jQuery からダウンロードしたプラグインを使用して <div id="panel"> 内の範囲をマウスでドラッグ可能とする手順について紹介します。

なお、ここではコンテンツ内で jQuery のコードで正常に記述できている環境を想定しています。

1. UI jQuery からダウンロードしたフォルダから、以下のファイルをアプリケーションのスクリプトフォルダにコピー

  ui.core.js
ui.draggable.js

2.　<script> タグにコピーしたファイルへの参照を記述

記述例)

<script type="text/javascript" src="../../Scripts/ui.core.js"></script><script type="text/javascript" src="../../Scripts/ui.draggable.js"></script>

3. </body> タグよりも下の位置に <script> タグを設け、以下の構文を記述

$("#panel").draggable();

プロジェクトを実行し、<div id="panel"> の位置をドラッグしてみてください。

マウスのポインタに合わせて <din id="panel"> 内のコンテンツが移動するのを確認できると思います。

 ―――　・　―――　・　―――　・　―――　・　―――　・　―――　・　―――　・　―――　・　―――　

jQuery は非常に強力で豊富な機能を持っており、有効に活用することで JavaScript の記述作業を軽減するとともに、リッチな UI を簡単に実現することができるようになります。

jQuery.com に詳しいチュートリアルが用意されていますので、ぜひご活用ください。

 では。

 

Real Time Analytics

Clicky