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

生徒

「Reactでイベントを扱うとき、どんな書き方が良いんですか？」

先生

「Reactのイベントハンドリングには、効率的で安全なベストプラクティスがあります。」

生徒

「例えばどんな方法ですか？」

先生

「それでは具体例を交えて、初めてでもわかるように説明します。」

1. イベントハンドラは関数として定義する

JSX内に直接アロー関数を書くと毎回新しい関数が生成され、レンダリングごとに負荷がかかります。ベストプラクティスは、イベントハンドラをコンポーネント内で関数として定義してから渡すことです。


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

<button onClick={handleClick}>クリック</button>

（ボタンを押すと「ボタンがクリックされました！」と表示されます）

2. useCallbackで関数をメモ化する

子コンポーネントに関数を渡す場合、再レンダリングで毎回関数が生成されると無駄なレンダリングが発生します。useCallbackを使うと関数をメモ化でき、パフォーマンスが向上します。


const handleClick = useCallback(() => {
  setCount(prev => prev + 1);
}, []);

3. イベント伝播を必要に応じて制御する

ネストした要素のクリックで親要素にもイベントが伝わることがあります。不要な場合はevent.stopPropagation()で伝播を止めましょう。


const handleClick = (event) => {
  event.stopPropagation();
  console.log("クリックされました");
};

4. stateは必ず更新関数で操作する

Reactのstateは直接書き換えるのではなく、必ずsetState関数やuseStateの更新関数を使います。これによりコンポーネントが正しく再レンダリングされます。


setCount(prev => prev + 1);

5. フォームイベントではpreventDefaultを使う

フォーム送信ボタンは通常ページをリロードします。Reactではevent.preventDefault()を使い、ページ遷移を防ぎつつ独自の処理を実行することが推奨されます。


const handleSubmit = (event) => {
  event.preventDefault();
  console.log("送信処理");
};

6. クラスコンポーネントではthisを正しく扱う

クラスコンポーネントでは、イベントハンドラをbindしないとthisがundefinedになります。コンストラクタでbindするか、アロー関数で定義して解決します。


class App extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    console.log(this);
  }
}

7. イベントハンドラ内の処理は簡潔にする

イベントハンドラの処理が長くなると可読性が下がり、バグの原因になります。複雑な処理は関数を分けて整理し、イベントハンドラは呼び出すだけにすると良いです。

8. ポイント整理

Reactのイベントハンドリングでは、関数を事前定義して渡す、useCallbackでメモ化する、stateは更新関数で操作する、フォーム送信ではpreventDefaultを使う、thisを正しく扱う、イベント伝播を制御する、処理を簡潔にすることがベストプラクティスです。これらを守ることで、パフォーマンスと保守性が向上します。

まとめ

今回のReactイベントハンドリングの記事では、初心者でも理解しやすいように、Reactでイベントを扱う際の基本からベストプラクティスまで幅広く解説しました。まず、イベントハンドラはJSX内で直接書かず、コンポーネント内で関数として定義することが基本です。これにより毎回新しい関数が生成されず、レンダリングの負荷を減らせます。また、子コンポーネントに関数を渡す場合はuseCallbackを使って関数をメモ化することで、無駄な再レンダリングを防ぎ、アプリのパフォーマンスを最適化できます。ネストした要素でクリックイベントが親要素に伝播する場合は、event.stopPropagation()を使い、意図しない動作を防ぎます。

次に、Reactのstate操作では必ず更新関数を使うことが重要です。直接stateを書き換えると再レンダリングが正しく行われず、画面の表示が更新されません。フォームイベントではevent.preventDefault()を使ってページリロードを防ぎ、独自の処理を安全に実行できます。クラスコンポーネントの場合はthisの扱いに注意し、イベントハンドラをbindするかアロー関数で定義する必要があります。さらに、イベントハンドラ内の処理は簡潔に保ち、複雑な処理は別の関数に分けることで可読性と保守性を高めます。

サンプルコードで復習


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

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

  const handleClick = useCallback(() => {
    setCount(prev => prev + 1);
  }, []);

  const handleFormSubmit = (event) => {
    event.preventDefault();
    console.log("フォームが送信されました: " + count);
  };

  return (
    <div>
      <button onClick={handleClick}>クリック</button>
      <form onSubmit={handleFormSubmit}>
        <button type="submit">送信</button>
      </form>
      <p>クリック数: {count}</p>
    </div>
  );
}

export default App;

（ボタンを押すとクリック数が増え、フォームを送信するとコンソールにメッセージが出力されます。State更新やpreventDefaultなど、基本のベストプラクティスを確認できます）

先生と生徒の振り返り会話

生徒

「今回学んだことをまとめると、イベントハンドラは関数として定義して渡す、Stateはset関数で操作する、フォームではpreventDefaultを使う、thisの扱いに注意する、event.stopPropagationで伝播を制御する、処理は簡潔にする、ということですね？」

先生

「その通りです。これらの基本を押さえておくと、Reactのイベントハンドリングでよくあるバグやパフォーマンスの問題を防ぐことができます。」

生徒

「なるほど！これで検索ボックスやボタン操作、フォーム送信など、いろいろな場面で安全にイベントを扱えますね。」

先生

「そうです。さらに、useCallbackを使った関数のメモ化やState管理を意識すれば、大規模なアプリでも効率的にイベント処理を行えます。」

生徒

「理解できました！これでReactイベントの基本とベストプラクティスがしっかり身につきました。」