React初心者サイト

イベントハンドリングとは

イベントハンドリングとは、ユーザーの操作（クリック、入力など）に応じて、プログラムの処理を実行する仕組みです。 Reactでは、これらのイベントを「イベントハンドラー」という関数で処理します。

🎯 イベントハンドリングの流れ

📚 イベントハンドリングの仕組み:

ユーザーが操作（クリック、入力など）
イベントが発生（onClick、onChangeなど）
イベントハンドラーが実行（指定した関数が呼ばれる）
UIが更新（状態が変わり、画面が更新される）

💡 身近な例えで理解しよう

🚪 ドアのベル: ボタンを押す（ユーザーの操作）→ ベルが鳴る（イベント発生）→ 誰かが出てくる（イベントハンドラー実行）→ ドアが開く（UI更新）

🎮 ゲームのコントローラー: ボタンを押す（操作）→ コマンドが送られる（イベント）→ キャラクターが動く（処理実行）→ 画面が変わる（表示更新）

📱 スマホの通知: メッセージが届く（イベント発生）→ 通知音が鳴る（ハンドラー実行）→ 画面に表示される（UI更新）

📝 イベントハンドリングの特徴

ユーザーとの対話: クリック、入力、ホバーなどの操作に反応します
即座の反応: イベントが発生すると、すぐに関数が実行されます
状態の変更: イベントハンドラー内で状態を変更すると、UIが自動的に更新されます

onClickイベント（クリックイベント）

ボタンをクリックしたときに処理を実行したい場合は、onClickイベントハンドラーを使用します。

💡 このレッスンで使うuseStateについて

このレッスンでは、イベントハンドリングの説明のためにuseStateを使用しています。

useStateは、コンポーネントの状態（データ）を保存し、変更するためのReactの機能（フック）です。

📝 useStateの基本的な使い方

// useStateの基本的な書き方
const [値の名前, 値を変更する関数] = useState(初期値);

// 例：数値を保存する場合
const [count, setCount] = useState(0);

// 例：文字列を保存する場合
const [name, setName] = useState("");

useStateは2つの値を返します：現在の値と、その値を変更する関数
値を変更するには、返された関数（例：setCount）を使用します
値が変更されると、コンポーネントが自動的に再描画されます

📚 useStateの詳しい使い方、useEffect、カスタムフックなど、状態管理についての詳細は「状態管理」カテゴリで詳しく解説します。

📝 onClickの基本的な使い方

const Button = () => {
  // クリック時に実行される関数を定義
  const handleClick = () => {
    alert("ボタンがクリックされました！");
  };

  return (
    // onClick属性にイベントハンドラー関数を渡す（括弧は付けない）
    <button onClick={handleClick}>
      クリックしてください
    </button>
  );
};

onClickにイベントハンドラー関数を渡すことで、ボタンがクリックされたときにその関数が実行されます。

💡 onClickイベントとは？

onClickイベントは、ボタンや要素をクリックしたときに実行されるイベントです。ユーザーがクリックすると、指定した関数が自動的に呼び出されます。

🎯 例えで理解しよう

🔘 ボタンを押す例: onClickは「エレベーターのボタンを押す」ようなものです。ボタンを押すと、エレベーターが動き始めます（関数が実行されます）。

🚪 ドアベルを鳴らす例: onClickは「ドアベルを鳴らす」ようなものです。ベルを鳴らすと、中から人が出てきます（関数が実行されます）。

📞 電話をかける例: onClickは「電話をかける」ようなものです。電話をかけると、相手が電話に出ます（関数が実行されます）。

✅ ポイント

onClick={handleClick}のように、関数名の後ろに括弧を付けない（handleClick()と書くと、ページが読み込まれた瞬間に実行されてしまいます）
インラインで関数を書くことも可能: onClick={() => alert("クリック！")}

実際の表示結果

