「イベントハンドラって何ですか？」

と聞かれると、なんだか難しいカタカナでイヤになりますよね。
でも実はこれ、ゲームセンターに行ったことがあれば、もう体験済みです。

今日は、ワニたたきゲーム で考えてみましょう。

① コインを入れる

あなたは100円玉を入れました。

チャリン。

すると…

画面がピカッと光る
「READY GO!」と表示される
ワニがニョキニョキ出てくる

ゲームがスタートしました。
ここで考えてみてください。

何が「きっかけ」で画面が光ったり、READY GO!と表示されたのでしょうか？

そう。

👉 100円を入れたこと

ですよね。

これがプログラミングでいう

✅ イベント

です。

② じゃあ勝手にゲームが始まったのはなぜ？

100円を入れただけなのに、

画面が光って
音が鳴って
ワニがランダムに出てきた

勝手にいろいろ動きますよね。

実は裏では、

👉 「100円が入ったらゲームを開始するプログラム」

が動いています。

これが

✅ イベントハンドラ

です。

つまり、

できごと	役割
コインを入れる	イベント
ゲームを開始する処理	イベントハンドラ

③ ワニを叩いた！

ワニが出てきました。

…ここでは細かいことは気にしません。

「ゲームが勝手に出してくれてるんだな〜」くらいでOKです 👍
大事なのはここから。

ワニが出てきた瞬間、あなたはハンマーで…

バシッ！！

叩きました。

この

👉 「叩いた！」というあなたの操作

これが

✅ イベント

です。

すると何が起きた？

叩いた瞬間…

点数が増える
ピコーン！と音が鳴る
ワニが引っ込む

いろいろ動きますよね。

これは偶然ではありません。

実は裏で、

👉 「叩かれたら点数を増やすプログラム」

が動いています。

これが

✅ イベントハンドラ

です。整理すると、

あなたの行動	名前
ワニを叩く	イベント
点数アップ・音・演出	イベントハンドラ

つまり、

「叩いたら → 点数アップ！」

このセットが
イベント＋イベントハンドラなんです。

もしワニたたきをプログラムで書くとしたら？

ここまで読んでくれた人は、気づいているかもしれません。

実は今紹介したワニたたきゲーム。
やっていることは、プログラミングと同じ仕組みなんです。

たとえば、JavaScriptというプログラムで書くと、次のようなコードになります。

button.addEventListener("click", function() {
  start();
});

crocodile.addEventListener("click", function() {
  score++;
});

まず上のコード。

button.addEventListener("click", function() {
  start();
});

これは、「ボタンがクリックされたら、ゲームをスタートする」という意味。
ゲームセンターで言えば、 100円を入れたらゲームスタートと同じですよね。

現実の「コイン投入」を、
プログラムでは「ボタンクリック」で表現しているだけなんです。

次はこちら。

crocodile.addEventListener("click", function() {
  score++;
});

これは、「ワニがクリックされたら、スコアを1点増やす」という意味。
つまり、ワニを叩いたら点数アップ！

そのまんまですね。

まとめると…

100円を入れる → ゲーム開始
ワニを叩く → 点数アップ

これをプログラムの言葉にすると、

ボタンをクリック → start()
ワニをクリック → score++

になるだけ。

やっていることは、
ワニたたきもJavaScriptもまったく同じ。

つまり…

「もし◯◯したら、△△する」

このルールのくり返し。

これこそが
👉 イベント＋イベントハンドラ
の正体なんです。

「え、いまのプログラムの説明を聞いてもさっぱり分からない！」って人へ

大丈夫です。めちゃくちゃ普通です 😄

たとえば、さっきのこれ。

button.addEventListener("click", function() {
  start();
});

「addEventListener…？なにそれ…」
「functionってなに…？」
「いろんな種類のカッコがあって、違いがあるの…？」
「プログラミングってどういうルールがあるの？」

って思ったかもしれません。
むしろ 最初はそこが普通 です。

Crebitプログラミング教室では、「覚えてください」よりも

✅ どうしてそう書くのか
✅ なぜこの順番になるのか
✅ どうしてこう動くのか

みたいな「基本的な部分」を、ゆっくり丁寧に説明していきます。

それでも、

「プログラミング、初めてだから不安…」
「私でもできるのかな…？」

そんなふうに思った人もいるかと思います。
大丈夫。

Crebitでは、分からないところを一緒に整理しながら進めていきます。
自分のペースで、少しずつできることを増やしていきましょう。