SPA

一言で言うと

ページ遷移なしに画面が切り替わるWebアプリの仕組み。アプリのようにサクサク動くWebサイトを実現する技術。

もう少し詳しく

SPAは「Single Page Application」の略で、文字通り「1ページだけのアプリケーション」です。従来のWebサイトでは、リンクをクリックするたびにページ全体が読み込み直されていました。白い画面が一瞬チラッと表示されるのを見たことがありますよね。

SPAでは、最初に1回だけページを読み込み、あとは必要な部分だけを書き換えます。スマホアプリのように、画面がスムーズに切り替わるのが特徴です。Gmail、Googleマップ、TwitterなどはすべてSPAです。

React、Vue.js、Angularなどのフレームワークを使って作られることが多く、現代のWebアプリケーション開発で広く使われる手法の一つです。一方で、SEOや初回表示速度を重視する場合はSSR/SSG（Next.jsやNuxtなど）が選ばれることも増えており、用途に応じて使い分けられています。

実務でどう使うか

コードで見てみよう

// SPAのルーティング（React Routerの例）
// URLが変わっても、ページ全体は再読み込みされない
function App() {
  return (
    
      } />
      } />
      } />
    
  );
}
// → /about にアクセスすると、ページの一部だけが
//   AboutPage の内容に切り替わる（高速！）