【JavaScript】「SPA」について

SPAとは？

Single-page Applicationの略です。

SPAの特徴

• ブラウザで最初に開いたページを起点として、様々な画面遷移を行うが、最初に返されたＨＴＭＬだけで画面遷移も完結すること。
• URLは、ページ内のユーザーインターフェイスの遷移でも変化して、ブラウザの履歴で前の画面に戻れる。
• ページの表示に必要なデータは逐次、サーバーからWebAPIで取り出す。
• 「クライアントサイドルーティング」を採用している。

SPAのメリット

特にデータ量が多いページとかだとそうですがブラウザのレンダリングには大きなコストが発生します。SPAの場合は一度にまとめてWebリソースを取得するのでレンダリングの負荷は低くなります。（データはwebAPIでまとめて取得するので、その分のloading時間などは発生する可能性はありますが。）

Ajaxとの違い

Ajaxは、ページの一部をリクエストしていましたが、ＳＰＡはページ全体をダイナミックに遷移させます。

また、画面遷移はサーバーからのレスポンスに依存しません。

「クライアントサイドルーティング」とは？

クライアント側で、ＵＲＬに対応した画面を用意できるような仕組みです。

なお、ＵＲＬは変化しますが、SPAの仕組上リクエストは発生しません。

なぜこれが必要なのか？

SPAでは、複数の画面で構成されたアプリですが、URL単位でサーバーからHTMLが返されるわけではありません。

なので、普通に作ると一つのＵＲＬで画面が変化するアプリになってしまいます。

そのようなアプリの場合は、下記の問題が発生します。

• ブラウザの戻るボタンが使えない。
• ブックマーク登録ができない。
• アプリの途中の状態をシェアできなくなる。

SPAで認証を実装する場合

認証方式の種類としては下記の記事で解説しています。

【Webセキュリティ】ログイン認証の種類について

フォーム認証を使う

モノシリックなアプリとしてSPAを採用する場合はこちらを使います。

認証用のページを作成し、認証が終わった段階で、SPAを表示します。

メリット

フロントエンドと、バックエンドが分かれていないので、SPAに複雑な認証のルーティングを組まなくてよい点。

トークン認証を使う

フロントエンドのSPAと、バックエンドを完全に分離させる方式になります。

JavaScriptでルーティング制御する必要があります。

メリット

フロントが分離されているので、ウェブ版を作った後に、モバイル版を作る等のスケールアウトがしやすい構成になります。