2017年2月の .NET Core SDK が 1.0 RC4 に更新 されたことで、プロジェクトを作成するコマンド dotnet new がちょっと変わりました。
dotnet new コマンドで今まで作れたプロジェクトテンプレートに加えて、以下のSingle-Page Applications（SPA）のカスタムプロジェクトテンプレートが出てきました。
- Aunglar
- Aurelia
- Knockout.js
- React.js
- React.js and Redux
プロジェクトを作成すると、サーバー/クライアント間の通信のができるサンプルコード付きのプロジェクトができます。最近のJS界隈は、JSを各以前にpackage.json や webpack のセットアップや、もされていてとっかかりやすいです。
Environment
今回の私の環境はWindows10 で以下です。
- .NET Core SDK 1.0 RC4 以上（必須）
- Node.js (6.9.5）以上（必須）
- Visual Studio Code（VS Code）
SDKのバージョンが若干わかりにくいかもしれませんが、リリースノート の2017年2月7日のアップデートかそれ以降であれば大丈夫です。
環境の確認
正しいSDKが認識されているか確認しましょう。 ここからは、コマンドプロンプトで操作していきます。コマンドプロンプトを起動して、まずは、以下のコマンドをうちます。
dotnet --version
.NET Command Line Toolsのバージョンが1.0.0-rc4-004771 以上であればOK♪。
カスタムのプロジェクトテンプレートをインストール
今回使うのはカスタムのプロジェクトテンプレートのため、以下のコマンドでインストールします。
dotnet new --install Microsoft.AspNetCore.SpaTemplates::*
インストールが完了すると、テンプレートの一覧が表示されます。
プロジェクトの作成：ASP.NET Core & React
まず、プロジェクトのルートディレクトリを作成しましょう。今回は、C:\projects\reactDemo というディレクトリを作成しました。そしてそのディレクトリに移動します。
プロジェクトを作るには、dotnet new の後に、Short Nameを付けてあげます。デフォルトでC#のプロジェクトができますが、F#を指定して作ることもできます。
今回は、C#とReact.jsです。
dotnet new react
すぐに作成が終わりますので、dir と叩いてディレクトリの中を見てみましょう。
これで完了です。
動作確認
実行前に、依存関係のあるパッケージのパッケージのダウンロードが必要です。
- Visual Studio 2017でプロジェクトを開くと依存関係のあるパッケージのインストールはプロジェクトの起動時に自動で行われます。
- Visual Studio 2017を使わない場合、依存関係のあるパッケージをインストールする
dotnet restoreと、npm installのコマンドを手動で実行します。
せっかくなんで、コマンドプロンプトで2つのコマンド dotnet restore と、 npm install を実行します。npmのんストールはちょっと時間がかかると思いますので、ゆっくり待ちましょう。
終わりましたら、dotnet run で実行してみましょう。
「Now listening on: http://localhost:5000」と出ていますので、ブラウザーでアクセスしてみましょう。
Hello Worldにしてはちょっと豪華なサイトができました。3画面用意しており、サーバー連携もできるコードができています。
VS Codeでコードを見てみましょう。既にプロジェクトのルートディレクトリにいるので、コマンドプロンプトで、code .とたたいてみましょう。
VS Codeが起動します。
package.json や webpack.config.js だったり、その他諸々作成ができていますので、動かして勉強するにもいいですね。これでASP.NET Coreの入門も人気のSPAのフレームワークの入門もできて幸せです（と個人的に思ってます）。
