IT 技書の森

SPA

ページ遷移なしに動的にコンテンツを更新する Web アプリケーションのアーキテクチャ

Webフロントエンド

SPA とは

SPA (Single Page Application) は、最初に 1 つの HTML ページを読み込み、以降のページ遷移をブラウザ側の JavaScript で処理する Web アプリケーションのアーキテクチャである。サーバーからは API (JSON) でデータだけを取得し、画面の描画はクライアント側で行う。Gmail、Google Maps、Twitter が代表的な SPA だ。

MPA との比較

観点 SPA MPA (Multi Page Application)
ページ遷移 JavaScript で画面を切り替え (高速) サーバーから新しい HTML を取得 (遅い)
初期ロード 遅い (JS バンドルのダウンロード) 速い (HTML だけ)
SEO 対策が必要 (SSR/SSG) 問題なし
UX ネイティブアプリに近い操作感 ページ遷移のたびに白画面
サーバー負荷 API のみ (軽い) HTML 生成 (重い)

SPA の動作フロー

1. ブラウザが index.html を取得 (ほぼ空の HTML)
2. JavaScript バンドル (main.js) をダウンロード・実行
3. React/Vue が DOM を構築し、画面を表示
4. ユーザーがリンクをクリック
5. JavaScript が URL を変更 (History API)
6. 対応するコンポーネントを表示 (サーバーへのリクエストなし)
7. データが必要な場合は API (fetch) でサーバーに問い合わせ

S3 + CloudFront でのホスティング

SPA は静的ファイル (HTML, JS, CSS) だけで構成されるため、S3 + CloudFront でホスティングできる。サーバーが不要でコストが最小限だ。

SPA の課題と対策

SEO

SPA の初期 HTML は空 (<div id="root"></div>) のため、検索エンジンがコンテンツを認識できない。

対策:

  • SSR (Next.js): サーバーで HTML を生成
  • SSG: ビルド時に静的 HTML を生成
  • プリレンダリング: クローラー向けに事前レンダリング

初期ロードの遅さ

JavaScript バンドルが大きいと、初期表示が遅くなる。

対策:

  • コード分割 (React.lazy): ルートごとにチャンクを分割
  • Tree Shaking: 未使用コードを除去
  • CDN (CloudFront): エッジからの高速配信

メモリリーク

SPA はページ遷移でリロードされないため、イベントリスナーやタイマーの解除忘れがメモリリークの原因になる。React の useEffect のクリーンアップ関数で適切に解除する。

実践的な知識は関連書籍でも得られる。

関連用語