対象読者
- 新しいASP.NET Coreの機能について知りたい方
- MacやLinuxなどでASP.NET Coreアプリケーションを動かしたい方
検証環境
本稿では、以下の環境で動作を確認しています。
- macOS Sierra 10.12.6
- .NET Core 2.0
- Node.js v7.10.1
- npm v4.2.0
SPA（Single Page Application）とは？
SPAはその名の通り一つのページでアプリケーションを構築する手法です。一つのページとはつまり一つのHTMLファイルを指しており、主にJavaScriptを使用してHTMLのDOMを書き換える事によって疑似的にページ遷移を実現しています。ページ遷移の度にサーバからページ情報を取得する必要がないため、ユーザビリティの高いサイトを構築する手法として注目されています。
SPAでは通常、サイトへの初回アクセス時にHTML、CSS、JavaScript、画像等のサイトのデータを一括でダウンロードし、それをもとにブラウザ上でページを組み立てていきます。ページの遷移はJavaScriptによって行い、ページに表示するデータをサーバから取得する必要がある場合は、AjaxやWebSocketなどの技術を使用してデータを取得・表示します。SPAはHTML5の登場やJavaScriptフレームワークの発展などによって徐々に注目度が高まり、今ではフロントエンド開発においてかなりの割合を占める手法となりました。
一方でSPAにももちろん問題点があります。前述の通りSPAはサイトへの初回アクセス時にそのサイトの枠組みとなるデータをまとめてダウンロードし、ブラウザ側で画面に表示する最終的なHTMLを組み立てます。そのため、初回の画面表示に時間がかかってしまう傾向があります。これはサイトの規模が拡大していくとより顕著になります。
他にも、SEO（検索エンジン最適化）との相性が悪いこともよく知られた問題点です。検索エンジンのクローラーによってはJavaScriptが実行されないため、SPAのサイトがHTMLを生成できず検索サイトのインデックスに登録されないケースや、低いページランクを付けられてしまうといった課題があります。
ASP.NET Core 2.0でのSPAサポート
ASP.NET CoreではView層にSPAを使用するための機能が用意されています。クライアントサイドとサーバサイドでそれぞれJavaScript、C#が得意なメンバーのいるチームや、既にASP.NET Coreを使っていてUIやUXを改善したいといったユースケースに適用できるかと思います。
また、SPAにおける問題点のいくつかを解消するサーバサイドレンダリングもサポートしています。サーバサイドレンダリングについては後ほど説明します。
ASP.NET Core 2.0からは、Angular（バージョン4）、React、ReduxといったSPAフレームワークがプロジェクトテンプレートとして新しく追加になりました。これらのプロジェクトテンプレートを使用すると、SPAフレームワークとASP.NET Core MVCを連携したアプリケーションを素早く開始することができます。本稿でも、後ほどこのプロジェクトテンプレートを使ってアプリの動作確認や仕組みの解説を行います。
ASP.NET Core 2.0でSPAテンプレートを使ってみよう
ここからは、ASP.NET Core 2.0のSPAテンプレートを使ってアプリケーションを起動するまでの手順を説明します。
事前に準備するもの
SPAテンプレートを使用したアプリケーションには、Node.jsのバージョン6以上が必要になります。Node.jsはJavaScriptのランタイムで、Node.jsによってWebブラウザがない環境でもJavaScriptを実行することができます。そのため、Node.jsをサーバサイドのアプリケーション基盤として使い、クライアント・サーバ双方をJavaScriptのみで構築する事例も珍しくありません。
ASP.NET Coreでは、Node.jsはJavaScriptのプリレンダリングの際に必要となります。インストールは公式サイトから、またはnodebrew等を使ってインストールしてください。
SPAテンプレートからプロジェクトを作成する
dotnet newコマンドからプロジェクトを新規作成する際に、SPAテンプレートを選択することができます。
コマンドラインに「dotnet new」と入力して、利用可能なテンプレートの一覧が表示してみましょう。[タグ]の列が「Web/MVC/SPA」となっているものがSPAテンプレートです。「ASP.NET Core with Angular」、「ASP.NET Core with React.js」、「ASP.NET Core with React.js and Redux」の3種類のSPAテンプレートが表示されているかと思います。
ここでは、「ASP.NET Core with Angular」を選択してプロジェクトを作成してみます。以下のリスト1のコマンドを実行してプロジェクトを作成します。
$ dotnet new angular -o spa_angular
テンプレート "ASP.NET Core with Angular" が正常に作成されました。
作成後のアクションを処理しています...
・・・中略・・・
正常に復元されました。
説明:
-------------------------------------------------------------------
IMPORTANT: Before running this project on the command line,
you must restore NPM packages by running "npm install"
-------------------------------------------------------------------
手動の操作手順: Run "npm install"
$
「ASP.NET Core with Angular」のテンプレートを使ってプロジェクトが作成されました。コンソールに出力された内容のうち「説明」の箇所を見ると、「npm install」を実行するように促しています。npmはNode Package Managerといい、Node.jsでJavaScriptアプリケーションを実行する際の依存ライブラリを管理するツールです。NuGetのNode.js版といったところでしょうか。
この「npm install」コマンドをアプリケーションの起動コマンド「dotnet run」より事前に実行する必要があります。プロジェクトの作成直後は依存するJavaScriptライブラリが手元にない状態なので、npmのリモートリポジトリから必要なライブラリをダウンロードするためです。
$ npm install ・・・中略・・・ $
「npm install」が成功すると、プロジェクトディレクトリに「node_modules」というディレクトリが作成され、その中にJavaScriptの依存ライブラリがダウンロードされます。
なお、プロジェクトが使用するJavaScriptライブラリの情報はpackage.jsonに記述されています。SPAテンプレートからプロジェクトを作成すると、あらかじめpackage.jsonも用意された状態となっているため、いきなり「npm install」を実行することができたのです。開発を進めていく中でJavaScriptライブラリを追加する必要がある場合は、このpackage.jsonを編集して再度「npm install」を実行するか、「npm install --save <ライブラリ名>」といったコマンドでライブラリをインストールしていきます（--saveオプションを付けることでpackage.jsonにライブラリの情報が書き加えられ、コードを共有する他の開発メンバーの環境でライブラリをインストールをする際に役立ちます）。
アプリケーションを実行する
ここまで準備ができたら「dotnet run」でアプリケーションを実行します。実行後、コンソールに出力されたURL（デフォルトではhttp://localhost:5000）にブラウザからアクセスします。
画面が表示されたら、左側のサイドバーから［Counter］や［Fetch data］を選択してページ遷移ができるか試してください。その際、URLもページごとに変わっていることが分かるかと思います。
ここで試しに、アプリケーションを停止してみます。「dotnet run」を実行しているコンソールで「Ctrl + c」を入力してアプリケーションを停止してみてください。停止したらブラウザに戻り、またサイドバーから違うページを選択してみます。するとアプリケーションを停止したにも関わらずページ遷移することができたかと思います。SPAでは、各ページの情報はアプリケーションの初回アクセス時に全てブラウザにダウンロードされているため、毎回サーバにページ情報を取得せずともJavaScriptによってページ遷移が行えるのです。
「Fetch data」のページ内容は、サーバからデータを取得してきているため代替テキスト（Loading...）が表示されていますが、ページ遷移自体は行えます。
通常のASP.NET Core MVCのアプリケーションであればアプリケーションを停止してしまうとページ遷移もできなくなってしまいます。このクライアント側だけでページ遷移ができる特徴が、SPAらしい挙動といえるでしょう。
