JavaScriptはどこで動く?サーバじゃない理由

JavaScriptはサーバで動いていない

結論から言うと、普段Webサイトで使われているJavaScriptはサーバでは動いていません。
ユーザーのパソコンやスマートフォンの中のブラウザで実行されています。

この点を誤解したまま学習を進めると、通信や不具合の原因を取り違えます。
「サーバが遅いのにボタンが反応しない」「通信していないのに画面が固まる」などが理解できなくなります。

まず整理します。

  • サーバ:データを返す場所
  • ブラウザ:画面を動かす場所

JavaScriptは後者です。

ブラウザに入っている“実行装置”

ブラウザは単なる閲覧ソフトではありません。
内部にJavaScriptを実行するためのプログラムが入っています。これをJavaScriptエンジンと呼びます。

ブラウザがHTMLを読み込むと、そこに含まれるJavaScriptも一緒に渡されます。
ただし、サーバは実行しません。
サーバは「コードを送るだけ」です。

流れは次の通りです。

1. ブラウザがページを要求する
2. サーバがHTMLとJavaScriptを返す
3. ブラウザが受け取り実行する

つまり、サーバはプログラムを動かしているのではなく、配布しているだけです。

実際の例:ボタンのクリック

次のコードを考えます。

document.getElementById('count').textContent = Number(
  document.getElementById('count').textContent
) + 1;

このカウンターは、何度押してもサーバへ通信しなくても動きます。
理由は、処理がすべてブラウザ内で完結しているからです。

もしJavaScriptがサーバで実行されているなら、クリックのたびに通信が必要になります。
しかし実際には、オフラインでも動くページがあります。

これはJavaScriptがローカルで実行されている証拠です。

サーバが担当する処理

ではサーバは何をしているのでしょうか。

  • ログイン認証
  • データ保存
  • 計算処理
  • APIの提供

サーバは「共有が必要な処理」を担当します。
データベースやユーザー情報は、ブラウザ内だけでは扱えません。

つまり役割分担はこうなります。

  • JavaScript(ブラウザ):表示と操作
  • サーバ:データと記録

この境界を理解すると、Webアプリの構造が見えてきます。

よくある誤解:通信がある=サーバ処理

検索候補が表示されると「サーバが動かしている」と思われがちです。
実際には、両方が関与しています。

JavaScriptが入力を監視し、必要なときだけサーバへ問い合わせています。

fetch('/api/search?q=abc')

ここで初めてサーバが登場します。
通信していない時間は、すべてブラウザ側の処理です。

実際に起きるトラブル

「サーバは正常なのに画面が動かない」という現象があります。
原因はJavaScriptエラーです。

例えば、次のようなコードです。

document.getElementById('menu').style.display = 'block';

もしmenuという要素が存在しなければ、JavaScriptはエラーで停止します。
この時点で、その後の処理はすべて実行されません。

サーバは正常でも、ユーザーの画面ではボタンが無反応になります。

逆に、サーバが落ちていても、既に読み込まれた画面の操作は動くことがあります。
これが「フロントエンド」と「バックエンド」の違いです。

注意点:セキュリティの意味

JavaScriptがブラウザで動くということは、ユーザーがコードを読めるということです。

ブラウザの開発者ツールを開くと、送られてきたJavaScriptはすべて確認できます。
したがって、重要な処理をJavaScriptだけに任せるのは危険です。

例えば

  • 料金計算
  • 権限チェック
  • 認証判定

これらをブラウザ側だけで行うと、改ざんされる可能性があります。
安全性が必要な処理は必ずサーバで行う必要があります。

なぜこの仕組みなのか

もしすべてをサーバで処理すると、クリックのたびに通信が発生します。
ページのたびに読み込み直しが必要になり、操作感は極端に悪くなります。

ブラウザでJavaScriptを動かす理由は単純です。
操作の反応を速くするためです。

画面の変更、入力チェック、アニメーション。
これらはユーザーの端末で処理した方が圧倒的に速くなります。

結局どこで動いているのか

Webサイトは1つのコンピュータで動いているわけではありません。

  • サーバ:インターネット上のコンピュータ
  • ブラウザ:ユーザーのコンピュータ

JavaScriptは後者です。
画面の近くで動いているからこそ、即座に反応します。

Webの理解が進まない最大の理由は、「全部インターネットで処理されている」と考えてしまうことです。
実際には、半分以上の処理は手元の端末で行われています。

つまり、Webサイトは遠くの機械だけで動いているのではなく、
ユーザーのPCも一緒に参加して完成しているシステムなのです。