TypeScriptエディタとLESSエディタが便利! Web Essentials 2013 & TypeScript 1.0RC

Visual Studio 2013がリリースされてから早半年が経とうとしています。

VS2013では新コンパイラである[Roslyn][1](ロザリン)の搭載は見送られましたが、その分Web関連の機能が強化されました。LESSエディタや、TypeScriptエディタ、デバッグ時のブラウザの選択実行、[OWINやSignalR][2]などなど、Web開発をラクにするためのツールが沢山追加されています。
しかし、これらの多くはVisual Studioの標準機能に含まれているわけではありません。アドインとして提供されているため、拡張機能マネージャ(もしくはNuGet)から別途自分でインストールする必要があります。

「VS2013でLESSがコンパイルできない」もしくは「VS2013でTypeScriptがコンパイルできない」と悩んでいる方は、Visual Studio 2013の上部のメニューから[ツール]->[拡張機能と更新プログラム]->[オンライン]->[右上の検索ボックス]と画面を遷移し、**「Web Essentials 2013」**と検索して出てきた拡張機能をインストールすると幸せになれます。もしくは[こちらのリンク][3]からインストールしても良いです。

私も今日はじめてWeb Essentials 2013をインストールしたのですが、**LESSエディタが超便利**でびっくりしました。右クリックでベンダプリフィックスを簡単に追加したり、クラスのネストを自動的に認識してくれたり、至れり尽くせりとはまさにこのことでしょう。
下はLESSエディタでLESSを編集しているところですが、なんとCtrl+Sで保存した直後にCSSもリアルタイムで生成されるのです。分かりやすすぎます…。
なお、TypScriptも同様にエディタがあり、保存すると自動的にJavaScriptが生成されます。

LESSエディタ

LESSエディタでLESSを編集しているところ。自動的にCSSが生成されます。

生成されたCSSファイルはLESSのツリーの下にくっつきます。CSSを意識せずにLESSを編集できますし、探すのも簡単で助かります。

LESSの下にCSSが生成されました。

LESSの下にCSSが生成されました。mapファイルも生成されてますね!

[先日TypeScript 1.0RCがアナウンスされた][4]ので、おそらく2ヶ月以内にはTypeScript 1.0がお披露目されることでしょう。
[TypeScript 0.9からGenericsもサポートされている][5]ようですし、普段お仕事で静的言語をメインに使われている方にとっては手に馴染むツールになりそうです。私も、Genericsがサポートされていることを知ってから、ワクワクしながらTypeScript 1.0のリリースを待っています。

TypeScriptはECMAScript 6の仕様であるclass, moduleなどが実装されており、JavaScriptとの互換性もそれなり考慮されているので安心して使えますね。言語的には割と洗練されていると思いましたが、多くの人にとって気になる点があるとすれば、開発元がMicrosoftということでしょうか?(笑)
一応オープンソースで開発されている言語なので、Microsoftが開発していると言って神経質になる必要もなさそうです。きっとAnders Hejlsbergがうまくやってくれるはずです。Microsoftの社内でも本気でTypeScriptをドッグフーディングしているようですし、好感が持てます。

> たとえばVisual Studio Onlineには今、30万行あまりのTypeScriptコードがあり、Windows 8.1用のXbox Musicの新しい機能はすべて、この言語で書かれた。またBing Maps、Photos、Microsoft Dynamicsなどそのほかのアプリケーションも部分的にTypeScriptで書かれている。
>
>
> [MicrosoftのVisual StudioがTypeScriptを正式サポート][6]

ということで、いよいよ本格的にWeb開発に乗り出し始めたMicrosoft。
今後の動向に注目ですね!

TypeScriptについて、少し前に私が見て良くまとまってるなーと感じたスライドも紹介しておきます。

[1]:http://www.zdnet.com/microsofts-roslyn-compiler-as-a-service-inches-forward-7000024356/
[2]:http://shiba-yan.hatenablog.jp/entry/20130303/1362318698
[3]:http://visualstudiogallery.msdn.microsoft.com/56633663-6799-41d7-9df7-0f2a504ca361
[4]:http://blogs.msdn.com/b/typescript/archive/2014/02/25/announcing-typescript-1-0rc.aspx
[5]:http://blogs.msdn.com/b/chack/archive/2013/08/22/typescript-0.9.1.1-has-been-released-visual-studio-japanese-support.aspx
[6]:http://jp.techcrunch.com/2014/02/26/20140225microsoft-adds-full-typescript-support-to-visual-studio/

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です