Webの仕組みを理解しようとしていたときに、自分が勘違いしていたポイントを整理します。
❌ 勘違いしていたこと
クライアントで何か操作したときに、
サーバー側のJavaScriptがDOMを操作して画面を変える
と思っていました。
でもこれは間違いです。
✅ 正しい理解
実際はこうなっています👇
① HTMLが送られる
サーバーから index.html が送られてくる
② ブラウザがDOMを作る
HTMLを解析してDOMツリーを生成
③ JavaScriptも読み込まれる
HTMLの中にある <script> タグによってJSが読み込まれる
<script src="main.js"></script>
ブラウザはこのJSファイルを追加でサーバーから取得する
④ JavaScriptがブラウザで実行される
ここが重要👇
👉 JavaScriptは「サーバーで動く」のではなく
👉 ブラウザ上で実行される
⑤ DOMを操作するのはブラウザのJS
document.getElementById("text").textContent = "変更された！";
このコードは
👉 ブラウザ内で実行されて
👉 DOMを書き換えて
👉 画面が変わる
🔥 まとめ（超重要）
- HTML → DOMを作る（ブラウザ）
- JS → ブラウザで実行される
- DOM操作 → ブラウザのJSがやる
- サーバー → データを返す役
💡 一言でいうと
👉 JavaScriptは「サーバーのもの」じゃなくて
👉 「ブラウザに配られて動くプログラム」
📝 おまけ（Reactの場合）
Reactでは
<div id="root"></div>
<script src="bundle.js"></script>
👉 ほぼ全部JSで画面を作る
👉 だから「JSが主役」になる
🎯 気づき
「サーバーが画面を変えてる」と思ってたけど、
👉 実際は「ブラウザが自分で画面を変えてる」
この理解がかなり重要だった。
これからWebを学ぶ人はここでつまずきやすいので、メモとして残しておく。