HTMLとCSSで、Webページの見た目をつくることができます。しかし、これだけでは基本的に静止画です。今回は、ページに動き・対話性を与える JavaScript を扱います。ボタンを押すと反応する、入力をその場でチェックする、データを取り直して一部だけ更新する——こうした「生きた」振る舞いはすべて JavaScript の仕事です。

1. JavaScript にできること

  • ユーザの操作（クリック・入力・スクロール）に反応する
  • ページの中身（DOM）を書き換える
  • サーバと通信して新しいデータを取ってくる
  • アニメーションやゲームを動かす

要するに、HTML/CSS が用意した舞台の上で、俳優を動かす脚本が JavaScript です。

2. DOM を書き換える

第 2 回で、HTML はブラウザ内部で DOM という木になると説明しました。JavaScript はこの木にアクセスし、要素を取り出したり、書き換えたりできます。

// id="msg" の要素を取り出して、中身を書き換える
const el = document.getElementById("msg");
el.textContent = "こんにちは、世界！";

これだけで、ページを再読み込みせずに文字が変わります。DOM を触れば画面が変わる——これが JavaScript の一番の基本です。

JavaScript が DOM を書き換え、それが画面の再描画に反映される流れ

3. イベント — 「○○されたら△△する」

JavaScript の動きの多くは、イベント駆動という考え方でできています。「クリックされたら」「文字が入力されたら」といった出来事（イベント）を待ち受け、起きた瞬間に用意した処理を走らせます。

const button = document.querySelector("button");

// ボタンがクリックされたら、関数を実行する
button.addEventListener("click", () => {
  alert("ボタンが押されました！");
});

ユーザ操作（クリック）→ イベント発生 → 関数の実行、というイベント処理の流れ

「操作 → イベント → 処理」という一連の流れが、ページのあらゆる対話性の心臓部です。

4. サーバと通信する（非同期・Ajax）

昔の Web は、少しでも内容を変えるにはページ全体を読み込み直していました。いまは JavaScript が裏でこっそりサーバと通信し、必要な部分だけ差し替えられます。これにより、SNS のタイムライン更新や検索候補の表示など、なめらかな体験が実現します。

// サーバからデータを取ってきて、画面に反映する
const res = await fetch("/api/news");
const data = await res.json();
document.getElementById("list").textContent = data.title;

この「待っているあいだ他の処理を止めない」仕組みを 非同期処理 と呼びます。通信の返事を待つあいだもページはフリーズせず、スクロールもクリックもできます。

ブラウザがサーバへデータを要求し、返ってきた部分だけ画面を更新する非同期通信の流れ

5. ライブラリとフレームワーク

素の JavaScript（バニラ JS）でも何でも書けますが、大規模なアプリではReact・Vue・Svelte といったフレームワークを使うのが一般的です。これらは「データが変わったら画面を自動で更新する」仕組みを提供し、DOM を手作業でいじる手間を大きく減らしてくれます。

  • React: 世界的に最もシェアが大きい。
  • Vue / Svelte: 学習しやすさや軽さで人気。

ただし土台は同じ HTML・CSS・JavaScript です。まずは素の 3 つを理解することが、どんなフレームワークを学ぶ場合でも近道になります。

Webの動作まとめ

Web ページが表示される仕組みを見てきました。

HTML は骨格、CSS は見た目、JavaScript は動きという三層の役割分担

  • HTML が意味と構造を定め、DOM の木になる。
  • CSS が箱（ボックスモデル）を飾り、配置する。
  • JavaScript が DOM を書き換え、イベントに反応し、サーバと通信して動きを与える。
  • ブラウザはこれらを解析し、レイアウト → ペイントで画面に描く。

基本的なWebの振る舞いは、この 3 層の分業で動いています。HTML、CSS、JavaScriptの3つの技術はフロントエンドという分野に区分され、実際にはログイン処理などはバックエンドという別の分野の処理内容となります。

Webでゲームなどが実装されている場合は、そのゲームの仕組み等はバックエンドで処理されています。バックエンドとは、サーバー内部で処理される領域のことをいい、フロントエンドはそれに対して、ユーザー側で処理される領域のことをいいます。HTML、CSS、JavaScriptはフロントエンドに分類され、情報がサーバーから送られるとソースコードの実行自体はクライアントであるあなたのPCでおこなわれます。