導入: なぜremoveEventListenerが重要なのか
フロントエンド開発において、ボタンクリックやスクロールイベントなどを監視する「イベントリスナー」は欠かせない機能です。しかし、不要になったイベントを放置すると、メモリリークの原因となったり、予期せぬタイミングで関数が実行されてバグを引き起こしたりします。特にSPA（シングルページアプリケーション）では、画面遷移時にイベントを適切に削除しないと、蓄積されたイベントがパフォーマンスを大きく低下させます。この課題を解決するのが Element.removeEventListener です。
基礎知識: イベントリスナーの仕組み
JavaScriptのイベントリスナーは、特定の要素（Element）に対して「何かが起きたらこの関数を実行する」という予約をする仕組みです。
- addEventListener: イベントを登録する。
- removeEventListener: 登録済みのイベントを削除する。
ここで最も重要なポイントは、「登録時と削除時で、全く同じ関数オブジェクトを指定しなければならない」というルールです。無名関数（アロー関数など）を直接登録してしまうと、削除ができなくなるため注意が必要です。
実装/解決策: 確実な削除のためのベストプラクティス
イベントを後から削除できるようにするには、関数を「名前付き関数」として定義するか、変数に格納しておく必要があります。また、第3引数にオプション（キャプチャリング設定など）を指定した場合は、削除時にも同じ引数を渡す必要があります。
サンプルプログラム: 安全なイベントの登録と削除
以下は、ボタンのクリックイベントを一度だけ実行し、その後自動的に削除する実用的なコード例です。
// 1. 実行したい関数を名前付きで定義する
function handleClick() {
console.log("ボタンがクリックされました！");
// 処理が終わったら自分自身を削除する
const button = document.getElementById("myButton");
button.removeEventListener("click", handleClick);
console.log("イベントリスナーを削除しました");
}
const button = document.getElementById("myButton");
// 2. addEventListenerで登録
button.addEventListener("click", handleClick);
// 3. 別の場所から削除したい場合も同じ関数を参照する
// button.removeEventListener("click", handleClick);
応用・注意点: 現場で陥りやすいバグの回避策
現場でよくある失敗は、「アロー関数を直接渡してしまい、削除できなくなる」というケースです。
・ダメな例:
element.addEventListener(“click”, () => { … });
これでは、削除しようとしても別の無名関数が生成されてしまうため、元のイベントは削除されません。
・解決策:
必ず関数に名前をつけるか、外部スコープで定義してください。また、ReactやVueなどのフレームワークを使用している場合、コンポーネントのアンマウント時（ライフサイクルの終了時）に必ず removeEventListener を呼ぶように設計することが、堅牢なアプリケーションを作るコツです。メモリを適切に管理し、クリーンなコードを維持しましょう。