💡 ボタンをクリックすると、クリック回数がカウントされます。onClickイベントハンドラーが動作していることが確認できます！

onChangeイベント（入力変更イベント）

入力フィールドの値が変更されたときに処理を実行したい場合は、onChangeイベントハンドラーを使用します。

📝 onChangeの基本的な使い方

const InputField = () => {
  // 入力値を保存するための状態を定義
  const [value, setValue] = useState("");

  // 入力値が変更されたときに実行される関数
  // e: イベントオブジェクト（入力フィールドの情報を含む）
  const handleChange = (e) => {
    // e.target.valueで入力された値を取得して状態を更新
    setValue(e.target.value);
  };

  return (
    <input 
      type="text" 
      value={value} // 入力フィールドの値を状態と同期
      onChange={handleChange} // 値が変更されたときにhandleChangeを実行
      placeholder="入力してください" 
    />
  );
};

onChangeイベントハンドラーには、イベントオブジェクト（通常eと書く）が渡されます。e.target.valueで入力された値を取得できます。

実際の表示結果

入力してください:

💡 入力フィールドに文字を入力すると、リアルタイムで値が表示されます。onChangeイベントハンドラーが動作していることが確認できます！

💡 イベントオブジェクトとは？

イベントオブジェクト（e）は、イベントに関する情報を含むオブジェクトです。 Reactが自動的に作成し、イベントハンドラー関数の引数として渡してくれます。

🎯 身近な例えで理解しよう

📦 宅配便の荷物: イベントオブジェクト（e）は「宅配便の荷物」のようなものです。

ユーザーが入力する = 荷物を発送する
Reactがeを作る = 配送センターが荷物を箱に入れる
eの中身 = 箱の中の荷物（情報）
関数にeが渡される = 配達員が荷物を届ける
e.target.valueを使う = 箱を開けて中身を取り出す

📮 手紙の例: イベントオブジェクト（e）は「手紙」のようなものです。

ユーザーが入力する = 手紙を書く
Reactがeを作る = 郵便局が手紙を封筒に入れる
eの中身 = 封筒の中の手紙（情報）
関数にeが渡される = 郵便配達員が手紙を届ける
e.target.valueを使う = 封筒を開けて手紙を読む

🎁 プレゼントの例: イベントオブジェクト（e）は「プレゼントボックス」のようなものです。

ユーザーが入力する = プレゼントを選ぶ
Reactがeを作る = プレゼントを箱に入れる
eの中身 = 箱の中のプレゼント（情報）
関数にeが渡される = プレゼントを渡す
e.target.valueを使う = 箱を開けてプレゼントを取り出す

target: 📝

target.value: "文字"

target.type: "text"

type: "change"

📦 イベントオブジェクト（e）の箱

eの中には、イベントに関する情報がすべて入っています。この箱が関数に自動的に渡されます。

📮 例え: 手紙の封筒のようなものです。中に情報が入っていて、配達員（React）が自動的に届けてくれます。

🎁 例え: プレゼントボックスのようなものです。中にプレゼント（情報）が入っていて、自動的に受け取る人（関数）に届きます。

🔄 イベントオブジェクト（e）の移動

📝 入力

"こんにちは"

ユーザーが入力

情報が入った箱

Reactが自動生成

関数

handleChange(e)

eが自動的に渡される

💡 入力 → eが作られる → eが関数に移動 → 関数内でe.target.valueを使用

🎯 例えで理解しよう

📦 宅配便の流れ: 荷物を発送（入力）→ 配送センターが箱に入れる（eが作られる）→ 配達員が届ける（eが関数に移動）→ 箱を開ける（e.target.valueを使用）

📮 手紙の流れ: 手紙を書く（入力）→ 封筒に入れる（eが作られる）→ 郵便配達員が届ける（eが関数に移動）→ 封筒を開ける（e.target.valueを使用）

📦 eの中身（主なプロパティ）:

🎯 e.target、e.target.value、e.target.typeとは？

