SPA（Single-Page Application）は、最初に1枚のHTMLを読み込んだあと、画面遷移をフルリロードではなくJavaScriptによるURL書き換えとDOM差し替えで処理するWebアプリケーションの形態です。2010年に登場したBackbone.jsが嚆矢で、AngularJSやEmber.jsを経てReact・Vue・Svelteの時代に主流化しました。Gmail（2004年）が概念的な先駆けとされ、ネイティブアプリに近い操作感をブラウザで実現するための定石となっています。
この記事の目次
- SPAを成立させる4つの技術
- Backbone.jsからReactまでの系譜
- SPA採用前に押さえる注意点
- MPAとの違いと使い分け
- まとめ
SPAを成立させる4つの技術
SPAは複数の技術が組み合わさって成立しています。1つ目はクライアントサイドのルーター（React RouterやVue Routerなど）で、History APIを使ってアドレスバーのURLを書き換えながら、ページ全体の再読み込みなしに表示コンポーネントを切り替えます。2つ目はFetchやaxiosによるAPI通信で、画面で必要なJSONをバックエンドから取得し、差分でDOMを更新します。
3つ目は状態管理ライブラリです。Redux（2015年Dan Abramov氏）、Vuex/Pinia、Zustandなどが代表で、ユーザー情報や通知一覧のように複数画面で共有するデータを一元管理します。4つ目はWebpack・Vite・esbuildなどのバンドラで、コード分割・Tree Shaking・圧縮を行い、ブラウザに届けるバンドルを最適化します。この4要素が組み合わさることで「最初に重めの初期ロード」「以降は軽快な画面遷移」というSPA独特のパフォーマンス特性が生まれます。
Backbone.jsからReactまでの系譜
SPAという考え方の発端は2004年のGmailとされ、AjaxとIFRAMEを駆使してメール一覧を切り替えてもページがリロードされない体験を提供しました。概念がライブラリ化されたのは2010年で、Jeremy Ashkenas氏のBackbone.jsがModel/View/Routerを用意し、同年GoogleがAngularJSをオープンソース化、翌2011年にはYehuda Katz氏らのEmber.jsが続きます。これらの登場で「クライアントサイドルーター＋テンプレート＋データバインディング」という構成が普及しました。
2013年にFacebookが発表したReactはVirtual DOMで差分更新を効率化し、2014年にEvan You氏がVue.jsを公開してSFC（Single File Component）の書き心地を提示します。2016年のNext.js、2018年のNuxt、2019年のSvelteKit前身などフレームワーク化が進み、現在ではSPAは「ライブラリで自前構築するもの」から「メタフレームワークが面倒を見てくれる前提」へ変化しました。並行してネイティブアプリのスタイルガイドが整い、ジェスチャやプッシュ通知までWebで再現する流れが定着しています。
SPA採用前に押さえる注意点
SPA採用の検討では、まず初回バンドルサイズの上限を設けることが大切です。ReactやVue本体に加えて状態管理・UIライブラリ・フォームバリデーション・日付処理などを足すと、気付けば1MBを超える初回JSになり、3G回線の端末では数十秒の白画面が発生します。ルートごとのコード分割と、ライブラリの選定段階でのbundle phobiaチェックは欠かせない作業です。
次にSEO要件と戻る/進むボタンの挙動です。SPAではURL同期を自前で実装するため、履歴管理を雑にすると「戻ったのに同じ画面が出る」「リロードするとエラーになる」といった不具合が出やすくなります。また、検索エンジンに見せたいページがある場合はSSRやプリレンダリングと組み合わせる前提で設計する必要があります。古い端末（Android Goやローエンド機）でJavaScriptの実行コストが体感速度に直結するため、Lighthouseだけでなく実機での体感検証を必ず行うのが望ましい流れです。
MPAとの違いと使い分け
SPAとMPA（Multi-Page Application）の違いは、画面遷移の処理方法に集約されます。MPAはリンクをクリックすると新しいURLにフルリクエストが発行され、サーバが返したHTMLでページ全体が置き換わります。SPAはJavaScriptがURL書き換えをエミュレートし、必要な部分だけfetchとDOM操作で更新するため画面切替が滑らかです。代わりに状態管理・ルーティング・エラー境界などをアプリ側で実装する必要があり、コード量が増えます。
使い分けの原則は明快です。コーポレートサイト、ニュース、ブログ、ECの商品ページのように「ページごとに独立した内容で検索流入が主」な用途はMPA（あるいはSSR/SSG）に向きます。SaaSの管理画面、グラフィックエディタ、共同編集ツールのように「ログイン後の長時間滞在でインタラクションが多い」用途はSPAが活きます。Next.jsのApp Routerのようにページ単位でSSRとSPAを混在させる構成が増えており、今は二者択一ではなくページ単位での最適化が現実的なアプローチです。
まとめ
SPAは2010年のBackbone.jsを起点にAngularJS・React・Vueへと発展し、JavaScriptがURLとDOMを操作してネイティブアプリ並みの操作感をブラウザで実現するアプリ形態として定着しました。初回バンドルとSEOの扱いに気を配り、ページ単位でSSRや静的生成と使い分けることで、SPAの強みである軽快なインタラクションを活かしつつ弱点を補えます。
※本記事はIT用語辞典の手書きドラフトです。公開前に最新情報・出典を確認のうえ加筆修正してください。
コメント