2012年10月13日

Visual Studio 2012 Web機能

今回も知人より寄稿してもらいました。この場を借りて感謝します。
※ 前回の記事(Microsoft Conference 2012に参加してきました。)もよろしくどうぞ。

Visual Studio 2012
-- セミナーフィードバック その1 --



この夏〜秋のMicrosoftセミナーを梯子しました。
その中でも特に、Visual Studio 2012のWeb系の便利そうな印象を受けた機能を、備忘録としてまとめたいと思います。(個人的にWeb系のお仕事が多いので)
※ 一部機能はVisual Studio 2010でも拡張機能をインストールすると利用できます。ただ、それを記載し始めると長くなってしまうため、ここでは拡張機能を入れていない状態のVisual Studio 2010とVisual Studio 2012を比較して便利だと思った箇所をまとめます。
(Visual Studio に拡張機能を入れた場合、2010と2012でどのようなことが出来るようになるのかは、次回まとめて公開できればと思っています)


● [マイクロソフト ソリューション セミナー] 新製品 Visual Studio 2012 概要〜新世代の統合開発環境で実現するこれからのアプリケーション開発とは
● The Microsoft Conference 2012
● Developer Camp 2012


Web系開発・便利機能まとめ


Webを構成する技術のHTML/JavaScript/CSS、これらを開発する際の便利機能を、所感を交えながら記載します。

(1) HTML


タグをサクサクと作成(HTML5にもバッチリ対応)


まずはこちらのHTMLを見てください。

HTML5のvideoタグ

<video controls="controls">
<source src="hoge.mp4" type="video/mp4" />
<source src="hoge.webm" type="video/webm" />
<source src="hoge.ogv" type="video/ogg" />
</video>


HTML5のvideoタグになるのですが、こちらをVisual Studio 2012で記載する際のステップは、
@.「<vi」とタイプ → インテリセンスのvideoを選択!
A.タブタブ♪ → videoタグの雛形が出力されます。
B.デフォルトで、1行目のsourceタグのsrc属性にフォーカスが設定されています。その値を変更すると、2行目・3行目のsrc属性も連動して変更されます。(デフォルトでは「test」と表示されていたものを「hoge」に変更しました。)

videoタグの作成が、キーボードを5回タイプ(+ファイル名の文字数)で完了です!


タグのサクサクとリファクタ


まずはこちらのHTMLを見てください。

タグのリファクタ

<div>
<!--たくさんの入れ子になっているタグ…-->
</div>


こちらのdiv要素をHTML5っぽいタグに変更したいと思った場合、そのdivの中には、「たくさんの入れ子になっているタグ」が。。終わりの「div」はどれ?なんだか違うタグを変更してしまった!など、タグを変更する場合、ちょこっと面倒だったりします。
Visual Studio 2012のHTMLエディターでは、<div>を<section>に変更すると、連動して紐付く終了タグが</div>から</section>になってくれるんです。
Demoで見たときに、「おぉ、これは便利!」と思いました。
※ 終了タグを修正した場合は開始タグが連動して修正されます。


よく使うタグの塊をユーザーコントロールにサクサクと変換


気がついたら、HTMLで似たようなタグの構成のものが、複数ペ ージに書かれていることがあります。
セッセとコピペするよりは、ユーザーコントロールにしてしまうほうが、再利用性が高まります。
Visual Studio 2012では、以下のステップで簡単にユーザーコントロールとして抽出することが出来ます。
@.タグの塊を選択
A.右クリック → ユーザーコントロールに展開
すると、「.ascx」拡張子のユーザーコントロールがWebプロジェクト内に追加されます。
と、同時にユーザーコントロールに展開した部分のタグが、ユーザーコントロールに置き換わってくれています。
気が利いてて良いなぁって思いました。


(2) JavaScript


かゆい所に手が届く、コードの可読性を上げる機能モロモロ


JavaScriptエディターも随分使い勝手が上がった印象を受けました。
関数の折り畳みが出来たり、カッコの開始と終了の照合が出来たり、関数や変数の定義にジャンプ出来たり。。
「待ってました!」な機能が盛りだくさんでした。


何でもアリのJavaScriptを厳格に制御!


JavaScriptのファイル内に、"use strict";という1行を書き込むと、そのJavaScriptファイルは厳格モードになります。
例えば、「function hoge(a, a)」みたいに、「関数の引数が同じ変数名?!」などというコードには、Visual Studioおなじみの波線が表示されて、不正な書き方であることを教えてくれます。
※ ただ、このエラーはビルドが通らない類のエラーではありません。


JavaScriptの単体テストも自動化できちゃう!


Visual Studio 2010でASP.NETを開発した時、サーバーサイドロジックの単体テストの自動化をやり始めて、「これは便利!」とゴリゴリテストコードを書きました。
いろんなパターンのデータでテストが楽々行えて、反復可能。関数リファクタ後の動作検証もハードルが下がり、リファクタ三昧!ヒャッハー!
しかし、そこでハタと気づきました。
JavaScriptファイルの中身も結構盛りだくさん。ロジックたっぷりだけど、JavaScriptファイルの単体テストは自動化できないということに。。!
Visual Studio 2012ではその悔しさも消し飛びます。


(3) CSS


至れりつくせりのカラーピッカー


色を指定する際に、「#」と入力すると、カラーピッカーが表示されます。
カラーピッカーは、グラフィカルな色の選択、透明度の指定、さらに、Visual Studioの外から色を抽出することもできます。
これで「色は何にしようかな」と思ったときに、Visual Studioから離れて別のツールを使う手間がぐっと減ると思いました。
カラーピッカー

ゴチャリンコになりがちなCSSをregionですっきりグルーピング


「Regionディレクティブ」、どれだけこれのお世話になったことか。。!
Visual Studio 2012ではその「Region」をCSSでも利用できるようになります。
整理整頓で保守・可読性がアップしそうな予感です。

cssのregionディレクティブ

/*#region ××エリア*/
/*××エリアに係るモロモロのcss*/
/*#endregion*/





posted by ぺるたご at 00:16| Comment(0) | TrackBack(0) | 日記 | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。