ページ遷移しないのに画面が変わる理由（SPAの仕組み）

ページが変わっているのではなく「中身」を入れ替えています

最近のWebサイトは不思議な動きをします。
リンクを押しているのに、読み込み画面が出ず、一瞬で内容が変わります。
それなのに、戻るボタンも普通に使えます。

多くの人がこう感じます。

> ページが高速に読み込まれている

実際は違います。
新しいページを取得していません。

1枚のHTMLの中身を書き換えているだけです。
これをSPA（Single Page Application）と呼びます。

従来のWebサイトの仕組み

以前のWebはシンプルでした。

• リンクをクリック
• サーバーへアクセス
• 新しいHTMLを取得
• 画面を再描画

毎回、ページ全体を読み直していました。
そのため「白い画面」が出ていました。

SPAがしていること

SPAでは、最初に1枚のHTMLだけを取得します。
その後はページ遷移を行いません。

代わりに、JavaScriptがサーバーから「データ」だけを取得します。

async function loadPage(page){
  const res = await fetch("/api/page/" + page);
  const data = await res.json();
  render(data);
}

ここで取得しているのはHTMLではなくJSONです。
文章データだけを受け取り、画面を作り直しています。

画面が変わる正体：DOMの書き換え

JavaScriptはHTMLを丸ごと入れ替えているわけではありません。
表示領域の一部だけを変更します。

<div id="content"></div>

function render(data){
  const content = document.getElementById("content");
  content.textContent = data.text;
}

この瞬間、画面が切り替わります。
しかしページは移動していません。

つまり、ページではなく部品を切り替えているのです。

URLが変わる理由

SPAでもURLは変わります。
これは特別なAPIを使っています。

history.pushState({}, "", "/about");

これにより、ページ遷移せずにURLだけ変更できます。
戻るボタンが使えるのもこの仕組みです。

ブラウザは「移動した」と思いますが、
実際には同じページに留まっています。

なぜアプリのように感じるのか

再読み込みがないからです。

従来のWeb：

• 毎回サーバーへHTMLを取りに行く

SPA：

• 最初だけHTML取得
• 以降はデータだけ通信

通信量が減るため、操作が高速になります。
その結果、表示が途切れません。

メリットと注意点

SPAは便利ですが万能ではありません。

メリット

• 高速な画面切替
• アプリに近い操作感
• 部分更新が可能

注意点

• 初回読み込みが重い
• JavaScript無効だと動かない
• SEOが難しい場合がある

特に検索エンジンはHTMLを読むため、
内容が後から生成されると認識されにくいことがあります。

なぜ広く使われているのか

SNS・管理画面・チャットなどは
「連続操作」が前提です。

もし毎回ページ遷移すると、

• 入力が消える
• スクロール位置が戻る
• 体験が途切れる

SPAはこれを防ぎます。
つまり機能ではなく体験のための技術です。

まとめ：Webページはもう「ページ」ではない

SPAの本質は単純です。

• HTMLは1回だけ取得
• データだけ通信
• JavaScriptが画面を構築

ページ遷移しないのに画面が変わる理由は、
ブラウザの中でアプリが動いているからです。

現在のWebサイトは、文書表示システムではありません。
ブラウザというOSの上で動くソフトウェアになっています。