JavaScript（ブラウザの動的処理）

なぜ JavaScript が要るのか

HTML と CSS だけでも、文章・画像・リンクの「見えるページ」は作れます。でもそれは最初に表示された姿のままで、ユーザーの操作で中身を変えることはできません。

• ボタンを押したら数字が増える / メニューが開く
• 入力フォームを送信前にチェックする（バリデーション）
• ページを再読み込みせずに新しいデータを取ってきて差し替える

こうした 「読み込んだ後に、その場でページを変化させる」 ためにブラウザが用意している言語が JavaScript です。サーバを介さずブラウザ側（クライアントサイド）で動くので、反応が速いのが特徴です。

言語としての基本（変数・関数）

文法は他の言語と同じ発想です。値に名前を付ける変数と、処理をまとめる関数が土台になります。

// 変数: const（再代入しない）/ let（する）。var は古いので原則使わない
const name = "Tech";
let count = 0;
count = count + 1;

// 関数: 入力を受け取り、処理して、結果を返す
function double(n) {
  return n * 2;
}

// アロー関数（短い書き方）。コールバックで多用する
const triple = (n) => n * 3;

console.log(double(10)); // 20 （ブラウザの開発者ツールに出る）

const / let / var は宣言の仕方が3種類ありますが、現在は使い分けがはっきりしています。

DOM 操作（ページを書き換える）

ブラウザは読み込んだ HTML を、DOM（Document Object Model） という木構造のオブジェクトに変換して持っています。JavaScript はこの DOM をたどって、要素を取得 → 中身や属性を書き換える ことで画面を更新します。詳しくは DOM の解説へ。

<button id="btn">押して</button>
<p id="out">0</p>

// 要素を取得する
const btn = document.getElementById("btn");
const out = document.querySelector("#out"); // CSSセレクタでも取れる

// テキストを書き換える
out.textContent = "こんにちは";

「ボタンを押したら段落の中身が変わる」を実現するには、イベントと組み合わせます。

イベント（操作に反応する）

ユーザーの操作（クリック・入力・スクロール…）はブラウザがイベントとして通知します。JavaScript は「このイベントが起きたら、この関数を実行して」とイベントリスナーを登録しておき、操作されたら呼ばれます。これを イベント駆動 と呼びます。

const btn = document.getElementById("btn");
const out = document.getElementById("out");
let count = 0;

// click イベントを待ち受け、起きたらコールバックが走る
btn.addEventListener("click", () => {
  count = count + 1;
  out.textContent = count; // DOM を書き換えて画面更新
});

非同期処理（通信と“待ち”）

JavaScript は 1つのスレッドで動く（一度に1つの処理しか実行しない）言語です。にもかかわらずブラウザが固まらないのは、イベントループという仕組みで「時間のかかる処理」を脇に逃がし、終わったら結果を受け取るからです。これが非同期処理で、考え方は同期処理と非同期処理で詳しく解説しています。

代表例がサーバとの通信です。fetch でデータを取りに行き、返ってくるのを待たずに先へ進み、届いたら処理します。

// async/await: 非同期を“同期っぽく”読み書きできる
async function loadUser() {
  const res = await fetch("/api/user");   // 返事が来るまで“この関数の中だけ”待つ
  if (!res.ok) throw new Error("失敗");    // HTTPステータスを確認
  const user = await res.json();          // ボディをJSONとして読む
  document.getElementById("name").textContent = user.name;
}

loadUser();

このように画面を再読み込みせずデータだけ差し替える手法を Ajax と呼びます。やり取りの土台は HTTP で、相手が別ドメインのときは CORS の制約がかかります。

ES モジュール（ファイル分割）

コードが増えると1ファイルでは破綻します。ES Modules（ESM） を使うと、ファイルごとに機能を分け、export で公開し import で取り込めます。名前の衝突を防ぎ、必要なものだけ読み込めます。

// math.js ── 機能を公開する
export function add(a, b) {
  return a + b;
}

// main.js ── 必要なものだけ取り込む
import { add } from "./math.js";
console.log(add(1, 2)); // 3

<!-- ブラウザで ESM を使うには type="module" を付ける -->
<script type="module" src="main.js"></script>

どこで動く？（実行される場所の違い）

「JavaScript」と一口に言っても、動く場所で前提が変わります。混同しやすいので整理しておきます。

同じ言語でも、ブラウザには document や window があり、Node.js には無い、という違いです。本記事が扱うのは前者の ブラウザの中の JavaScript です。

まとめ

JavaScript は 「イベントを受け取り → DOM を書き換え → 必要ならサーバと通信」 を繰り返して、ページを動的にする言語です。

• HTML / CSS / JS は役割分担。JS は「動き・反応」担当
• DOM を介してページを書き換え、イベントで操作に反応する
• 1スレッド + 非同期（Promise / async-await） で“待ち”をさばく
• innerHTML への生データ埋め込み（XSS）に注意

次は土台となる DOM や、ブラウザが HTML/CSS/JS をどう画面にするかを追う ブラウザのレンダリング もあわせてどうぞ。