このページの目次

フロントエンド中級図解あり

SPAとは？

読み方：えすぴーえー

最終更新：2026/08/18

3秒でわかる

最初に読み込んだ 1 枚の HTML の上で、JavaScript が中身を差し替えて画面を切り替える Web アプリの作り方です。

30秒図解

SPAは最初の1回だけ1枚のHTMLとJavaScriptを受け取り、以後はURLとDOMの必要な部分をブラウザ内で切り替える — SPAは最初に受け取った1枚のHTMLを保ち、URLとDOMの変わる部分だけをブラウザで入れ替えます。直URLにはindex.htmlを返す設定が必要です。

もう少し詳しく

どういうものか

Single Page Application の略。従来の Web サイトはリンクを押すたびにサーバーから新しい HTML を受け取り、ページ全体を読み直していた。SPA では最初の 1 回だけ HTML と JavaScript を受け取り、以降の画面切り替えは JavaScript が DOM を書き換えて行う。サーバーとは必要なデータだけを JSON でやり取りする。

React、Vue、Angular で作られたアプリの多くがこの形になる。Gmail や Google マップのように、操作しても画面全体が白く点滅しないサイトは、たいてい SPA と考えてよい。

なぜ必要か

画面遷移のたびにヘッダーやサイドバーまで送り直すのは無駄が多い。SPA は変わる部分だけを描き直すため、体感速度が上がる。加えて、入力途中の状態や開いたタブの位置といった情報が遷移をまたいで保てるので、業務システムのような操作の多い画面と相性がよい。

具体例

React Router で 2 画面を切り替える最小の形。

import { BrowserRouter, Routes, Route, Link } from "react-router-dom";

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">一覧</Link>
        <Link to="/detail/1">詳細</Link>
      </nav>
      <Routes>
        <Route path="/" element={<ItemList />} />
        <Route path="/detail/:id" element={<ItemDetail />} />
      </Routes>
    </BrowserRouter>
  );
}

Link を押しても通信は発生せず、History API で URL を書き換えたうえで表示する部品だけを入れ替えている。

つまずきやすいところ

サーバー設定の抜けが最も多い。/detail/1 を直接開いたりリロードしたりすると、そのパスのファイルはサーバーに存在しないため 404 になる。どのパスへのアクセスでも index.html を返す設定が要る。

検索エンジン対策も課題になる。中身が JavaScript 実行後にしか存在しないため、クロールの結果が安定しない。SEO が重要なページは、Next.js のようなサーバーサイドレンダリングを併用する構成が選ばれる。

最初に読み込む JavaScript が大きくなりがちな点も見落とされやすい。初回表示だけは、素の HTML より遅くなることがある。

似た用語との違い

方式	HTML を作る場所	初回表示	遷移の速さ
MPA	サーバー	速い	毎回読み直し
SPA	ブラウザ	遅め	速い
SSR	サーバーで生成しブラウザで引き継ぐ	速い	速い

知識のつながり

サイドバーと同じ推奨ルート・関連語を、まとめて確認できます。

現在地SPAフロントエンド

先に理解しておきたい用語

TypeScript用語カテゴリの推奨学習順コンポーネント用語カテゴリの推奨学習順

別方向から理解する用語

ルーティング届いた URL と HTTP メソッドの組み合わせを見て、どの処理を動かすか決めフロントエンド利用者のブラウザや画面上で動く部分の総称。見た目の組み立てと操作への反応を担当し

LEARN BY DOING

この用語を、教材で使ってみる

直接関連する編と、その編を含むコースです。用語だけで終わらず、ブラウザ上で実際に手を動かせます。

このコースが入っている学習分野

React

小さな部品から、複数ページを持つアプリまで。

公開中 8コース・148レッスン

学習React入門JSX・コンポーネント・props

学習state・フォーム・リスト入力やクリックに応じてUIを変える

学習useEffect・コンポーネント設計副作用と部品の責務を整理する

学習TypeScript・APIReactとAPIを型で安全に扱う

ほか4コース

学ぶ順番を見る

Next.js

Reactアプリを、サーバー・検索・公開まで備えたサービスへ。

公開中 3コース・58レッスン

学習Next.js入門App Routerとレイアウト

学習Next.jsフルスタックサーバー・データ取得・API

学習Next.js公開・SEOSEO・画像最適化・デプロイ

学ぶ順番を見る

この用語を扱うコース

コース

理解の現在地

実際に学ぶ

React入門：JSX・コンポーネント・props

Reactと宣言的UI、JSX、コンポーネント、props、children、ファイル分割を学ぶ全22レッスンの入門コースです。モダンJavaScript復習7レッスンは、既習または診断合格で免除できます。最後はプロフィールカードを再利用可能なコンポーネントへ分割します。stateやフォームは次のコースで扱います。

22レッスン

学んでみる