JavaScriptでWebサイトに「命」を吹き込もう

WEB制作

前回の記事で、関数を使って簡単なカウンターアプリを作りましたね。今回は、その応用編です。ユーザーの操作（イベント）に反応して、Webページの要素（DOM）を自由自在に動かす方法を学び、Webサイトをさらに進化させましょう。

まるで、あなたの書いたコードがWebサイトの「手足」となって、画面上のあらゆるものを動かせるようになるイメージです。

1. DOMとは？Webページの「地図」

まず、DOMについて理解しましょう。DOM（Document Object Model）とは、ブラウザが読み込んだHTMLを、JavaScriptが操作しやすいように整理した「地図」のようなものです。

JavaScriptは、この地図を使って「このボタン」「あの文字」といったWebページの部品を正確に指定し、色を変えたり、中身を書き換えたりできます。

  • document：Webページ全体を表す、DOMの入口です。
  • getElementById()：idを指定して、特定の要素を見つけ出すための命令です。

2. イベントとDOMの連携：Webサイトを動かす仕組み

Webサイトに動きをつける基本的な流れは、この2ステップです。

  1. イベントリスナーで「きっかけ」を待つ：addEventListenerを使って、ユーザーが起こした特定の出来事（クリック、マウスオーバーなど）を監視します。
  2. イベントが起きたらDOMを操作する：きっかけが起きたら、あらかじめ用意しておいた命令（関数）を実行し、DOMを操作してWebページの内容を変化させます。

この仕組みを理解すれば、Webサイトのあらゆる動きが作れるようになります。

3. 実践！ボタンでテキストを切り替えよう

では、実際にコードを書いてみましょう。今回は、ボタンを押すと表示されるテキストが切り替わるシンプルなWebページを作成します。

以下のコードをコピーしてindex.htmlとして保存し、ブラウザで開いてみてください。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>DOM操作の練習</title>
  <style>
    body { font-family: sans-serif; text-align: center; margin-top: 50px; }
    #message-box { font-size: 24px; min-height: 50px; color: #555; }
    button { padding: 10px 20px; font-size: 16px; cursor: pointer; }
  </style>
</head>
<body>
  <h1>DOM操作を体験しよう</h1>
  <div id="message-box">ここにメッセージが表示されます</div>
  <button id="change-button">メッセージを切り替える</button>

  <script>
    // 1. HTML要素を取得する
    const messageBox = document.getElementById('message-box');
    const changeButton = document.getElementById('change-button');

    // 2. ボタンがクリックされたら実行する関数
    function changeMessage() {
      if (messageBox.textContent === 'ここにメッセージが表示されます') {
        messageBox.textContent = '切り替え成功！DOMを操作しました！';
      } else {
        messageBox.textContent = 'ここにメッセージが表示されます';
      }
    }

    // 3. ボタンにイベントリスナーを追加する
    changeButton.addEventListener('click', changeMessage);
  </script>
</body>
</html>

コードの解説

  1. document.getElementById()を使って、idがmessage-boxの<div>とchange-buttonの<button>を取得しています。
  2. changeMessage()関数は、messageBoxのテキスト内容をチェックし、条件によって異なるテキストに書き換えています。
  3. changeButton.addEventListener('click', changeMessage);で、ボタンがクリックされたらchangeMessage関数が実行されるように設定しています。

このシンプルなコードは、DOMを操作してWebページに動的な変化をもたらす基本中の基本です。

4. まとめ：DOM操作はWeb開発の鍵

イベントとDOMの操作は、Webサイトのあらゆるインタラクティブな機能の土台です。スライドショー、フォーム入力のチェック、動的なコンテンツの表示など、JavaScriptのほとんどの機能はこの二つの連携によって成り立っています。

まずは、今回作ったコードのテキストやボタンの数を変えて、様々なパターンを試してみてください。あなたのアイデアが、Webサイトをより面白くしてくれるはずです。

タイトルとURLをコピーしました