先日発表されたVisual Studio Code v. 0.10.1は、プレビューリリースからβリリースへ駒を進めたのを機に、大きな前進を見せてくれた。ここ最近のMicrosoft系イベントは毎回ワクワクさせてくれる。

その前進は二点、Visual Studio Codeのオープンソース化と拡張機能（エクステンション）のサポートだ。 本家Visual Studioユーザーならば馴染みのある拡張機能というものは、AtomやSublime Textにおけるパッケージのようなもの。

他にも、デバッグ機能が強化されたりと、何だか、Visual Studioに近づいて行っているけれど、そこら辺どこまでやるつもりなんだろう？あんまり高機能・多機能になるとVisual Studioになっちゃうし。

さて、今回はVisual Studio Codeの新しい仲間・拡張機能を使ってASP.NET 5なWebアプリを作ってみる。なお、構築はMacで行う。

 

ASP.NET 5アプリを作る手順

Visual Studio Codeのチュートリアルに従って、拡張機能の助けをもらいながらWebアプリを作っていく。その手順はこうだ。

1. 環境構築
2. Yeomanを使ってASP.NET 5アプリのプロジェクトを作る ※ここで拡張機能の出番だ！
3. Webアプリの構築と実行

 

1. 環境構築

Visual Studio Codeはインストールされているとして、ASP.NET 5、DNX、DNVMのインストールから始める。 ※DNXとは、.NETアプリ（ASP.NET 5だけに限らない）の実行環境であり、DNVMはそのバージョンマネージャーである。

公式チュートリアルにアクセスし、「2. Install ASP.NET 5 for Mac OS X」からダウンロードしたpkgファイルを実行し、インストールプロセスを完了させればオシマイ。簡単すぎる♬

※VIsual Studio Codeもこのページから落とせるので、まだの人もどうぞ

 

2. Yeomanを使ってASP.NET 5アプリのプロジェクトを作る

まずはYeomanのASP.NET用generatorを入れるため、ターミナルでこのコマンドを打つ。

 

次に、いよいよ拡張機能のお披露目。今回はYeoman用拡張機能yoを入れる。

Visual Studio Codeを起ち上げ、command+↑キーを押してコマンドパレットを出し、yoを入れるためのコマンドを実行する。

無事に拡張機能が入ったら、Visual Studio Codeに通知が出てくるから再起動する。

 

Visual Studio Codeで、Webアプリを作るディレクトリを開き、command+shift+pで開いたコマンドパレットにyoを呼び出すコマンドを入れる。

 

そして出てきたgeneratorの選択肢からASP.NET 5用の”aspnet”を選ぶ。

 

するとまた選択肢が出るので、★ app を選ぶ。

 

アプリケーションタイプ（今回は”Empty Application”）を選び……

 

プロジェクト名を入れれば後は自動でやってくれる。

 

最終的にこのような画面になったらプロジェクト作成完了。

 

プロジェクトが出来上がったら、プロジェクトのディレクトリをVisual Studio Codeで開く。

 

次に、プロジェクトの依存関係をクリアーするため、コマンドパレットに次のコマンドを打ち、”dnx: Restore Packages”を選ぶ。

うまくいかなければターミナルでプロジェクトを開き、コマンドを打とう。

※なお、環境によっては管理者権限で実行しなければいけない。このコマンドでrestore失敗みたいなメッセージが出ていたら、”sudo dnu restore”を試してほしい。

 

Webアプリの構築と実行

今回は、Hello Worldと表示するだけのアプリを作っていこう。ド定番から始めるのでR。

Startup.csを開くと、すでにHello Worldが出力されるようコードが書いてある。※Configure()内

何もしないのは面白くないから、せめて”Hello World”を”Look! -> (.Y.)”に変えてみる。

 

お次はこのプロジェクトをローカルサーバーで動かすため、Kestrelの導入とそれを動かすためのコマンドを定義しよう。

project.jsonを開き、まずはdependenciesにKestrelへの参照設定を書く。

三行目の”Microsoft.AspNet.Server.Kestrel”がその設定で、場合によっては最初からこれが書かれているのと、その時々のバージョンが違ってくる。

今回はYeomanでプロジェクトを作ったからか、この時点の最新バージョンを使うKestrelへの依存が最初から書かれていた。

 

次はKestrelを使うコマンドを書く。といってもこれも用意されていて、”command”にある”web”がそうだ。

 

最終的にproject.jsonはこうなった。何もしてないけどね。

 

ターミナルでプロジェクトを開き、Kestrelを起動する。Kestrelを終了させるときはControl+Cだ。

 

後はブラウザーでlocalhost:5000にアクセスすれば、Webアプリが動いているのを見られる。こんな感じで。

 

拡張機能って便利？

これぐらいのことなら、わざわざ拡張機能を使う必要性は薄いだろう。ただ今後、より便利なもの、Go言語用拡張機能のような、プロジェクトによっては必須なものが出てくるだろうから、全く触れないわけにはいかないだろう。

どういった拡張機能があるかはここを見てほしい。

Visual Studio Code Ext.

現時点で多くの拡張機能がリリースされているところを見ると、「これって行き着くとこまで行ったら本家Visual Studioになっちゃうんじゃねーの？」と感じる。

さすがに拡張機能だけであそこまでの至れり尽くせりっぷりを実現するのは難しいだろうけれど、本家とCodeでどう線引をしていくのか気になる。

 

ASP.NET MVCを網羅して学びたいあなたへのオススメ