概要
SPAは、ウェブサイトやウェブアプリの構築方法の一つで、
ページを遷移するたびに画面全体を再読み込みしないのが特徴です。
ユーザーが操作してもページ全体がリロードされず、
一部だけが動的に書き換わるため、アプリのようにスムーズに動作します。
正式名称
Single Page Application（シングル・ページ・アプリケーション）
略称
SPA（エス・ピー・エー）
特徴
- 最初に1つのHTMLファイルを読み込むだけで済む
- ページ遷移が早く、スムーズなユーザー体験ができる
- 必要なデータだけをサーバーから取得し、表示を更新する
- ブラウザの履歴管理やURL制御には追加の実装が必要
- JavaScriptの依存度が高く、SEO対策に工夫が必要な場合もある
具体例
- Gmail：受信トレイからメールを開いてもページ全体はリロードされない
- Google Maps：スクロールや検索に対して動的に地図が更新される
- Twitter：ツイートをクリックしても画面全体は再読み込みされず、部分的に更新される
- Facebook：通知やプロフィールをクリックしてもスムーズに表示が切り替わる
関連用語
| 用語 | 解説 |
|---|---|
| MPA（Multi Page Application） | 従来のウェブサイト構成。ページごとにHTMLファイルを読み込む方式 |
| React（リアクト） | SPAを作るための代表的なJavaScriptライブラリ |
| Vue.js（ビュージェイエス） | 同じくSPA開発に使われる軽量なJavaScriptフレームワーク |
| AJAX（エージャックス） | 部分的にデータを取得してページを再読み込みせずに表示を更新する技術 |
| PWA（Progressive Web App） | SPAと似ていて、アプリのような機能をウェブで実現する技術 |