SPA

概要

SPA（Single Page Application）は、最初のアクセスでHTMLとJavaScriptの塊を読み込み、以降の画面切り替えをすべてブラウザ内のJavaScriptで行うWebアプリの構成です。「シングルページ」という名前のとおり、サーバから受け取るHTMLの器は実質1枚だけで、リンクをクリックしてもページ全体の再読み込みは発生しません。JavaScriptが画面を描き換え、必要なデータだけをAPI経由で取り寄せます。

GmailやGoogleマップ、各種の管理画面など、「Webサイト」というより「アプリケーション」と呼びたくなるものの多くはSPAです。画面遷移のたびに白い画面を挟まない滑らかな操作感が持ち味で、React・Vue・SvelteといったフレームワークはこのSPAという文脈で発展してきました。

なぜ生まれたか

伝統的なWebでは、リンクをクリックするたびにブラウザがサーバへリクエストを送り、サーバがHTML全体を組み立てて返し、ブラウザが全部を描画し直していました。文書を読むには十分でも、メールクライアントのような操作の多いアプリでは、1クリックごとの全画面リロードは致命的にもたつきます。転機は2004〜2005年頃、GmailとGoogleマップが「ページを再読み込みせずにサーバと通信する」技術（当時Ajaxと名付けられました）を駆使して、デスクトップアプリ並みの体験をブラウザ上で実現してみせたことでした。

その後、ブラウザのURL履歴をJavaScriptから操作できるHistory APIの整備と、複雑化するUIコードを管理するフレームワーク（Backbone、Angular、そしてReact）の登場によって、「画面遷移も含めてすべてブラウザ側で完結させる」構成が現実的になります。フロントエンドとバックエンドをAPIで分離すれば分業もしやすい——こうしてSPAは2010年代のWeb開発の主流アーキテクチャになりました。

詳細

初期ロードとその後の通信

SPAの動きは「重い初回」と「軽い2回目以降」の対比で理解できます。初回アクセスでは、ほぼ空のHTMLとJavaScriptバンドル（アプリ全体のコードを固めたファイル）をダウンロードし、ブラウザ上でアプリを起動してから画面を描きます。

2回目以降の遷移では、サーバとやり取りするのはJSONのデータだけです。HTMLの骨組みやスタイルは手元にすでにあるため転送量が小さく、画面の変わる部分だけを差し替えるので体感が滑らかになります。

構成要素とエコシステム

SPAを支える柱は3つあります。第一にUIフレームワーク（React/Vue/Svelte）で、「データが変わったら画面がどう変わるか」を宣言的に書けるようにし、差分描画を引き受けます。第二にクライアントサイドルーティングで、URLと画面の対応をブラウザ内で管理し、「戻る」ボタンや直リンクを壊さないようにします。第三にビルドツール（ViteやWebpack）で、多数のソースファイルを配信用のバンドルにまとめます。バックエンドは画面のことを忘れ、REST APIやGraphQLでデータを供給することに専念できます。

弱点: 初期表示とSEO

SPAの代償は初回に集中します。JavaScriptをダウンロードし、実行し、さらにAPIの往復を待つまで、ユーザーには何も表示されません。バンドルが肥大化すると、この「白い画面の時間」は目に見えて伸びます。もうひとつの古典的な問題がSEO（検索エンジン最適化）で、初期HTMLがほぼ空であるため、JavaScriptを実行しないクローラーからは中身のないページに見えてしまいます。現在のGooglebotはJavaScriptを実行しますが、レンダリングの遅延や他の検索エンジン・SNSのプレビュー（OGP）を考えると、依然として不利は残ります。

この2つの弱点への回答が、初期表示分のHTMLをサーバ側で作ってしまうSSRや、ビルド時に作り置きするSSGです。Next.jsやNuxtといったフレームワークは「初回はサーバでHTMLを生成し、以降はSPAとして振る舞う」ハイブリッドを標準にしており、純粋なSPAとの境界は溶けつつあります。

使いどころの判断

SPAが輝くのは、ログイン後に長時間操作するアプリ——管理画面、ダッシュボード、SaaSの業務ツール——です。SEOは不要で、初回ロードの重さは使用時間の長さで償却されます。逆に、ブログやECの商品ページのように「検索から来て1〜2ページ見て帰る」サイトでは、SPAの初期コストは払い損になりがちです。また、バンドルサイズの管理、認証トークンの保持場所（XSSで盗まれない設計）、APIと画面のエラーハンドリングなど、伝統的な構成にはなかった運用課題を抱え込むことも織り込んでおく必要があります。