ページを開き直していないのに画面が変わる理由
ChatGPTの画面を使っていると、不思議な感覚があります。
メニューを押しても、会話を指示しても、画面が切り替わっているのに「ページが再読み込みされていない」ように見えます。
これは錯覚ではありません。
実際にページ遷移は起きていません。
従来のWebサイトは「ページ」という単位で動いていましたが、ChatGPTのようなサービスは「アプリ」として動いています。
ブラウザの中でプログラムが実行されている状態です。
従来のWebサイトの動き
まず昔ながらのWebの動きを整理します。
1. URLをクリック
2. サーバにリクエスト送信
3. HTMLが返る
4. 画面全体が描画
この流れを毎回繰り返します。
GET /article.html
||
ページ移動とは、HTMLを丸ごと交換することでした。
* ChatGPT型の動き
ChatGPTでは最初の1回だけページを読み込みます。
その後は、HTMLを再取得しません。
最初にダウンロードされるもの：
- HTML（骨組み）
- CSS（見た目）
- JavaScript（動作プログラム）
このJavaScriptが、画面操作・通信・描画をすべて担当します。
つまり、画面は「表示されている」のではなく、<strong>ブラウザ内で作られている</strong>のです。
* SPA（Single Page Application）
この仕組みはSPA（シングルページアプリケーション）と呼ばれます。
1つのページのまま、内容だけを動的に書き換えます。
画面変更の実態：
>|javascript|
document.querySelector("#app").innerHTML = newContent;
||
ページを移動したのではなく、表示内容を差し替えています。
* メッセージ送信時に起きていること
送信ボタンを押すと、ブラウザはサーバに通信します。
ただしページ遷移ではありません。
>|javascript|
fetch("/api/chat", {
method: "POST",
body: JSON.stringify({ message: "こんにちは" })
});
||
これは「API通信」と呼ばれます。
HTMLを取得するのではなく、データだけを送受信しています。
* なぜ画面が速く感じるのか
ページ全体を読み込み直さないため、通信量が大幅に減ります。
従来：
- HTML
- CSS
- 画像
- JavaScript
SPA：
- 必要なデータのみ
その結果、ボタン操作に対する反応が即座になります。
Webサイトというより、スマホアプリに近い動きになります。
* 会話がリアルタイムに表示される仕組み
ChatGPTでは、文章が一気に表示されるのではなく、少しずつ出てきます。
これは定期通信ではありません。
サーバは生成途中のデータを分割して送り続けています。
ブラウザは受け取るたびに画面へ追加します。
イメージ：
サーバ → 「こ」
サーバ → 「こん」
サーバ → 「こんにちは」
JavaScriptが到着したテキストを逐次描画しています。
* URLが変わるのにページ遷移していない理由
会話を開くとURLが変わりますが、読み込みは起きません。
これは「履歴API」を使っています。
>|javascript|
history.pushState({}, "", "/c/12345");
||
ブラウザの履歴だけを更新し、画面はそのままです。
戻るボタンが使えるのはこのためです。
* 注意点：JavaScriptが止まると何もできない
SPAの弱点もあります。
JavaScriptが動かないと、画面操作が成立しません。
- 古いブラウザ
- 拡張機能の干渉
- スクリプトブロック
この場合、画面は表示されても操作不能になります。
* よくある誤解
「サーバがすべて描画している」と思われがちですが、実際にはブラウザが多くの処理を担当しています。
サーバ：データ生成
ブラウザ：画面生成
役割が分かれています。
* まとめ：Webサイトとアプリの境界
ChatGPTの画面は、Webページを見ている感覚でも、仕組みはアプリケーションです。
ブラウザは単なる閲覧ソフトではなく、プログラム実行環境として動いています。
私たちはサイトを操作しているつもりですが、実際にはブラウザ内のプログラムを操作しています。
