Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

ASP.NET Core 2.0でSPAテンプレートを使おう【前編】

進化した「ASP.NET Core 2.0」新しいWeb開発手法を学ぶ 第3回

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2018/01/15 14:00

 ASP.NET CoreではView層にSPA(Single Page Application)を実現するJavaScriptフレームワークを使い、Webアプリケーションを作成することもできます。さらに、SPAの問題点を解消するサーバサイドレンダリングの仕組みも提供しています。今回は最新バージョンのASP.NET Core 2.0を使って、SPA対応のアプリケーションの実装方法と仕組みを確認していきます。

目次

対象読者

  • 新しい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を連携したアプリケーションを素早く開始することができます。本稿でも、後ほどこのプロジェクトテンプレートを使ってアプリの動作確認や仕組みの解説を行います。

図1 Visual Studioに表示されるASP.NET Core 2.0のプロジェクトテンプレート
図1 Visual Studioに表示されるASP.NET Core 2.0のプロジェクトテンプレート

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のコマンドを実行してプロジェクトを作成します。

リスト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のリモートリポジトリから必要なライブラリをダウンロードするためです。

リスト2 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)にブラウザからアクセスします。

図2 SPAテンプレート(Angular)のアプリ起動後の画面
図2 SPAテンプレート(Angular)のアプリ起動後の画面

 画面が表示されたら、左側のサイドバーから[Counter]や[Fetch data]を選択してページ遷移ができるか試してください。その際、URLもページごとに変わっていることが分かるかと思います。

 ここで試しに、アプリケーションを停止してみます。「dotnet run」を実行しているコンソールで「Ctrl + c」を入力してアプリケーションを停止してみてください。停止したらブラウザに戻り、またサイドバーから違うページを選択してみます。するとアプリケーションを停止したにも関わらずページ遷移することができたかと思います。SPAでは、各ページの情報はアプリケーションの初回アクセス時に全てブラウザにダウンロードされているため、毎回サーバにページ情報を取得せずともJavaScriptによってページ遷移が行えるのです。

 「Fetch data」のページ内容は、サーバからデータを取得してきているため代替テキスト(Loading...)が表示されていますが、ページ遷移自体は行えます。

 通常のASP.NET Core MVCのアプリケーションであればアプリケーションを停止してしまうとページ遷移もできなくなってしまいます。このクライアント側だけでページ遷移ができる特徴が、SPAらしい挙動といえるでしょう。


  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • WINGSプロジェクト 秋葉 龍一(アキバ リュウイチ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XMLD...

バックナンバー

連載:進化した「ASP.NET Core 2.0」新しいWeb開発手法を学ぶ
All contents copyright © 2005-2018 Shoeisha Co., Ltd. All rights reserved. ver.1.5