⚾

イベントについて野球部に分かりやすく解説してみた

2023/08/05に公開

JavaScript

おはようございます！
今日は昨日学習したイベントについて、野球のノックを例にして解説します。
とりあえずイベントとは何なのか、どう使うのか、というところが分かるように書いていきたいと思います。
イベントハンドラとかイベントリスナーという言葉もあるのですが、それは明日の記事で書きます。

ノックの裏でどんなコードが走っているのか？

野球の練習で１体1でノックを受ける場面を想像してみてください。バッティング練習中にファールゾーンで行われているイメージです。

その時の流れは、
1.コーチが選手を呼ぶ。
2.ノックを受ける
という流れです。

ノックを受ける部分をもう少し詳しく説明すると、
2-1.選手が「おねがいします！」と言う。（叫ぶ）
2-2.コーチがノックを打つ
2-3.選手がボールを取る
という感じですね。

これをコードにするとおそらくこんな感じです。

// 1.コーチが選手を呼ぶ
const ノックを受ける選手 = document.querySelector("#YOOJI");　

// 2.選手が「お願いします！」と叫ぶと、コーチがノックを打つ
ノックを受ける選手.「お願いします！」 = function () {
  コーチがノックを打つ;
};

1行目が選手を呼ぶという処理です。
ノックを受ける選手が指名されるのが、プログラミングでいうquerySelector("特定の選手")です。

そして2行目で特定の選手が「お願いします！」と言ったらノック関数が発火します。
この”.「お願いします！」”という部分をイベントハンドラといい、これを使うことでさまざまな処理が可能になります。

イベントハンドラについては明日詳しく解説しますが、例えば
.keydown　→ 特定のボタンを押した時に発動
.mouseover →　特定の要素の上をマウスが通過した時に発動
.onclick → 特定の要素をクリックした時に発動
などがあります。これらが、上のコードの「お願いします！」の部分に入ります。

なので、例えば

ノックを受ける選手.onclick = function () {
  コーチがノックを打つ;
};

と書くと、ノックを受ける選手をクリックすれば、コーチがノックを打つようになります。（意味は分かりません）

昨日の学習で出てきた実際のコード

それでは、具体的なコードを見てみましょう。

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

function random(number) {
  return Math.floor(Math.random() * (number + 1));
}

btn.onclick = function () {
  const rndCol =
    "rgb(" + random(255) + "," + random(255) + "," + random(255) + ")";
  document.body.style.backgroundColor = rndCol;
};

このコードは、ボタンがクリックされると背景色をランダムに変更するものです。
最初にdocument.querySelector("button")でボタンを選択し、それをbtnという変数に代入しています。これが、先ほどの例でいう特定の選手を指名する部分です。

次に、ランダムな数値を生成する関数randomを定義しています。この関数は、0から指定した数値までのランダムな整数を返します。関数についてはこちらの記事も読んでみてください。

最後に、btn.onclickでイベントハンドラを設定しています。ボタンがクリックされると、この関数が実行されます。関数内で、ランダムなRGB値を生成し、それを背景色として設定しています。

ここで、btn.onclickがイベントハンドラの設定部分です。onclickは、クリックイベントを表すプロパティで、このプロパティに関数を代入することで、ボタンがクリックされたときに実行される処理を定義します。この関数がイベントハンドラです。

このイベントハンドラの中で、random(255)を3回呼び出してRGB値を生成し、それを"rgb(" + random(255) + "," + random(255) + "," + random(255) + ")";という形式の文字列に組み立てています。そして、この文字列をdocument.body.style.backgroundColorに代入することで、背景色を変更しています。

このように、イベントハンドラを使うことで、ユーザーの操作に応じて動的な処理を実装することができます。今回の例では、ボタンがクリックされたときに背景色をランダムに変更するという処理を実装しましたが、他にも様々な処理を実装することが可能です。

例えば、フォームの送信ボタンがクリックされたときに入力値のチェックを行ったり、スクロール位置に応じてナビゲーションメニューの表示を切り替えたり、画像スライダーの次の画像への切り替えボタンがクリックされたときに画像を切り替えたりするなど、ユーザーの操作に応じて様々な処理を実装することができます。

以上が、昨日学習した部分の解説です。なんとなくイベントの基本的な使い方とすごさのイメージが湧いたでしょうか？

まとめ

今回の記事で学んだ要点を3つにまとめます。

1.イベントハンドラは、特定のイベントが発生したときに実行される関数です。
2.querySelectorで特定の要素を選択し、その要素に対してイベントハンドラを設定することができます。
3.イベントハンドラを使うと、ユーザーの操作に応じて動的な処理を実装することができます。

以上が今日の内容です。
もし記事が役立ったと思ったら、ぜひいいねやフォローをお願いします。
これからも、プログラミング初心者の皆さんが理解しやすいような記事を書いていきます！

それでは今日も学習をスタートします！

ノックの裏でどんなコードが走っているのか？

昨日の学習で出てきた実際のコード

まとめ

Discussion