Udostępnij za pośrednictwem

Visual Studio 2010 の 優れた機能（２） jQuery対応

  • Artykuł

  jQueryは、Web プログラマの世界の中で今もっとも人気があるといっても過言ではない、JavaScriptライブラリのひとつです。
  この jQuery が Visual Studio 2010 でサポートされることになったのは、個人的にはとても喜ばしいことだと思っています。
  やはり人気があるだけあって、jQueryは大変使いやすく、記述しなければならないコードも短めで済むので、Web プログラミングもより快適でかつ楽しいものになると思います。
 
  さて、jQueryの実体は、拡張子 .js のJavaScriptファイルです。
  VS2008でも、jQueryを構成する.jsファイルを自分でダウンロードして、自分のプロジェクトファイルに含めて、コードを記述すれば、jQueryライブラリを使用することは可能でした。
  しかし Visual Studio 2010 RC では、そのような準備作業をしなくても、最初からjQueryライブラリを使用できる環境が整っています。

  それでは試してみましょう。
  ここでは、<IMG> タグを使って何かイメージファイルを表示し、それをjQueryライブラリの中に含まれている アニメーション機能を使って徐々に拡大表示させる、という簡単な例を紹介します。
  まず、通常通りVS IDEを起動し、プロジェクトの新規作成から「ASP.NET Web Application」を選択します。
  ここでは C# を使用しましたが、VB でも同様に動作すると思います。
  

  
  
  すると、ASP.NETのプロジェクトが作成されて、そのトップページとして Default.aspx が作成されて、以下のようにそこそこ作りこまれたページが最初から表示されます。
  
  
  
  しかし、ここではこれらのコードは必要ありませんので、思い切って全部消してしまいます。
 
  なお、Solution Explorer を見ると Scripts というフォルダが存在し、このノードを開くとすでに jQuery に関係するスクリプトファイルが配置されていることが確認できます。
  

  
  
  まずは jQuery を使用する前に、<IMG>タグを使ってイメージを表示させるところまで準備します。
  イメージはもちろん何でも構いませんし、インターネット上のURLを直接指定して <Img src="https://...."  /> というような形で記述していただいても構いません。
  ここでは、あらかじめプロジェクトファイルが存在する場所（通常は %userprofile%\Documents\visual studio 2010\Projects\<ソリューション名>\<プロジェクト名> になります）に、Windowsのサンプルピクチャとして用意されている Tulips.jpg をコピーしておき、これを表示させるようにしました。
  

  
  
  この状態で F5 を押して実行すれば、もちろん以下のような結果になります。
  

  
  
  さて、いよいよ jQueryのライブラリを使用します。
  まずは、jQueryのライブラリファイルである jquery-1.3.2.js を使用することを宣言するために、以下のようなコードを <img> タグの下のあたりに追加します。
 
  <script src="Scripts/jquery-1.3.2.js" mce_src="Scripts/jquery-1.3.2.js" type="text/javascript"></script>
 
  この srcの部分の入力時には、以下のように Intellisense が機能しますので、「Pick URL...」を選択して、「Scripts」の「jquery-1.3.2.js」を選択すると間違いなく入力することができます。
  

  

  
  
  続けて、jQueryのライブラリに含まれるアニメーション機能を呼び出すコードを、以下のように記述します。
 
  <script type="text/javascript">
      $('*').animate( { width: 500 }, 5000 );
  </script>
 
 
  このコード中で最初に登場する $()関数が、jQueryの機能のほとんどを呼び出すための取り掛かりになるものです。
  '*' とは、すべての要素を対象とする、という意味のセレクタです。
  animate とは、アニメーション機能を呼び出すためのメソッドです。
  その animation メソッドの引数として、 { width: 500 } と 5000 の二つを渡しているわけですが、
  { width: 500 } は、アニメーション後の最終的な状態を指定しています。
  5000 のほうは、アニメーションにかける時間（単位はミリ秒）です。
 
  したがって、この短いコードを追加するだけで、このページのすべての要素（ここではイメージ１つ）を5秒間かけて横幅が500ピクセルになるようなアニメーションを実行する、という複雑な処理を行うことができるのです。
 
  なお、コード入力時に、jQueryのメソッドなどに対しても Intellisense が機能します。
  

  
  
  最終的なコードは以下のようになります。
  

  
  
  入力ミスなどがないことを確認して、実行（F5）をしてみましょう。
  すると、今度はイメージがだんだん大きくなっていくアニメーションを見ることができるはずです。
  

  
  
  今回のデモ内容は、Visual Studio 2010 RC がインストールされている環境であれば、特に他のアプリケーションをインストールしたりしなくても動作するはずです。実験だけならばIISも立てる必要はありません。
  ぜひ、jQuery が Visual Studio 2010 RC 上で機能するところを体験していただければと思います。