先生と生徒の会話形式で理解しよう

生徒

「JavaScriptでイベントをたくさん使っていると、ブラウザが重くなることがあるって聞きました。どうしてですか？」

先生

「それはメモリリークという現象です。使わなくなったイベントリスナーが解放されず、メモリに残り続けることが原因です。」

生徒

「メモリリークを防ぐにはどうしたらいいですか？」

先生

「基本的にはイベントリスナーを不要になったら確実に削除することです。今回はその方法を詳しく見ていきましょう。」

1. メモリリークとは？

メモリリークとは、JavaScriptで使わなくなったメモリが解放されず、ブラウザやアプリの動作が重くなる現象です。特にイベントリスナーはDOM要素と密接に結びつくため、不要になっても解放されないとメモリに残り続けます。これを防ぐことが、快適なWebアプリ作りのポイントです。

2. イベントリスナーの基本

イベントリスナーとは、ボタンのクリックやフォームの送信など、ユーザーの操作に応じて実行される関数です。JavaScriptではaddEventListenerで追加します。


const button = document.getElementById("myButton");
button.addEventListener("click", () => {
  console.log("ボタンがクリックされました");
});

しかし、このリスナーを削除せずに要素を削除すると、メモリに残り続けることがあります。

3. イベントリスナーを削除する方法

不要になったイベントリスナーはremoveEventListenerで削除します。これにより、メモリリークを防ぐことができます。


function handleClick() {
  console.log("ボタンがクリックされました");
}

const button = document.getElementById("myButton");
button.addEventListener("click", handleClick);

// リスナーを削除
button.removeEventListener("click", handleClick);

ポイントは、リスナー登録時と同じ関数名を指定することです。匿名関数では削除できないので注意しましょう。

4. 要素削除時の注意

DOM要素を削除する際も、イベントリスナーを先に削除すると安全です。例えば、動的に作ったボタンを削除する場合は以下のようにします。


const container = document.getElementById("container");
const button = document.createElement("button");

function onClick() {
  console.log("動的ボタンクリック");
}

button.addEventListener("click", onClick);
container.appendChild(button);

// 削除する場合
button.removeEventListener("click", onClick);
container.removeChild(button);

この手順を守ることで、メモリに不要なデータが残ることを防げます。