SPA

SPA は Single Page Application の略で、最初に読み込んだ 1 枚の HTML を土台にして、以降は JavaScript で画面の中身を差し替えながら動く Web アプリの作り方です。
一覧と詳細の切り替えや、条件変更に対する反応を軽く見せやすいので、管理画面や会員向け画面でよく使われます。

よく比較されるのは MPA です。
MPA はページを移るたびに HTML を読み直しますが、SPA は同じページの中で表示内容だけを切り替えるイメージです。

まず押さえたいポイント

• 1 枚のページを土台に中身だけ切り替える
• 操作量の多い画面と相性がよい
• 作り方としては CSR を使うことが多い

実務で見るポイント

• 社内ツールや会員画面ではかなり使いやすい
• 初回表示や SEO は設計を雑にすると不利になりやすい
• React や Vue は SPA を作りやすいが、使えば自動で最適になるわけではない

よく一緒に出てくる用語

• 比較対象として出る MPA
• 実装方法として近い CSR
• 公開ページで一緒に検討されやすい SSR