💡 例えで理解しよう

🏠 家の住所の例: e.targetは「家の住所」、e.target.valueは「家の中身」、e.target.typeは「家の種類」のようなものです。

📦 箱の例: e.targetは「箱そのもの」、e.target.valueは「箱の中身」、e.target.typeは「箱の種類（小さい箱、大きい箱など）」のようなものです。

→

e.target

→

<input>

e.targetは「イベントが発生した要素」を指します。入力フィールドで入力したら、その入力フィールド要素になります。

💡 例え: 家の住所のようなもの。どこでイベントが発生したかを示します。

→

e.target

→

.value

→

"こんにちは"

e.target.valueは「入力フィールドに入力された値」を取得します。文字列が返ってきます。

💡 例え: 箱の中身のようなもの。e.target（箱）を開けて、中身（value）を取り出します。

→

e.target

→

.type

→

"text"

e.target.typeは「要素のタイプ」を取得します。<input type="text" />の場合、"text"が返ってきます。

💡 例え: 箱の種類のようなもの。小さい箱、大きい箱、丸い箱など、箱の種類を表します。

🎯 実際の使用例:

const handleChange = (e) => {
  console.log(e.target);        // <input type="text" ...>
  console.log(e.target.value);  // "入力された文字"
  console.log(e.target.type);   // "text"
  console.log(e.type);          // "change"
};

📦 イベントオブジェクト（e）の中身

イベントオブジェクト（e）

e.target

e.target.value

e.target.type

e.type

→

handleChange(e)

関数に自動的に渡される

💡 入力すると → eが作られる → eが関数に移動 → 情報を取り出せる

onSubmitイベント（フォーム送信イベント）

フォームを送信したときに処理を実行したい場合は、onSubmitイベントハンドラーを使用します。

📝 onSubmitの基本的な使い方

💡 例えで理解しよう

📮 手紙を送る例: onSubmitは「手紙をポストに入れる」ようなものです。手紙を入れると、郵便局に送られて処理されます。

🎁 プレゼントを渡す例: onSubmitは「プレゼントを渡す」ようなものです。プレゼントを渡すと、受け取った人が中身を確認します。

const Form = () => {
  // 名前を保存するための状態を定義
  const [name, setName] = useState("");

  // フォーム送信時に実行される関数
  const handleSubmit = (e) => {
    e.preventDefault(); // ページのリロードを防ぐ（重要！）
    alert(`こんにちは、${name}さん！`);
  };

  return (
    // onSubmit属性にイベントハンドラー関数を渡す
    <form onSubmit={handleSubmit}>
      <input 
        type="text" 
        value={name} // 入力フィールドの値を状態と同期
        // 入力が変更されたら状態を更新（インライン関数）
        onChange={(e) => setName(e.target.value)} 
        placeholder="名前を入力" 
      />
      <button type="submit">送信</button>
    </form>
  );
};

e.preventDefault()を呼び出すことで、フォーム送信時のページリロードを防ぐことができます。これはReactアプリケーションでは重要な処理です。

🛑 e.preventDefault()の例え

🚦 信号機の例: e.preventDefault()は「赤信号で止まる」ようなものです。通常、フォームを送信するとページがリロードされますが、e.preventDefault()でそれを止めます。

🚪 ドアを閉める例: e.preventDefault()は「ドアを閉めて外に出ないようにする」ようなものです。通常の動作（ページリロード）を防いで、自分で処理を制御します。

📦 宅配便の例: e.preventDefault()は「配送をキャンセルする」ようなものです。通常は自動的に配送されますが、キャンセルして自分で処理します。

⚠️ 重要なポイント

e.preventDefault()を忘れると、フォーム送信時にページがリロードされてしまいます
フォーム内のボタンにはtype="submit"を指定すると、Enterキーでも送信できます

実際の表示結果

