DOM とイベントの最小形を読む

HTML で構造を作り、CSS で見た目を整えました。3つ目の層である JavaScript を追加すると、「ボタンを押したら表示が変わる」といった動きが作れます。

VS Code で HTML ファイルを作り、ブラウザで開いて確認しながら進めます。

JavaScript の役割

層	言語	やること
骨組み	HTML	構造を決める
見た目	CSS	装飾を加える
動き	JavaScript	ユーザーの操作に反応する

JavaScript は略して JS と書かれることが多いです。Java と名前が似ていますが、まったく別の言語です。

ボタンを押すとアラートが出る

最小の例から始めます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>JavaScript テスト</title>
</head>
<body>
  <button onclick="alert('押された！')">クリック</button>
</body>
</html>

ブラウザで開いてボタンを押すと、ダイアログに「押された！」と表示されます。onclick="..." の中に JavaScript のコードを書くと、クリック時に実行されます。

ただし、HTML の中に JavaScript を直接書くとコードが混ざって読みづらくなります。このあと、HTML と JavaScript を分ける書き方を見ます。

script タグで JavaScript を書く

<script> タグを </body> の直前に置くのが基本です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>DOM テスト</title>
</head>
<body>
  <h1 id="title">ここが変わる</h1>
  <button id="btn">変更する</button>

  <script>
    const title = document.getElementById('title');
    const btn = document.getElementById('btn');

    btn.addEventListener('click', function() {
      title.textContent = '変更されました！';
    });
  </script>
</body>
</html>

ボタンを押すと、見出しの文字が「ここが変わる」から「変更されました！」に変わります。

DOM とは

DOM（Document Object Model）は、ブラウザが HTML を読み込んだあとにメモリ上に作る「ページの構造データ」です。JavaScript は DOM を通じて HTML の要素を取得したり変更したりします。

flowchart TD
    A["HTML ファイル"] -->|"ブラウザが読み込む"| B["DOM（メモリ上の構造）"]
    B -->|"JavaScript で操作"| C["画面の表示が変わる"]

document.getElementById('title') は「DOM の中から id=“title” の要素を見つけて返す」という意味です。

要素の取得と変更

さきほどのコードで使った操作を整理します。

コード	意味
`document.getElementById('title')`	id が `title` の要素を取得する
`title.textContent`	その要素のテキスト内容
`title.textContent = '...'`	テキストを書き換える

Java の s.name（オブジェクトのフィールドにアクセスする）と構造が似ています。title が DOM の要素オブジェクトで、.textContent がそのプロパティ（フィールド）にあたります。

イベントリスナー

addEventListener は「この要素で○○が起きたら、この処理を実行する」という設定です。

btn.addEventListener('click', function() {
  // クリックされたときの処理
});

部分	意味
`btn`	対象の要素
`'click'`	イベントの種類（クリック）
`function() { ... }`	実行する処理

イベントの種類はほかにも 'input'（入力が変わった）、'submit'（フォーム送信）などがあります。次回のフォームの回で 'submit' を使います。

もう1つの例: カウンター

ここまでの知識でカウンターを作れます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>カウンター</title>
</head>
<body>
  <p>カウント: <span id="count">0</span></p>
  <button id="add-btn">+1</button>

  <script>
    let counter = 0;
    const countEl = document.getElementById('count');
    const addBtn = document.getElementById('add-btn');

    addBtn.addEventListener('click', function() {
      counter = counter + 1;
      countEl.textContent = counter;
    });
  </script>
</body>
</html>

ボタンを押すたびに数字が1ずつ増えます。「変数に 1 を足す」のは Java で学んだパターンと同じです。countEl.textContent = counter で押すたびに画面の数字を書き換えているのが、JavaScript ならではの部分です。

次の回へ

次は、フォーム（入力欄やセレクトボックス）のデータを JavaScript で受け取る方法を見ます。