JavaScriptは何をしているのかを3分で理解

JavaScript ブラウザ フロントエンド Webの仕組み 初心者向け

まずイメージをつかむ：JavaScriptの役割

Webページが「動く」理由は、ほとんどの場合JavaScriptです。
HTMLは文章の構造、CSSは見た目の装飾、そしてJavaScriptは反応を担当します。

リンクを押したらメニューが開く。
入力したらエラーが出る。
ボタンを押したら画面が切り替わる。

この「何かしたら、何かが起きる」という部分がJavaScriptです。

逆に言うと、JavaScriptがなければWebページは基本的に「読むだけ」のものになります。
ニュースサイトの紙面を画面に貼り付けたような状態です。スクロールはできますが、ページはユーザーの操作に合わせて変化しません。

つまりJavaScriptとは、「ページに振る舞いを与えるプログラム」です。

JavaScriptが担当する「反応」

例えば、ボタンを押したときにメッセージを出したいとします。

document.querySelector('#btn').addEventListener('click', function(){
  alert('押されました');
});

これがJavaScriptの典型的な仕事です。

このコードがやっていることは単純です。

  • 画面のボタンを探す
  • ユーザーの操作を待つ
  • 操作が起きたら処理を実行する

ここで重要なのは、JavaScriptは「ずっと動き続けている」わけではない点です。
待っているのです。

ユーザーがクリックする、キー入力する、スクロールする。
そういった出来事（イベント）が起きた瞬間にだけ実行されます。

この仕組みのおかげで、ブラウザは軽く動きます。もし常に計算し続けていたら、ページを開いただけでPCが重くなってしまいます。

なぜHTMLとCSSだけでは動かないのか

HTMLとCSSは「状態」を表現する言語です。

HTML

  • 見出しがある
  • 段落がある
  • ボタンがある

CSS

  • 赤色にする
  • 大きくする
  • 横並びにする

ここには「時間」の概念がありません。
押したら変わる、入力したらチェックする、といった処理は書けないのです。

たとえばログインフォームを考えてみてください。
パスワードが短すぎたときにエラーを出す処理は、見た目の問題ではありません。
これは条件分岐です。つまりプログラムです。

JavaScriptはこの「条件で判断する」役割を持っています。

ブラウザの中で起きている処理

Webページを開いた瞬間、実はかなり多くの処理が行われています。

1. サーバにHTMLを取りに行く
2. HTMLを解析する（DOMを作る）
3. CSSを解析する
4. 画面を描画する
5. JavaScriptを実行する

ここで初めてJavaScriptが登場します。

つまりJavaScriptは、インターネット上で実行されているのではありません。
あなたのパソコンの中のブラウザで実行されています。

サーバはデータを渡しているだけです。
動いているのは、ブラウザに内蔵された「JavaScriptエンジン」というプログラムです。

このため、ネットワークが遅くなくてもページが重いことがあります。
原因はサーバではなく、ブラウザ側のJavaScript処理です。

実際にやるとこうなる：よくある失敗

初心者がよくやるミスがあります。
ページの上部にスクリプトを書いてしまうことです。

<head>
<script src="app.js"></script>
</head>

これをすると、HTMLの読み込みが止まります。
ブラウザは「JavaScriptが終わるまで描画してはいけない」と判断するからです。

結果として、ページが真っ白のまま数秒止まることがあります。
体感では「サイトが遅い」と感じます。

この問題は次の書き方で防げます。

<script src="app.js" defer></script>

deferは「HTMLの解析が終わってから実行していい」という意味です。
これだけで体感速度が大きく変わります。

JavaScriptの注意点とリスク

便利なJavaScriptですが、注意点もあります。

  • 処理が多すぎるとページが固まる
  • ブラウザごとの差が出る
  • セキュリティ問題が起きる可能性がある

特に重い処理は危険です。
例えば大量の計算や、何千個もの要素の書き換えを繰り返すと、ブラウザは操作を受け付けなくなります。

これはサーバが遅いわけではありません。
ユーザーのPCのCPUを使い切ってしまっている状態です。

つまりJavaScriptは「便利」ですが、「使いすぎると逆効果」になる道具です。

JavaScriptをどう捉えればいいか

JavaScriptは「Web専用のプログラミング言語」と考えると理解が難しくなります。
むしろ、こう考えると分かりやすいです。

ブラウザに命令を出すための言葉

画面を書き換えろ。
このボタンを監視しろ。
入力を検査しろ。

JavaScriptは、インターネットの技術というより「画面操作の自動化」に近いものです。

HTMLはページの骨格、CSSは服、JavaScriptは神経です。
見た目ではなく、反応を作っているのがJavaScriptなのです。

Webページが「動く」と感じた瞬間、そこには必ず何らかのJavaScriptが関わっています。
逆に言えば、JavaScriptの理解は、Webを「閲覧する側」から「仕組みを知る側」へ踏み込む最初の一歩になります。