8
10

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@Hashimoto-Noriaki(Noriaki Hashimoto)

「SPAってなんやねん」を小学生でもわかるように解説

8
Posted at

概要

「SPA」という言葉、聞いたことありますか？
Single Page Application（シングル・ページ・アプリケーション） の略です。

React・Next.js・Vue.jsを触り始めると、必ずこの言葉が出てきます。でも、「なんとなく使ってるけど、正直よくわかってない」という方、多いんじゃないでしょうか。

この記事では、SPAを小学生でもわかるレベルで解説します。

AI時代だからこそ設計を学ぶ

AIがコードを書いてくれる時代になりました。でも、AIに「SPAで作って」と言うためには、SPAが何かを知っている必要があります。

道具の使い方を知らなければ、AIを使っても正しいものは作れません。

コードを書く価値は無くなってきたので、設計を語れるかの方が大事です。

🏠 小学生にもわかる説明

ページをめくる本 vs タブを切り替えるタブレット

SPAを一言で説明すると、こうなります。

「最初に一冊の本を丸ごと読み込んで、あとはページをめくるだけ」

もう少し詳しく説明しましょう。

普通のウェブサイト（MPA）は「図書館」

従来のウェブサイトはMPA（Multi Page Application） と呼ばれます。

図書館で本を借りるイメージです。

  1. 「プロフィールページを見たい」→ 図書館に行って本を借りる（サーバーからページを取得）
  2. 「設定ページを見たい」→ また図書館に行って別の本を借りる（また取得）
  3. 「トップページに戻りたい」→ また図書館に行く（また取得）

ページが変わるたびに毎回サーバーに取りに行くので、画面が一瞬白くなります。

📱 SPA は「全部入り電子書籍」

SPAは最初にアプリ本体（JavaScript）をまとめて読み込みます。

電子書籍のタブレットを買うイメージです。

  1. 最初にタブレットを受け取る（アプリを読み込む）
  2. 「プロフィールページを見たい」→ タブを切り替えるだけ（画面遷移なし）
  3. 「設定ページを見たい」→ またタブを切り替えるだけ
  4. 「トップページに戻りたい」→ タブを切り替えるだけ

ページが変わっても画面が白くならず、瞬時に切り替わります。

ここで一つ補足です。「最初に全部読み込む」と言っても、最初に読み込むのは"アプリの枠組み"の方で、プロフィールの中身などのデータは、そのページを開いたときに裏でこっそり取りに行くのが普通です。タブレット本体は最初に受け取るけど、本の中身は読むときにダウンロードする、というイメージですね。

サクサク動く理由は2つの仕組みが組み合わさっているからです。

  1. 最初にアプリ本体を読み込む ― ページ遷移のたびにサイト全体をサーバーへ取りに行かない
  2. 差分だけ書き換える ― 画面全体をリロードするのではなく、変わった部分だけJavaScriptが書き換える。ナビバーは変わらないならそのまま、中身だけ差し替える

Reactが「仮想DOM」という仕組みを使っているのも、この「差分だけ効率よく書き換える」ためです。

ChatGPT Image 2026年6月19日 15_15_48.png

MPA と SPA、何が違うの？

MPA（従来） SPA
ページ遷移のたびに サーバーから新しいHTMLを取得 JavaScriptが画面を書き換える
画面の白くなる瞬間 ある ない
最初の読み込み 速い 少し遅い
SEO 得意 工夫が必要
代表的な技術 Rails・PHP React・Vue・Next.js

SPAの中身ってどうなってるの？

SPAの核心は「JavaScriptが画面を書き換える」ことです。

HTMLは最初1枚だけ

SPAのHTMLファイルはこれだけです。

<!DOCTYPE html>
<html>
  <body>
    <div id="root"></div>  <!-- ここにJavaScriptが中身を入れる -->
    <script src="app.js"></script>
  </body>
</html>

<div id="root"> は空っぽです。JavaScriptがここに「プロフィールページ」「設定ページ」「トップページ」を次々と書き込んでいきます。

URLが変わっても、HTMLは変わらない

「でも、URLはちゃんと変わるよ？」と思った方、鋭いです。

SPAではブラウザのURLだけを変えて、HTMLの取得は行わないという技術を使っています。
これを「ルーティング」といいます。

https://example.com/         → トップページの内容をJSで表示
https://example.com/profile  → プロフィールの内容をJSで表示
https://example.com/settings → 設定の内容をJSで表示

URLは変わっているのに、サイト全体の再取得は発生しません。JavaScriptがURLを監視して、中身を切り替えているだけです。

ChatGPT Image 2026年6月29日 18_06_39.png

React（Next.js）でのコード例

マッチングアプリで考えてみましょう。

ルーティングの設定（Next.js App Router）

app/
├── page.tsx          → / （トップページ）
├── profile/
│   └── page.tsx      → /profile （プロフィールページ）
└── messages/
    └── page.tsx      → /messages （メッセージページ）

ページ遷移の実装

// MPA（従来）：<a>タグ → ページ全体をリロード
<a href="/profile">プロフィールへ</a>

