- 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も一緒に参加して完成しているシステムなのです。