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