Reactのイベントオブジェクト(event)の使い方とよく使うプロパティを初心者向けに解説

1. onClickイベントでeventオブジェクトを使う例

1. onClickイベントでeventオブジェクトを使う例

Reactでボタンをクリックしたときにeventオブジェクトを使って情報を取得する基本例です。

import React from "react";

function App() {
  function handleClick(event) {
    alert("クリックされたボタンのタイプ: " + event.type);
    console.log("クリック位置: ", event.clientX, event.clientY);
  }

  return (
    <div>
      <button onClick={handleClick}>クリックしてみよう</button>
    </div>
  );
}

export default App;

この例ではevent.typeでイベントの種類（ここではクリック）を取得し、event.clientXとevent.clientYでマウスのクリック位置を取得しています。

2. onChangeイベントでeventオブジェクトを使う例

2. onChangeイベントでeventオブジェクトを使う例

入力フォームでeventを使うと、ユーザーが入力した文字を取得できます。

import React, { useState } from "react";

function App() {
  const [value, setValue] = useState("");

  function handleChange(event) {
    setValue(event.target.value);
    console.log("入力された値:", event.target.value);
  }

  return (
    <div>
      <input
        type="text"
        placeholder="文字を入力してください"
        value={value}
        onChange={handleChange}
      />
      <p>入力内容: {value}</p>
    </div>
  );
}

export default App;

ここで重要なのはevent.target.valueです。targetはイベントが発生した要素、valueはその要素の現在の値を示します。

3. eventオブジェクトでよく使うプロパティ一覧

3. eventオブジェクトでよく使うプロパティ一覧

Reactのイベントオブジェクトでよく使うプロパティをまとめます。どれも入力やクリックの処理で頻繁に使うものです。

• event.target - イベントが発生した要素
• event.target.value - 入力フォームの値
• event.type - 発生したイベントの種類（click, changeなど）
• event.clientX / event.clientY - マウスの位置
• event.preventDefault() - デフォルトの動作を止める（リンクの遷移やフォーム送信の停止など）
• event.stopPropagation() - イベントのバブリングを止める（親要素に伝わらないようにする）

これらのプロパティを理解すると、クリックや入力などのユーザー操作を自在に扱えるようになります。

4. 実践的な使い方のポイント

4. 実践的な使い方のポイント

eventオブジェクトは、ユーザー操作の詳細情報を取得するための基本ツールです。ポイントとしては、targetで操作された要素を特定し、valueやtypeで内容や種類を取得することです。また、preventDefaultやstopPropagationを必要に応じて使うことで、意図しない画面遷移やイベント伝播を防ぐことができます。

特にフォーム入力やボタン操作など日常的なUI操作では、このeventオブジェクトを理解しておくと、動的で使いやすいReactアプリを作ることができます。

まとめ

まとめ

今回の記事では、Reactにおけるイベントオブジェクト（event）の基本的な使い方と、よく使われるプロパティについて解説しました。Reactのイベントオブジェクトは、ボタンのクリックや入力フォームの変更など、ユーザーが行う操作に対して自動で渡される情報の塊です。event.typeでイベントの種類を判定し、event.targetで操作された要素を特定、event.target.valueで入力された値を取得できます。これにより、ユーザーインターフェースの状態を動的に更新し、インタラクティブなReactアプリを作ることが可能になります。

また、ReactではpreventDefault()やstopPropagation()といったメソッドを活用することで、意図しない画面遷移やイベントの伝播を防ぐことができます。特にフォーム送信やリンククリックなど、デフォルト動作が発生する場面でこれらを使うことは非常に重要です。さらに、onClickやonChangeなどのキャメルケースのイベント名を正しく書くことも、Reactでイベント処理を正確に動かすための基本です。

ここで紹介したサンプルプログラムのように、関数を別に定義してonClickやonChangeに渡す方法は、コードの可読性や保守性を高めるためにおすすめです。小規模な処理なら関数を直接書く方法でも問題ありませんが、複雑な処理や複数のイベント処理がある場合は、関数を分離することでコードが整理され、バグを防ぎやすくなります。

import React, { useState } from "react";

function App() {
  const [message, setMessage] = useState("");
  const [inputText, setInputText] = useState("");

  function handleClick(event) {
    alert("クリックされたイベントの種類: " + event.type);
    console.log("クリック位置: ", event.clientX, event.clientY);
    setMessage("ボタンがクリックされました！");
  }

  function handleChange(event) {
    setInputText(event.target.value);
    console.log("入力された値:", event.target.value);
  }

  return (
    <div>
      <button onClick={handleClick}>クリックしてみよう</button>
      <p>{message}</p>
      <input
        type="text"
        value={inputText}
        placeholder="文字を入力してください"
        onChange={handleChange}
      />
      <p>入力内容: {inputText}</p>
    </div>
  );
}

export default App;

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

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

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

Reactのeventオブジェクトとは何ですか？

Reactのeventオブジェクトとは、ボタンのクリックや入力フォームの操作など、ユーザーのイベントが発生したときに自動的に渡される情報のまとまりです。