なぜWebサイトは「動く」のかを仕組みで理解

Webサイトが動く本当の理由

Webサイトが「動いている」ように見えるのは、特別な魔法があるからではありません。
実際には、通信とプログラムの組み合わせで成り立っています。

ページを開く、スクロールする、ボタンを押す。
この一連の動作は、1つの処理ではありません。
サーバとブラウザが役割分担して、連続した処理を行っています。

ポイントはここです。
Webサイトは「1回読み込んで終わり」ではありません。
表示されたあとも処理が続いているため、動いているように見えます。

最初に起きるのは通信

URLを入力してEnterを押すと、最初に行われるのは画面の描画ではありません。
ブラウザはサーバへ問い合わせを行います。

https://example.com にアクセス
→ サーバに「ページをください」と要求
→ HTMLファイルが返ってくる

この段階では、まだ画面は完成していません。
返ってきたのは「設計図」に近いデータです。

この設計図をブラウザが読み取り、画面を組み立てていきます。

HTMLを解析すると画面の骨組みができる

ブラウザは受け取ったHTMLを上から順番に読みます。
そしてDOM（Document Object Model）という内部データを作ります。

DOMは簡単に言うと、ページの構造をブラウザが理解するためのツリーです。

• 見出し
• 文章
• 画像
• ボタン

これらを「部品」として登録していきます。
この時点で、まだ見た目は整っていません。

CSSで見た目が決まる

次にCSSが読み込まれます。
ここで色や配置、サイズが適用されます。

つまり、最初に表示される静的な画面は

• HTML（構造）
• CSS（見た目）

この2つで完成します。

ここまでの状態が、いわゆる「静的サイト」です。
クリックしても画面は変わりません。
単に別のページに移動するだけです。

JavaScriptが「動き」を生む

ここからが「動く」理由です。
ブラウザは続いてJavaScriptを実行します。

JavaScriptはDOMに対して命令を出します。

document.getElementById('btn')
  .addEventListener('click', function(){
    document.getElementById('msg').textContent = '変更されました';
  });

このコードは、ボタンが押された瞬間に文字を書き換えます。
重要なのは、ページを再読み込みしていない点です。

つまりWebサイトが動くとは、
画面を作り直しているのではなく、画面を書き換えているのです。

さらに裏で通信が行われることもある

最近のWebサイトでは、ボタンを押したときにサーバへ再度通信することがあります。

fetch('/api/user')
  .then(res => res.json())
  .then(data => {
    document.getElementById('name').textContent = data.name;
  });

これにより、ページ遷移せずに情報を更新できます。
検索候補の表示やチャット、いいねボタンなどがこれにあたります。

ここで起きていることは、

1. ボタンを押す
2. JavaScriptが通信する
3. サーバがデータを返す
4. 画面を書き換える

という流れです。
これが「アプリのようなWebサイト」の正体です。

よくある誤解：サーバが画面を動かしているわけではない

「サイトが動いている＝サーバが処理している」と思われがちですが、半分正しく半分誤りです。

サーバの役割は主に

• データを渡す
• 計算を行う
• 保存する

です。

画面を動かしているのはブラウザ側です。
JavaScriptがユーザーのPC上で実行されているため、サーバが重くなくてもページが遅くなることがあります。

逆に、サーバが遅くても、一度表示された画面の操作は軽快なことがあります。

実際に起きる問題

JavaScriptが大量に動くページでは、CPU使用率が上がります。
その結果、スクロールがカクついたり、クリックの反応が遅れます。

これは回線の問題ではありません。
ブラウザが処理しきれていない状態です。

特に、

• 大量のアニメーション
• 複雑な表の描画
• リアルタイム更新

を同時に行うと発生しやすくなります。

リスクと注意点

便利な仕組みですが、注意点があります。
JavaScriptが前提になると、無効化された環境で機能しない場合があります。

例えば

• 古いブラウザ
• 制限された社内環境
• セキュリティ設定

この場合、ボタンが押せても何も起きません。
そのため重要な処理をすべてJavaScriptに任せる設計は、必ずしも安全とは言えません。

結局、Webサイトは何で動いているのか

Webサイトは1つのプログラムで動いているわけではありません。

• サーバ：データを提供
• ブラウザ：画面を組み立てる
• JavaScript：画面を変化させる

この3つが連携して「動いている」ように見えています。

つまり、Webサイトが動くとは、ページが生きているのではなく、
表示された後も処理が続いている状態のことです。

この視点を持つと、エラーが起きたときに「通信の問題か」「画面の問題か」を切り分けられるようになります。
動きの正体はアニメーションではなく、処理の流れなのです。