REVIEW（12/04/13）

　「Web Essentials」は、Web開発に便利な機能を「Visual Studio」へ追加してくれる拡張機能。「Visual Studio 2010」に対応するフリーソフトで、編集部にてWindows 7上の「Visual Studio 2010 Professional」で動作を確認した。ライブラリサイト“Visual Studio Gallery”からダウンロードできる。

　本拡張機能をインストールすると、「Visual Studio」のHTML/CSS/JavaScriptエディター機能を拡張できる。たとえば、標準ではサポートされていないコードの折りたたみや同じ名前の変数のハイライト、“()”“{}”“[]”のブレースマッチング、“Region”ディレクティブ、“ToDo”コメントのマーキング、選択範囲のソースコードの短縮・軽量化（Minify）、コメントアウト（［CTRL］+［K］、［CTRL］+［C］キー）またはアンコメント（［CTRL］+［K］、［CTRL］+［U］キー）するキーボードショートカットなどといった機能が利用可能になる。

　また、それぞれの言語固有の便利な機能も備える。たとえばHTML5の場合、対応する音声・動画ファイルをエディター画面へドラッグ＆ドロップするだけで、それに適した“audio”“video”タグを挿入することが可能。ソースファイルへの相対URLやMIMEタイプも自動で補完される。

　CSSの場合はさらに機能が豊富で、プロパティの値に含まれる画像・フォント・色情報をツールチップでプレビューする機能、数値を［Ctrl］＋上下のカーソルキーでインクリメント・デクリメントする機能、色情報を16進数表記または“rgb()”表記へ相互変換する機能などがエディターへ追加される。“Speed typing”と呼ばれるブレース・コロン・セミコロン・改行の自動補完機能も便利。

　そのほかにも、画像ファイルのドラッグ＆ドロップで“url()”の値を相対パスで挿入したり、さらにそれをBASE64エンコードする機能も備える。エンコード後の文字列は非常に長くなるものの、本拡張機能のコードの折りたたみ機能を利用すればコンパクトに表示できるので苦にはならない。

　さらに、-moz, -webkit, -ms, -oからはじまるベンダープレフィックスのついたプロパティを補完する機能も搭載。たとえば、“border-radius”プロパティを記述して本機能を利用すれば、“-moz-border-radius”“-webkit-border-radius”プロパティが自動で挿入される。

　また、ユニークな機能としては、特定バージョンのIE向けCSSハックを挿入する機能が挙げられるだろう。CSSハックは有効な場面が多々あるものの、あまり推奨されないいわゆるバッド・ノウハウであり、これからは重要性・必要性がともに低下することが予想される。なるべくなら学習に手間をかけず、このようなツールの支援を活用したい。

　加えて、本拡張機能は“Live Web Preview”機能を搭載。これは開発中のWebサイトをプレビューできるミニブラウザーで、プロジェクトをビルドしたりファイルを保存するたびに表示を自動で更新してくれる。開発環境からWebブラウザーへ切り替えて［F5］キーを押すちょっとした手間を省いてくれるのがうれしい。