Webサイトの「観察者」を雇おう！

WEB制作

前回の記事では、button.addEventListener('click', ...)というコードを使って、ボタンがクリックされたことを検知しましたね。このaddEventListenerこそ、JavaScriptがWebサイトの動きを観察するための、とても重要な命令です。

まるでWebサイトに「観察者」を雇うように、特定の出来事（イベント）が起こるのをじっと待ち、それが起こったら決まった行動をさせる。これがイベントリスナーの役割です。

今回は、このイベントリスナーを使って、Webサイトにさらに面白い動きをつけてみましょう。

イベントリスナーの基本形をおさらい

イベントリスナーの基本は、たったの3つの要素でできています。

  1. 誰を観察する？ 🔭
    • buttonやinputなど、イベントを監視するHTMLの要素を指定します。
  2. 何を監視する？ 👂
    • 'click'や'mouseover'など、監視したい「イベント名」を指定します。
  3. 何をする？ ✍️
    • イベントが起きたときに実行する「関数」を指定します。

JavaScript

要素.addEventListener('イベント名', 実行する関数);

実際のコードで試してみよう！

今回は、**「マウスを乗せたら画像が大きくなる」**という動きを作ってみます。これには、'mouseover'（マウスが要素の上に乗った）と'mouseout'（マウスが要素から外れた）という2つのイベントを使います。

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

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>イベントリスナーを学ぶ</title>
  <style>
    img {
      width: 200px; /* 通常の画像の大きさ */
      transition: transform 0.3s; /* 変化を滑らかにする */
    }
  </style>
</head>
<body>

  <h1>画像をマウスで操作しよう</h1>

  <img id="myImage" src="https://via.placeholder.com/200" alt="サンプル画像">

  <script>
    // 1. 画像の要素を取得
    const image = document.getElementById('myImage');

    // 2. マウスが乗ったら大きくなるイベントリスナー
    image.addEventListener('mouseover', function() {
      image.style.transform = 'scale(1.2)';
    });

    // 3. マウスが外れたら元に戻るイベントリスナー
    image.addEventListener('mouseout', function() {
      image.style.transform = 'scale(1)';
    });
  </script>

</body>
</html>

コードの解説

  1. const image = document.getElementById('myImage');
    • id="myImage"を持つ<img>タグを取得し、imageという変数に入れています。
  2. image.addEventListener('mouseover', ...)
    • image要素に、'mouseover'というイベントを監視するよう命令しています。
    • image.style.transform = 'scale(1.2)';は、画像の大きさを1.2倍にするCSSの命令です。
  3. image.addEventListener('mouseout', ...)
    • マウスが外れたときに、元の大きさ（scale(1)）に戻す命令です。

CSSのtransitionプロパティは、この大きさの変化を0.3秒かけてゆっくりと行うためのものです。これがあることで、動きがより滑らかに見えます。

まとめ：様々なイベントを試してみよう

今回紹介した'click', 'mouseover', 'mouseout'以外にも、JavaScriptにはたくさんのイベントが用意されています。

  • 'keydown'：キーボードが押されたとき
  • 'submit'：フォームが送信されたとき
  • 'scroll'：画面がスクロールされたとき

これらのイベントを使いこなせば、ユーザーの行動に合わせた、よりリッチなWebサイトを作ることができます。

まずは、今回作ったコードを少しずつ変えて、他のイベントも試してみてください。Webサイトは、あなたのアイデア次第でどんな動きも実現できる、とても自由な遊び場です。

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