MicrosoftがJavaScript Webアプリ開発を容易にする新ツールを提供

Microsoftは同社のdotnet newツールとNode.jsを巧みに利用する方法で、JavaScriptベースのWebアプリケーションを手早く作成するためのツールセットをリリースした。

dotnet newツールは.NET Core Toolsの一部で、簡単なコマンドライン構文で新しいプロジェクトをスピンアップするために使用するツールである。それがASP.NET Core JavaScript Servicesの一部となることで、Web開発者は、同じコマンドで新しいテンプレートベースのSingle Java Application(SPA)をスピンアップすることが可能になる。

Steve Sanderson氏はある記事の中で、これらテンプレートの目標は開発開始を容易にすることだ、と述べている。

これらのアプリケーション(AngularやReactを使ったSPA)の開発が複雑だ、という意見をよく聞きます。サーバ側とクライアント側のコードの適切な統合はもちろんですが、生産性のよいプロジェクトのセットアップを選択する点がすでに難しいのです。

これらのプロジェクトタイプの可用性は、Microsoft.AspNetCore.SpaTemplates NuGetパッケージに依存したものだ。パッケージをインストールすれば、次のようなコマンドを使って、angularやreact, reactredux, aurelia, knockout などのテンプレートがスピンアップで利用できるようになる。

dotnet new reactredux

パッケージ化されたテンプレートのソースはGitHubにある。これは.NET Coreのツールなので、これらのテンプレートの中のどれかをインストールすれば、作成したものはクライアント側のSPAにサービスするASP.NETアプリになる。“angular”はAngular 2以降を対象とするアプリだが、これは“It’s just Angular”の命名法に従ったものだ。

JavaScriptコミュニティの他の部分に関しては、Node.jsやNPMに慣れ親しんだ人たちを対象に、それらのアプリを簡単にスピンアップする方法として、create-react-appなどのオプションやAngular CLIなどが提供されている。dotnet newの.NETをベースとするアプローチは、Microsoft環境からの開発者にとって、より慣れ親しんだ選択肢が与えられたことになるが、それだけではない。これら新しい.NETツールは、いくつかの点において、デフォルトでそれ以上の豊富な機能も備えているのだ。

例えばangularとreactduxのテンプレートには、デフォルトでサーバ側のプレレンダリングが含まれている(オフにすることも可能)。これらのプロジェクトでは、いずれもフロントエンドのコードのバンドルにWebpack 2を使用すると同時に、aurelia以外については、Hot Module Replacementがデフォルトで有効になっている。

.NETアプリであることから、Node.jsの使用がSpaServicesの使用を経由して行われることに変わりはない。SpaServicesは、ASP.NET開発者が直接Node.jsを実行しなくてもNode.jsエコシステムのメリットを享受できるようにするため、Microsoft.AspNetCore.NodeServicesを使用している。これらはすべて“舞台裏”で行われる、とSanderson氏は説明する。

例えば、サーバ上でAngularやReactコンポーネントをプレレンダリングするためには、JavaScriptをそのサーバ上で実行する必要があります。これはNodeServices経由で実行されます。NoseServicesは隠れたNode.jsインスタンスを起動して、.NETから高速かつ堅牢なコールを行なう手段を提供するのです。

Sanderson氏はknockout.jsの作者でもある。