GLOSSA

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(しんぐるぺーじあぷりけーしょん)

関連語

Reactフロントエンド

初心者向けメモ

通常のWebサイトが「ページをめくる本」だとすれば、SPAは「タブを切り替える電子書籍リーダー」です。本(HTML)は最初に1冊渡されて、後はタブ切替(JavaScript操作)だけで読み進める。何度もページを取りに行かなくて済む分、操作感が滑らかです。

この説明に改善点はありますか?

この説明を修正提案する新しい用語を提案する

提案は管理者が確認した後に反映されます