イベント駆動型

🐾 猫で例えると？

腕をダラーンと伸ばし、遠くへ顔を向けるアメショ。「おやつ袋の音がしたら、そちらを向く」と想像してみましょう。この音がイベント（出来事）、それをきっかけに振り向く動作が対応する処理です。イベント駆動型も、クリックや通信の完了などをきっかけに、登録しておいた処理を呼び出します。

💻 アプリ・Web開発における「イベント駆動型」とは？

利用側が短い間隔で状態を問い合わせる代わりに、通知を受け取る方式を選べる場合があります。ただしイベント待ちの内部実装にも監視やポーリングが使われることがあり、イベント駆動だからCPUも通信も全く消費しない、という意味ではありません。

Webアプリの世界では、JavaScriptがこのイベント駆動の代表格です。クリック、マウスの移動、通信の完了など、ブラウザ上で発生するあらゆる出来事を「イベント」として捉え、それに対応するプログラム（イベントハンドラ）を実行します。この仕組みのおかげで、私たちは非常にレスポンスの速いアプリを実現できています。

⚠️ イベント駆動型の仕組みと注意点

効率的な一方で、イベント駆動には複雑さを増しやすいという側面もあります。

// #cat-buttonがあるページを想定
const button = document.getElementById("cat-button");
function onCatClick() {
  console.log("猫のボタンがクリックされました");
}
if (button) button.addEventListener("click", onCatClick);
// この画面の管理を終えるときに呼ぶ後始末
function dispose() {
  if (button) button.removeEventListener("click", onCatClick);
}

document全体にclickを登録すると、猫以外の場所のクリックも届く場合があります。この例は対象ボタンを指定しています。DOMイベントには伝播の仕組みもあるため、どこで発生したかを示すtargetと、登録先のcurrentTargetを区別すると切り分けやすくなります。

🛠️ イベント駆動と賢く付き合うためのポイント

イベント駆動をうまく使いこなすには、その処理の「責任」を明確にすることが大切です。

• 重いハンドラーを避ける： ブラウザーのイベントハンドラー内で長い同期処理を行うと、ほかの入力や描画が遅れます。責務を分けるだけでなく、実行時間と登録・解除のタイミングも確認します。
• ログでイベントを追跡する： 予期せぬタイミングで処理が動いた時、何が原因で動いたのかを追えるよう、イベントの発火履歴をログに残す体制を整えましょう。
• エラー処理を忘れない： 「イベントが起きるはず」という前提で書いていると、万が一失敗した時にシステムが固まります。タイムアウトやエラー発生時の処理を必ず実装しましょう。

おやつ袋の音に反応するアメショのように、イベント駆動では出来事をきっかけに処理を進めます。イベントが続けて届いた場合や順番が変わる場合にも、同じ操作を二重に実行しないか、状態が食い違わないかを確認することが大切です。