TypeScriptのイベントデリゲーションとは？ToDoアプリで学ぶド素人実践日記

これまで肉体労働を中心に働いてきたが、キャリアチェンジを決意し、未経験からIT企業への転職が決まった。
入社前に求められるスキルの一つが TypeScript。これまで実務で触れたことがなかった自分にとって、JavaScriptとの違いや考え方は想像以上に難しく感じた。

特に悩んだのが「イベントデリゲーション」という考え方だ。
ボタンにイベントを付けたはずなのに、配列を更新したらクリックできなくなる。
どのボタンが押されたのかも分からない。

この記事では、TypeScriptのイベントデリゲーションについて、ToDoリストアプリを自作しながら学んだ内容を整理する。
なぜイベントが消えるのか、どうすれば解決できるのかを、初心者視点で丁寧にまとめていく。

TypeScriptのイベントデリゲーションとは何か

イベントデリゲーションとは、子要素ではなく親要素にイベントを設定する仕組みのことだ。
クリックイベントなどは、実際には「イベントの伝播」によって親要素まで伝わってくる。

この仕組みを利用することで、

といったメリットがある。

今回作成したToDoリストでは、「完了ボタン」「削除ボタン」がタスクごとに動的に生成されるため、イベントデリゲーションが必須だった。

最初に詰まったポイントはここだった。
ボタンに直接 addEventListener を設定していたが、タスクを追加・削除するたびにクリックが効かなくなる。

原因はシンプルで、DOMを作り直しているからだ。
ToDoリストでは、配列を元に要素を生成し直す「再レンダリング」を行っている。

再レンダリング時に起きていることは以下の通りだ。

つまり、いくらボタンにイベントを設定しても、そのボタン自体が消えているため意味がなかった。

この問題を解決するために使ったのが、イベントデリゲーションだった。

イベントデリゲーションでは、親要素にイベントを設定し、
event.target を使って実際に押された要素を特定する。

今回の実装では、ボタンに以下のようなIDを付けた。

これにより、クリックされた要素のIDからタスク番号を取り出せる。

const target = e.target as HTMLElement;
const idNum = Number(target.id.replace("comp-", ""));

どのボタンが押されるか事前に分からなくても、
命名規則＋文字列操作で安全に判定できるのがポイントだった。

TypeScriptのイベントデリゲーションは、
動的に要素を生成する場面では避けて通れない考え方だと感じた。れらをToDoアプリを通して理解できたことで、
単なる知識ではなく「使える感覚」に近づいた気がする。

未経験からのキャリアチェンジは不安も多いが、
こうして学びを言語化しながら積み上げていくことで、
少しずつ前に進めている実感がある。

今後もTypeScriptの学習記録を、記事としてアウトプットしていく予定だ。