ReactのuseEffectでイベントリスナーを登録・解除する方法を徹底解説！初心者向けReactフック入門

1. イベントリスナーとは？初心者でもわかる基本の考え方

1. イベントリスナーとは？初心者でもわかる基本の考え方

イベントリスナーとは、ユーザーの操作や画面上の出来事を監視して、それに反応する仕組みのことです。たとえば、マウスを動かす、クリックする、キーボードのキーを押すなどがイベントです。そして、そのイベントが起きたときに「この処理を実行してね」とあらかじめ登録しておくのがイベントリスナーです。

イメージとしては「ドアの前に立っていて、人が通ったら声をかける警備員」のようなものです。ドア（イベントの発生場所）に警備員（イベントリスナー）を配置しておくと、通行人（ユーザーの操作）があったときに反応できます。

2. Reactでイベントリスナーを使うときの注意点

2. Reactでイベントリスナーを使うときの注意点

通常のJavaScriptではaddEventListenerを使ってイベントを登録し、不要になったらremoveEventListenerで解除します。ですが、Reactではコンポーネントが表示されたり消えたりするたびに処理を整理する必要があります。そこで便利なのがuseEffectフックです。

useEffectを使えば、「コンポーネントが表示されたときにイベントリスナーを登録する」「コンポーネントが消えるときにイベントリスナーを解除する」という処理をまとめて書けます。これにより、無駄なリスナーが残ってメモリを消費したり、同じイベントが何度も実行されるといったトラブルを防げます。

3. useEffectでイベントリスナーを登録・解除する基本コード

3. useEffectでイベントリスナーを登録・解除する基本コード

ここでは「マウスを動かしたら位置を表示する」というサンプルを作ります。useEffectの中でイベントリスナーを登録し、クリーンアップ処理（後片付け）で解除します。

import React, { useState, useEffect } from "react";

function App() {
  const [position, setPosition] = useState({ x: 0, y: 0 });

  useEffect(() => {
    // マウスを動かしたときに呼ばれる関数
    const handleMouseMove = (event) => {
      setPosition({ x: event.clientX, y: event.clientY });
    };

    // イベントリスナーを登録
    window.addEventListener("mousemove", handleMouseMove);

    // クリーンアップ処理でリスナーを解除
    return () => {
      window.removeEventListener("mousemove", handleMouseMove);
    };
  }, []);

  return (
    <div>
      <h1>マウスの位置</h1>
      <p>X: {position.x}, Y: {position.y}</p>
    </div>
  );
}

export default App;

4. コードの仕組みをやさしく解説

4. コードの仕組みをやさしく解説

このコードでは、useEffectの中にイベントリスナーを登録しています。具体的には、画面全体を監視するためにwindow.addEventListener("mousemove", handleMouseMove)を使っています。

さらに重要なのが、最後のreturn () => { ... }の部分です。これは「クリーンアップ関数」と呼ばれ、コンポーネントが消えたり再描画されるときに実行されます。ここでremoveEventListenerを呼び出すことで、不要になったリスナーをきれいに解除しています。

もし解除を忘れると、コンポーネントが画面から消えてもイベントリスナーが残り続け、無駄に動作したりエラーの原因になってしまいます。つまり、「登録したら解除する」というセットで覚えておくことが大切です。

5. 他のイベントでも同じように応用できる

5. 他のイベントでも同じように応用できる

今回の例はマウスの移動でしたが、他のイベントでも同じ書き方で応用できます。たとえば「キーを押したら文字を表示する」場合も同様です。

useEffect(() => {
  const handleKeyDown = (event) => {
    console.log("押されたキー:", event.key);
  };

  window.addEventListener("keydown", handleKeyDown);

  return () => {
    window.removeEventListener("keydown", handleKeyDown);
  };
}, []);

このように、useEffectを使えばどんなイベントでも安全に登録と解除ができます。Reactでは特に「後片付け（クリーンアップ）」を忘れないことが重要です。

まとめ

まとめ

React の useEffect を使ったイベントリスナーの登録と解除について学んできましたが、あらためて振り返ると、この仕組みは「ユーザーの操作に反応する動きを安全に管理するための基礎」と言えます。とくに、通常の JavaScript の書き方とは違い、React のコンポーネントは表示されたり消えたりを繰り返すため、イベントリスナーの管理を適切に行うことがとても重要です。useEffect はこの「登録」と「解除」をひとまとめに記述できる便利な仕組みであり、アプリ全体の安定性やパフォーマンスに直結します。

また、今回の学習ではマウス操作やキーボード操作といった分かりやすい例を通じて、React がどのようにユーザーの行動を検知し、内部の状態を更新していくのかを具体的に理解できたはずです。とくに、画面に映る動きがリアルタイムに変化する体験は、React の「再描画による更新」という仕組みを体感しやすいポイントです。こうした動きを再現できるようになると、今後の開発でさまざまな UI を柔軟に構築できる幅が一気に広がります。

さらに、イベントリスナーの具体的な応用例として、マウス移動・キー入力などの実践的なケースを紹介しました。これらは非常に需要の高いインタラクティブな処理であり、ユーザーが快適に操作できるインターフェースを作るうえで欠かせない技術です。複雑な画面構成であっても、useEffect のルールを守ってイベントを整理すれば、予期せぬ動作や余計な負荷を避けることができます。

まとめ用サンプル：イベント登録と解除を視覚的に確認できるミニコード

最後に、今回の学習を踏まえてより理解しやすいシンプルなサンプルプログラムを掲載します。「マウスをクリックした回数」をカウントするイベントリスナーを useEffect で登録し、コンポーネントが消えるタイミングで解除する例です。

import React, { useState, useEffect } from "react";

function ClickCounter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const handleClick = () => {
      setCount((prev) => prev + 1);
    };

    window.addEventListener("click", handleClick);

    return () => {
      window.removeEventListener("click", handleClick);
    };
  }, []);

  return (
    <div>
      <h2>クリックされた回数</h2>
      <p>{count} 回クリックされました</p>
    </div>
  );
}

export default ClickCounter;

このように、React の useEffect を適切に使いこなすことで、アプリケーションは確実に安定性を増し、利用者にとっても開発者にとっても扱いやすいインターフェースを提供できます。イベントリスナーは地味な存在に見えますが、ユーザー体験を向上させる重要な要素であり、Web アプリ開発の基礎でもあります。ぜひ今回の内容を繰り返し復習して、React を使ったイベント管理を確実に身につけてください。

この記事を読んだ人からの質問

この記事を読んだ人からの質問

プログラミング初心者からのよくある疑問／質問を解決します

Reactでイベントリスナーとは何ですか？どんな役割がありますか？

イベントリスナーとは、ReactやJavaScriptでユーザーの操作（クリックやキー入力、マウス移動など）に反応して処理を実行する仕組みです。ユーザーのアクションを検知して、関数を実行するために使います。