SPA
えすぴーえー
SPA
一言でいうと
ページ遷移時に画面全体を再読み込みせず、JavaScriptで部分更新するWebアプリの作り方のこと。
詳しい意味
SPA(Single Page Application)は、最初に1度HTMLとJavaScriptを読み込み、以降のページ遷移はJavaScriptで画面の必要な部分だけを書き換えるWebアプリの作り方です。Gmail、Google Maps、Slack のような「画面遷移してもページがちらつかない」体験はSPAの典型例。React / Vue / Angular などのフレームワークで作るのが一般的です。利点は滑らかな体験と高い対話性。一方、初回ロードが重い、SEO最適化に工夫が要る、JavaScript無効環境で動かない、といった弱点があるため、SSR(サーバーサイドレンダリング)や SSG(静的生成)と組み合わせて補うのが現代の主流です。
何に使うか
ユーザー操作が多く、画面遷移の滑らかさが重要なアプリ。社内ツールやダッシュボード。チャット・コラボレーションツールのような対話性重視のWebアプリ。
どんな時に出るか
「SPAで作る」「SPAだとSEO弱い」「SPAだから初期ロード重い」といった場面で登場します。
具体例
- 管理画面はSPAで作って、画面遷移を高速化した。
- SPAだけだとSEOが弱いので、ランディングページだけ SSR で出している。
別名・略称
spa(えすぴーえー)Single Page Application(しんぐるぺーじあぷりけーしょん)
初心者向けメモ
通常のWebサイトが「ページをめくる本」だとすれば、SPAは「タブを切り替える電子書籍リーダー」です。本(HTML)は最初に1冊渡されて、後はタブ切替(JavaScript操作)だけで読み進める。何度もページを取りに行かなくて済む分、操作感が滑らかです。