【えすぴーえー（しんぐるぺーじあぷりけーしょん）】

SPA（シングルページアプリケーション）とは？

最終更新: 2026年10月2日

💡 同じWeb文書の内容を更新して、画面を切り替える

一つのWeb文書の内容をJavaScriptで更新し、アプリ内の画面を切り替える方式。通信、URLと履歴、SEO、初期表示との関係を解説します。

📌 このページのポイント

商品一覧から詳細へ、同じWeb文書の内容を更新する例です。画面切り替え後も通信が必要な場合があり、SPAだから速い・検索に弱いとは一律に決まりません。

ひよこ

SPAは、画面が1ページしかない？

ペンギン先生

一つのWeb文書の中身をJavaScriptで更新する方式だよ。商品一覧から詳細へ移るような、複数の画面を作れる。アプリ内の切り替えでは、文書全体を毎回読み直す代わりに必要な内容を更新するんだ。

ひよこ

サーバーとの通信も、最初の1回だけ？

ペンギン先生

違うよ。必要なデータをAPIなどから取得したり、コードを追加で読み込んだりできる。手元にあるデータだけで表示を変える場合もある。文書全体の読み直しと、データの通信を分けよう。

ひよこ

URLや戻るボタンは、使えない？

ペンギン先生

使えるように設計できるよ。History APIなどで履歴を管理し、戻ったときの画面を復元する。URLを直接開く、再読み込みする、存在しない画面を開く場合も、配信側とアプリの動作を確認するんだ。

ひよこ

Google検索には、載らない？

ペンギン先生

GoogleはJavaScriptを実行して内容を読み取るけれど、取得や描画の条件、待ち時間がある。重要な内容を最初のHTMLで届けるSSRや事前生成を検討し、URLごとのタイトル、リンク、エラーの扱いも確認する。SPAという名前だけで検索の可否は決まらないよ。

ひよこ

Reactを使えば、SPAで必ず速くなる？

ペンギン先生

Reactなどを使っても、画面の作り方は実装による。JavaScriptやデータの取得量、処理の負担によって初期表示が遅くなる場合もある。コード分割などを検討し、実際の表示と操作を測って判断しよう。

もっと詳しく知りたい人へ

SSRとSPAは、どちらか一方？

初期表示のHTMLをサーバーで用意し、その後のアプリ内の移動をブラウザー側で行う設計もあります。最初の表示をどう届けるかと、その後の画面をどう切り替えるかを分けて考えます。

履歴と画面の状態を対応させる必要があります。pushStateで履歴を追加し、popstateで戻る操作などに応じて状態を復元する方法があります。最初の状態や直接アクセスも確認します。

まとめ：ざっくりこれだけ覚えればOK！

「SPA」って出てきたら「同じWeb文書の内容をJavaScriptで更新し、画面を切り替える方式」と思えばだいたいOK！

📖 おまけ：英語の意味

「Single Page Application」＝単一のページを使うアプリケーション

💬 一つのWeb文書を使って画面を更新するという意味です。画面やURLが一つだけ、全データを最初に取得する、という意味ではありません。