Visual Studio 2012 で jQuery 開発環境を構築

Javascript って王道の IDE （統合開発環境）が無いですよね。
ましてや jQuery もサポートしているものとなると微妙です^{数は結構あるみたいですけど、「とりあえず、これ使っとけ！」みたいなデファクトスタンダードなものが無いという意味です}。

そんな中、Visual Studio が意外と使えるという話を聞いたので、使って見ることにしました。
結論から言うと、結構良いです。
jQuery用の IntelliSense も使えますし、ステップ実行などのデバッグも可能。
Windows でしか使えないというところが残念ですが。

2013/3/18 追記

「結構良い」と書いたのですが、1点欲しい機能が無いことに気づいてしまいました。
それは、「リファクタリング→名前変更」の機能。
変数名や関数名を一箇所変えると、使用している全ての名前が変わるというものです。
IDE には必須の機能だと思うのですが、Visual Studio Express 2012 の Javascript では使用できないようです。
（C# や C++ ではちゃんと使えます。）
うーん。惜しい。

以下、環境構築と簡単な使用方法です。

Visual Studio Express 2012 for Web のインストール

Visual Studio は個人で使うには高すぎるので、私は無償の Express バージョンを使っています。
有償版でも同じように出来ると思いますが、UIなどは若干異なると思います。

入手は以下から可能です
Microsoft Visual Studio Express

過去の Visual Studio Express は C++ や C# など言語ごとの提供でしたが、2012 から、使用目的ごとの提供に変わったようです。
今回は、Javascript を書きたいので for Web をインストールします。

「今すぐインストール」を押して、ウィザードに従っていくとインストール完了です。

プロジェクトを作成

Visual Studio Express for Web を起動して、新しいプロジェクトを作成します。

ファイル → 新しいプロジェクト

プロジェクトの雛形を選ぶウィザードが表示されるので、「ASP.NET 空の Web アプリケーション」を選択。
プロジェクト名などを、適宜入力します。

HTMLファイル／Javascriptファイルを編集する

ファイルの追加は、
プロジェクトを右クリック → 追加 → 新しい項目

新しい項目の追加ダイアログが表示されるので、HTMLなど追加したいファイルの種類を選択します。

HTMLファイルはデザインビューとソースビューで編集することが可能です。
ソースビューではタグの補完などが可能です。

上がソースビュー、下がデザインビュー
並べて表示モード

Javascript ファイルでも IntelliSense が使えます。

しかし、肝心の（？） jQuery に関しては、IntelliSense が全く機能しません。

まぁ、jQuery は単なるライブラリですからね。
デフォルトで使えないのは仕方がありません。

jQuery の IntelliSense を使えるようにする

このままでは、せっかくの環境も使い物にならないので jQuery の IntelliSense を使用可能にします。

プロジェクトを右クリック → NuGet パッケージの管理

オンライン → すべて → jQuery^{もし、見つからない場合は右上の検索ボックスを使用すると良いでしょう} → インストール

Scripts ファオルダが作成され、jQuery ライブラリが追加されます。

これだけで IntelliSense が使用可能になれば良いのですが、残念ながらもう一工夫必要です。

Scripts フォルダの下に _references.js というファイルを作成します。

_references.js の中身に以下のように記述します。

_references.js

/// <reference path="jquery-1.9.1.js" />

すると以下のように、jQuery 用の IntelliSense が使用可能になります。

こりゃ便利。

続き：穀風: Visual Studio で Javascript のデバッグ

穀風