// SPA（React）：<Link>タグ → 画面だけを書き換え
import Link from 'next/link'

<Link href="/profile">プロフィールへ</Link>

<a> タグはサーバーに「次のページをください」とリクエストします。<Link> タグはJavaScriptが画面だけを書き換えます。この違いだけで、ユーザー体験が大きく変わります。

コンポーネントで部品を使い回す

SPAのもう一つの強みは「コンポーネント」です。

ナビゲーションバーやボタンなど、全ページで使い回せる部品として定義します。

// components/NavBar.tsx
export function NavBar() {
  return (
    <nav>
      <Link href="/">トップ</Link>
      <Link href="/profile">プロフィール</Link>
      <Link href="/messages">メッセージ</Link>
    </nav>
  )
}

// app/layout.tsx（全ページ共通レイアウト）
export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <NavBar />       {/* 全ページで同じナビバーを使い回す */}
        <main>{children}</main>
      </body>
    </html>
  )
}

ナビバーをMPAで作ると、ページが変わるたびに同じHTMLを毎回サーバーから取得します。SPAならナビバーは一度だけ読み込んで、あとはそのまま使い続けます。

SPAが太りすぎるとどうなる？

SPAの弱点は「最初にアプリ本体をまとめて読み込む」ことです。
ページや機能が増えれば増えるほど、最初に読み込むJavaScriptが重くなります。

// ❌ 全ページのコードを最初に読み込む（重い）
import ProfilePage from './ProfilePage'
import MessagesPage from './MessagesPage'
import SettingsPage from './SettingsPage'
import AdminPage from './AdminPage'

対策は「コード分割（Code Splitting）」です。そのページが必要になったときだけ読み込みます。

// ✅ 必要なときだけ読み込む（軽い）
import dynamic from 'next/dynamic'

const AdminPage = dynamic(() => import('./AdminPage'))
// Adminページに行ったときだけ読み込まれる

Next.jsではファイルを分けるだけで自動的にコード分割してくれます。

身近な代表例で見るSPAとMPA

理屈だけだとピンとこないので、みなさんが使っているサービスで見てみましょう。

⚠️ 先に大事な注意です。大きなサービスは「全部SPA」「全部MPA」ときれいに分かれていません。ページごとに使い分けるハイブリッドが普通です。なのでここでは「その体験の代表」として見てください。

SPA（的な操作感）の代表例

GmailやGoogleマップは、画面が白くならず中身だけ切り替わる体験の代表格です。X（旧Twitter）、Notion、Slackのウェブ版、Figma、Trelloなども、まるでアプリのようにサクサク動きます。

共通点は 「ログインして使い込む、操作がたくさんあるWebアプリ」 だという点です。

MPA（ページごとにサーバーから取得）の代表例

Wikipedia、ニュースサイト、企業のコーポレートサイト、多くのブログ。QiitaやZennのような記事プラットフォームも、記事ページはSEOと初速が命なのでSSR／MPA寄りです。

共通点は 「検索から個別ページに直接来てほしい、コンテンツを読むのが主役のサイト」 です。

つまり、ざっくりこう覚えておけばOKです。

  • 操作が中心のアプリ → SPAが向いている
  • 検索からの閲覧が中心のサイト → MPA（SSR）寄りが向いている

補足：たとえばAmazonは、商品一覧などはMPA的なのに、カート周りは部分的にSPA的だったりと、1つのサービスの中でも混ざっているのが実態です。「厳密には混ざってるけど、体験の代表として」と捉えてください。

採用すべきでないケース

ブログ・ニュースサイト

記事を書いてGoogleに見つけてもらいたいなら、SPA（特にCSR）は向いていません。検索エンジンがHTMLを読み取るのに時間がかかり、SEOで不利になりやすいためです。だからWikipediaやニュースサイトはMPA／SSR寄りで作られています。

この場合はSSRを使うか、Qiita・Zennのような既存プラットフォームに投稿する方が
現実的です。

社内ツール・管理画面の小規模なもの

「5人しか使わない社内の出勤管理システム」にSPAは過剰です。
Railsのビュー機能（MPA）で十分です。

ランディングページ（LP）

LPは、速度が命です。CSRの「最初の読み込みが遅い」という弱点が致命的になります。

ChatGPT Image 2026年6月29日 17_57_44.png

まとめ

内容
SPAとは 最初にアプリ本体を読み込んで、JavaScriptが画面を書き換えるアプリ
MPAとの違い ページ遷移のたびにサイト全体をサーバーへ取りに行かない
代表的な技術 React / Next.js / Vue.js / Nuxt.js
CSRとSSR どこでHTMLを生成するかの違い
向いているもの Webアプリ・マッチングアプリ・SNS・ダッシュボード（例：Gmail・Slack・Notion）
向いていないもの ブログ・LP・小規模な社内ツール（例：Wikipedia・ニュースサイト）

SPAは「速くて気持ちいいUI」を作るための設計パターンです。でも、すべてのプロジェクトに採用すべきではありません。
SPAを採用すべきか、しない方がいいかを考えていきましょう！

使用したAI

  • Claude
  • ChatGPT
8
10
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
8
10

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?