💡 フォームを送信すると、入力された値が表示されます。onSubmitイベントハンドラーが動作していることが確認できます！

その他のイベント

Reactでは、他にも多くのイベントを処理できます。よく使われるイベントを紹介します。

📝 よく使われるイベント一覧

onClickクリックされたとき

onChange入力値が変更されたとき

onSubmitフォームが送信されたとき

onFocus要素がフォーカスされたとき

onBlur要素からフォーカスが外れたとき

onMouseEnterマウスが要素の上に来たとき

onMouseLeaveマウスが要素から離れたとき

onKeyDownキーが押されたとき

実際の表示結果

状態: OFF

スイッチがOFFです

💡 スイッチをクリックすると、ON/OFFが切り替わります。状態の変化を確認できます！

📚 例題

実際にイベントハンドリングを使ってコンポーネントを作成してみましょう。

例題1: クリックカウンター

ボタンをクリックするたびにカウントが増えるコンポーネントを作成してください。

const Counter = () => {
  // カウント数を保存する状態を定義（初期値は0）
  const [count, setCount] = useState(0);

  // クリック時にカウントを1増やす関数
  const handleClick = () => {
    setCount(count + 1); // countの値を1増やして状態を更新
  };

  return (
    <div>
      <p>カウント: {count}</p>
      <button onClick={handleClick}>+1</button>
    </div>
  );
};

🎯 成果物（実際の動作）

カウント: 0

例題2: 入力フィールド

入力されたテキストをリアルタイムで表示するコンポーネントを作成してください。

const TextInput = () => {
  // 入力テキストを保存する状態を定義
  const [text, setText] = useState("");

  // 入力値が変更されたときに実行される関数
  const handleChange = (e) => {
    setText(e.target.value); // 入力値を状態に保存
  };

  return (
    <div>
      <input 
        type="text" 
        value={text} // 入力フィールドの値を状態と同期
        onChange={handleChange} // 入力変更時にhandleChangeを実行
        placeholder="入力してください" 
      />
      <p>入力された値: {text}</p> {/* 状態の値をリアルタイムで表示 */}
    </div>
  );
};

🎯 成果物（実際の動作）

入力された値:

例題3: トグルスイッチ

クリックするたびにON/OFFが切り替わるスイッチコンポーネントを作成してください。

const Toggle = () => {
  // ON/OFFの状態を保存（初期値はfalse = OFF）
  const [isOn, setIsOn] = useState(false);

  // クリック時にON/OFFを切り替える関数
  const handleToggle = () => {
    setIsOn(!isOn); // 現在の状態を反転（!は否定演算子）
  };

  return (
    <div>
      {/* isOnがtrueなら"ON"、falseなら"OFF"を表示 */}
      <button onClick={handleToggle}>
        {isOn ? "ON" : "OFF"}
      </button>
      <p>状態: {isOn ? "オン" : "オフ"}</p>
    </div>
  );
};

🎯 成果物（実際の動作）

状態: オフ

まとめ

🎯 覚えておきたい3つのポイント

イベントハンドラーは関数: onClick={handleClick}のように、関数名を渡します（括弧は付けない）
イベントオブジェクトで値を取得: e.target.valueで入力値を取得できます
フォーム送信時はpreventDefault: e.preventDefault()でページリロードを防ぎます

イベントハンドリング: ユーザーの操作に応じて処理を実行する仕組みです。

主なイベント: onClick（クリック）、onChange（入力変更）、onSubmit（フォーム送信）などがあります。

状態の更新: イベントハンドラー内で状態を更新すると、UIが自動的に更新されます。

💪 次のステップ

イベントハンドリングの基本的な使い方を理解できたら、実際にコードを書いて練習してみましょう。例題に挑戦して、インタラクティブなコンポーネントを作成してみてください。最初は難しく感じるかもしれませんが、繰り返し練習することで必ず理解できるようになります！

← 前のレッスン: propsの使い方レッスン一覧に戻る