はじめに
この記事は、Reactを学ぶ中で得た知識や感じたことを記録したメモをまとめたものです。エンジニア初学者として学習する中で気づいたポイントや躓いた部分を整理し、後から振り返った際に役立てるとともに、Reactを学び始めた方々にも少しでも参考になる内容になれば幸いです。
イベントリスナーとは
イベントリスナーとは、画面上で発生するイベントを監視し、特定の処理（イベントハンドラー）を登録する仕組み。
たとえば、ボタンをクリックしたり、入力欄の値を変更したりする操作がイベントとして発生し、それを処理する際に利用される。
イベントの例
- クリックイベント: ボタンをクリックする。
- 入力イベント: 入力欄に文字を入力する。
- マウスイベント: マウスが要素に乗ったり離れたりする。
Reactでのイベントリスナーの書き方
ReactではHTMLと異なり、イベント名をキャメルケース（例: onClick）で記述する。以下はボタンをクリックしたときにアラートを表示する処理を登録している。
const Example = () => {
const clickHandler = () => {
alert("ボタンがクリックされました");
};
return (
<>
<button onClick={clickHandler}>クリックしてね</button>
</>
);
};
export default Example;
clickHandler() と clickHandlerの違い
1. clickHandler()
- 関数を即時実行し、その結果を
onClickに渡す。このため、ボタンが表示された瞬間（レンダリング時）にclickHandler()が実行され、alert("ボタンがクリックされました")が即座に表示される。 - ボタンをクリックしても何も起こらない。（すでに関数は実行済みのため）
-
clickHandler()のように「関数の呼び出し」を記述するのは、意図的にレンダリング時に実行したい処理を行う場合に使う（通常のイベントハンドラーでは使用しない）
2. clickHandler
- 関数そのものを
onClickに渡し、ボタンをクリックした時に関数が実行される。結果として、ボタンをクリックしたタイミングでalert("ボタンがクリックされました")が表示される。
const Example = () => {
const clickHandler = () => {
alert("ボタンがクリックされました");
};
return (
<>
{/* 即時実行: ボタンが表示された時点で関数が実行される */}
<button onClick={clickHandler()}>クリックしてね</button>
{/* イベント時実行: ボタンをクリックした際に関数が実行される */}
<button onClick={clickHandler}>クリックしてね</button>
</>
);
};
export default Example;
動作の違い（まとめ）
| 記述 | 実行タイミング | 用途 |
|---|---|---|
onClick={clickHandler()} |
レンダリング時に即実行 | ボタン表示時に処理を実行したい場合に使用 |
onClick={clickHandler} |
ボタンクリック時に実行 | 通常のクリックイベントで使用 |
よく使われるイベントタイプ一覧
以下は、Reactでよく使われるイベントタイプの一覧：
-
onClick: ボタンやリンクなどのクリックイベント -
onChange: 入力値の変更イベント（フォーム要素で使用） -
onBlur: フォーカスが外れたときのイベント -
onFocus: フォーカスが当たったときのイベント -
onSubmit: フォーム送信時のイベント -
onKeyDown: キーが押されたときのイベント -
onMouseEnter: マウスが要素に乗ったときのイベント -
onMouseLeave: マウスが要素から離れたときのイベント
まとめ
- Reactでは、イベントリスナーをキャメルケースで記述し、特定のイベントタイプを監視して処理を実行する。
-
clickHandler()とclickHandlerの違いを理解し、適切な方法で関数を渡すことが重要。 - イベントリスナーとイベントタイプを正しく使いこなすことで、動的なUIを効率的に構築できる。