Visual StuidoのJavaScript開発環境＋jQuery＝今のところ最強？

Reactive Extensionsは小休憩して、ちょっくら食わず嫌いしてたjQueryをちょろっとやってみようと思います。jQueryをちょろっと試すだけならテキストエディタでも・・・となるのですが、Visual StudioもかなりイケてるJavaScriptの開発環境ということなので、そこらへんもついでに体験してしまおうと思います。

Webサイト作成からjQuery導入まで

とりあえず、なるべくプレーンなHTMLを作りたいので新規作成からWebサイトを作ります。

次にjQueryの導入です！今回は、見た目にわかりやすいものを作ろうと思うのでjQueryとjQuery UIというやつを入れてみようと思います。ダウンロードして・・・というめんどくさい前時代的？なことはせずにNuGetでさくっと導入できます。プロジェクトを右クリックしてManage NuGet Packages...を選択してjQueryで検索すると下記のような画面になるので、ぽちっとjQuery UIをインストールします。

インストールすると、こんだけ大量のファイルがプロジェクトに展開されます。手動で配置しようと思ったら気が遠くなるのでNuGetのありがたみをかなり感じます。

HTMLを作成してjQueryを書いてみよう

とりあえず、HTMLが無いと始まらないので「Hello.html」という名前でHTMLページを作成します。新規作成から作成できるのでやっちゃいましょう。

こんな味気ないHTMLが作成されます。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>

</body>
</html>

今はやりのHTML5ではないですが、それ系のテンプレートとか入れてないので致し方ないでしょう。探せばあるはずですが、今回はjQueryが目的なので、このまま寄り道せずにいきます。次に、jQueryで必要なスクリプトファイルやjQuery UIで使うcssとかを、このHTMLに追加します。ソリューションエクスプローラからスクリプトファイル/cssファイルをドラッグアンドドロップすると、ドロップした場所にタグが入ります。素敵！

ファイルをつかんで

ドラッグして

ドロップするとscriptタグが追加される！

こんな感じで下記の3ファイルを追加しました。

Scripts/jquery-1.4.4.min.js
Scripts/jquery-ui-1.8.16.min.js
Content/themes/base/minified/jquery.ui.all.min.css

追加後のHTMLは、こんな感じになりました。まぁ普通ですが、手で書かなくていいのが私好みでいいですね！！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script src="Scripts/jquery-1.4.4.min.js" type="text/javascript"></script>
    <script src="Scripts/jquery-ui-1.8.16.min.js" type="text/javascript"></script>
    <link href="Content/themes/base/minified/jquery.ui.all.min.css" rel="stylesheet"
        type="text/css" />
    <title></title>
</head>
<body>

</body>
</html>

本題jQuery

今回は、せっかくのjQuery UIなのでタブを作ってみようと思います。Tabを作るのは簡単でdivの中にulでタブのヘッダーを追加してliの中のaタグでクリックしたときに表示したいタブの中身のidを指定します。ulの閉じタグの下にタブの中身をdivタグで書いていきます。divのidにはliのaタグで指定したidを書きます。文章で書くとだるいですが、下記のような構造になります。

div タブの親みたいな位置づけ idふっとくと後で捗る
- ul
  - li タブになる
    - a hrefでタブのコンテンツのdivタグのidを#idの形で指定する
- div タブの中身。aタグで指定したidを指定しておく

HTMLで書くとこんな感じです。3ページあるタブを定義しています。

<div id="tabhost">
    <!-- タブのタグ？の部分 -->
    <ul>
        <li><a href="#tab1">タブ１</a></li>
        <li><a href="#tab2">タブ２</a></li>
        <li><a href="#tab3">タブ３</a></li>
    </ul>
    <div id="tab1">
        <p>タブ１のコンテンツをここに書く</p>
    </div>
    <div id="tab2">
        <p>タブ２のコンテンツをここに書く</p>
    </div>
    <div id="tab3">
        <p>タブ３のコンテンツをここに書く</p>
    </div>
</div>

この状態でCtrl + F5で実行して動作確認ができます。

まだ、タブになってません！ということで、こいつらをタブ化していきます。scriptタグを追加して上記のHTMLでtabhostというidをふったdivタグを取得してtabs関数を呼び出してやります。こうするとjQuery UIがよきにはからってタブにしてくれるみたいです。headタグ内に下記のようなコードを追加しました。インテリセンスとかも効いて割と素敵ですね！

<script type="text/javascript">
    $(function () {
        $("#tabhost").tabs();
    });
</script>

jQueryの$関数って便利ですね。解説はしません！！というか、私もちゃんと勉強してないので解説できません。入門サイトをあたってください。すいません。上記のスクリプトを追加して実行すると下のように素敵？なタブになってます！お手軽！

ついでにタブ１の中身を下記のようなHTMLにして・・・

    <div id="navi">
        <h4>学ぶ</h4>
        <ul>
            <li>初級</li>
            <li>中級</li>
            <li>上級</li>
        </ul>
        <h4>学ばない！</h4>
        <ul>
            <li>ほげほげ</li>
            <li>ふー</li>
            <li>ヴぁー</li>
        </ul>
</div>

さらに下記のようなスクリプトを書くと・・・

<script type="text/javascript">
    $(function () {
        $("#tabhost").tabs();
        // idがnaviのタグの下にあるh4のクリックイベントで
        $("#navi > h4").click(function () {
            // h4タグの次の要素を展開/折畳みをする
            $(this).next().slideToggle("slow");
        });
    });
</script>

こんな風に折畳み可能なメニューになります！後はそれっぽいスタイルあてれば立派なメニューになりそうですね！！

展開（初期）状態

h4タグの部分をクリックすると閉じる！

デバッグもできちゃう

JavaScriptといえばalertデバッグ（古い人です）というイメージですがVisual Studioではブレークポイントはってデバッグ実行すればJavaScriptでもデバッグできます・・・！！

機能としては知ってたけど実際使ってみるとやっぱり便利ですね！！あとはユニットテストが統合されればブラウザでのクライアントサイドプログラミングはかつる！？