⚾

関数とイベントハンドラの関係性について野球部に説明してみる

2023/08/06に公開

JavaScript

おはようございます！
昨日に引き続いてイベントについての記事です！

今日は「関数」と「イベントハンドラ」について、野球部の練習を例にして解説します。

結論から言うと、
関数とは、プログラムの流れに沿って実行される処理のこと。
イベントハンドラは、特定のイベントが発生したときに実行される関数の一種です。

この二つの関係性を理解することで、プログラミングの基本的な動作の理解が進むことを目指します。
興味を持っていただけたら、ぜひ最後までお読みください！

野球的に考えると、、？

関数とは、プログラムの流れに沿って実行される処理のこと。
イベントハンドラは、特定のイベントが発生したときに実行される関数の一種です。

について、野球的な解釈をしていきたいと思います！
今日は野球部の練習の風景を思い浮かべてください！

まず、通常の関数の処理ですが、「プログラムの流れに沿って実行される」とあります。これは野球部の練習メニューの予定のようなものだと考えることができます。
例えば、「ウォーミングアップ→キャッチボール→ノック→昼食→バッティング」という練習メニューの流れがあったとします。
これをコードにするとこんな感じです。

// 練習メニューを定義
function menu() {
　　　　ウォーミングアップ
　　　　キャッチボール
　　　　ノック
　　　　昼食
　　　　バッティング
};

// 練習メニューを実行
menu();

このように、もともと予定していた練習メニューをその通りこなしていくことが、「プログラムの流れに沿って実行される」という通常の関数の処理です。

では、イベントハンドラの「特定のイベントが発生したときに実行される関数の一種」とはどういうことでしょうか？
練習メニューの喩えでいうと、「急にノック好きのOBが来て、そこからノックが3時間続いた」というような状況のことを指します。
昼食を食べて、「よし！午後からは楽しいバッティングだ！」と思っていたら、ネガティブなあだ名のついている有名なOBが突然やってきて、午後からもノックが始まり、しかも終わらない。みたいな体験は皆さん1度や2度ではないはずです。

脱線しましたが、コードにするとこんな感じです。

// 練習をしている野球場の要素を取得
const ground = いま練習をしている野球場

//　OBが来たら実行するというイベントハンドラを設定
ground.OB = function () {
  ノックが3時間続く、、
}

通常の関数が処理中であっても、イベントハンドラが実行されればそのタイミングでイベントハンドラの処理が実行されます。
つまり、バッティングの準備をしているときに突然OBが現れて、練習メニューがノックに変更されてしまうというのは、イベントハンドラのOBが実行されたからだったのです。

このようにコードの流れによって実行されるのではなく、コードの外部からの操作によって実行される関数が「イベントハンドラ」と名付けられています。

実際のコードを見てみる

3.実際のコード解説パート
野球の喩えパートで見たように、通常の関数とイベントハンドラの違いを理解するために、具体的なコードを見てみましょう。

通常の関数

まず、通常の関数の例です。この関数は、背景色を赤に変更し、その後青、緑、黄色、黒に変更するという処理を行います。これは、野球部の練習メニューの予定のようなもので、予め決められた流れに沿って処理が進みます。

function btnColorChange() {
  document.body.style.backgroundColor = 'red'; // 背景色を赤にする
  document.body.style.backgroundColor = 'blue'; // 背景色を青にする
  document.body.style.backgroundColor = 'green'; // 背景色を緑にする
  document.body.style.backgroundColor = 'yellow'; // 背景色を黄色にする
  document.body.style.backgroundColor = 'black'; // 背景色を黒にする
}

btnColorChange(); // 関数を呼び出す

このコードは、プログラムが読み込まれた時に、背景色を順番に変更する処理を実行します。このように、通常の関数はプログラムの流れに沿って実行される処理です。

イベントハンドラ関数

次に、イベントハンドラの例です。この関数は、ユーザーがボタンをクリックしたときに背景色をランダムに変更するという処理を行います。

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

btn.onclick = function () {
  const rndCol = `#${(Math.random() * 0x1000000 | 0).toString(16).padStart(6, '0')}`;
  document.body.style.backgroundColor = rndCol;
};

このコードは、ユーザーがボタンをクリックすると、背景色をランダムに変更するという処理を実行します。このように、イベントハンドラは特定のイベントが発生したときに実行される関数の一種です。急にOBが来てしまったというのもこのイベントハンドラに当たるでしょう。

まとめ

今回の記事では、プログラミングの概念と野球の練習を組み合わせて、通常の関数とイベントハンドラの違いを解説しました。ここで、要点を2つのポイントでおさらいしましょう。

1.通常の関数はプログラムの流れに沿って実行される処理で、予め決められた流れに沿って処理が進むもの。
2.イベントハンドラは、特定のイベントが発生したときに実行される関数の一種で、ユーザーの操作など外部からの操作によって発火する。

最後に、このブログが皆さんの学習に役立ったことを願っています。
もし役立つと感じたら、ぜひ「いいね」や「フォロー」をお願いします！

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

野球的に考えると、、？

実際のコードを見てみる

通常の関数

イベントハンドラ関数

まとめ

Discussion