Reactにおけるイベント処理の基本を初心者向けに解説

1. Reactにおけるイベント処理とは？

1. Reactにおけるイベント処理とは？

Reactのイベント処理とは、ユーザーの操作（クリックや文字入力など）に反応して関数を実行する仕組みのことです。例えば、ウェブサイトのボタンを押すとメッセージが変わったり、入力欄に文字を入れると画面に表示されたりします。

通常のHTMLでもonclickという属性を使ってボタンのクリックイベントを処理できますが、ReactではonClickのようにキャメルケース（小文字と大文字を組み合わせた書き方）でイベントを指定します。これがReactでの大きな特徴のひとつです。

2. ボタンクリックイベントを処理する基本例

2. ボタンクリックイベントを処理する基本例

それではReactで最もよく使われる「ボタンクリックイベント」の基本的な書き方を見てみましょう。以下の例では、ボタンを押すと表示されるメッセージが変わります。

import React, { useState } from "react";

function App() {
  const [message, setMessage] = useState("こんにちは！");

  return (
    <div>
      <h1>{message}</h1>
      <button onClick={() => setMessage("ボタンがクリックされました！")}>
        クリックしてみよう
      </button>
    </div>
  );
}

export default App;

上記のプログラムでは、useStateという仕組みを使って、画面に表示する文字を管理しています。そして、onClickに関数を指定することで、クリック時にメッセージが変化するようになっています。

3. イベント名の書き方に注意しよう

3. イベント名の書き方に注意しよう

Reactではイベント名を必ずキャメルケースで書く必要があります。例えばクリックならonClick、入力ならonChange、フォーム送信ならonSubmitです。HTMLのonclickやonchangeのようにすべて小文字で書くと正しく動作しないので注意しましょう。

4. イベント処理で関数を分けて書く方法

4. イベント処理で関数を分けて書く方法

先ほどの例ではボタンの中に直接関数を書きましたが、処理をわかりやすくするために関数を分けて書く方法もよく使われます。

import React, { useState } from "react";

function App() {
  const [message, setMessage] = useState("最初のメッセージ");

  function handleClick() {
    setMessage("クリックされました！");
  }

  return (
    <div>
      <h1>{message}</h1>
      <button onClick={handleClick}>ボタンを押す</button>
    </div>
  );
}

export default App;

このように関数を分けると、処理内容が増えてもコードが整理されて読みやすくなります。

5. 入力イベントの処理（onChange）

5. 入力イベントの処理（onChange）

Reactではボタンクリック以外にも入力イベントを扱うことができます。たとえば、テキストボックスに入力した内容をリアルタイムで画面に表示することもできます。

import React, { useState } from "react";

function App() {
  const [text, setText] = useState("");

  function handleChange(event) {
    setText(event.target.value);
  }

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

export default App;

event.target.valueは、入力されたテキストを取得する方法です。Reactのイベント処理では、こうしたeventオブジェクトを使うことで入力内容やクリックした要素の情報を取り出せます。

6. 覚えておきたいポイント

6. 覚えておきたいポイント

• Reactのイベント処理はキャメルケース（例：onClick, onChange）で書く
• イベントに反応させたい処理は関数で定義し、イベント属性に渡す
• eventオブジェクトを使うと入力内容やクリックした要素の情報を取得できる
• 関数を直接書く方法と、関数を分けて書く方法の2種類がある

まとめ

まとめ

今回の記事では、Reactにおけるイベント処理の基本について詳しく解説しました。Reactのイベント処理は、ユーザーの操作に応じて動的に画面を更新するための重要な仕組みです。HTMLの従来のonclickやonchangeとは異なり、Reactではキャメルケースで記述することが必要で、onClickやonChange、onSubmitなどの形で書きます。また、イベント処理に関数を直接書く方法と、別に関数を定義して渡す方法の二つのパターンがあり、用途や可読性に応じて使い分けられます。さらに、useStateを利用することで、ボタンのクリックや入力欄への文字入力に応じて状態を更新し、画面にリアルタイムで反映させることができます。

Reactのイベントオブジェクトであるeventは、ユーザーが操作した要素の情報や入力内容を取得するために不可欠です。event.target.valueを使えば、入力欄に入力されたテキストを簡単に取得でき、フォームの送信や入力チェックなど様々な場面で活用できます。これにより、ユーザーインタラクションを意識したモダンなウェブアプリケーションを構築できるようになります。さらに、関数を分けて書くことで、コードの見通しが良くなり、後から機能を追加したり変更したりする際も管理しやすくなります。

import React, { useState } from "react";

function App() {
  const [message, setMessage] = useState("こんにちは！");
  const [inputText, setInputText] = useState("");

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

  function handleChange(event) {
    setInputText(event.target.value);
  }

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

export default App;

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

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

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

Reactでイベント処理とは何ですか？

Reactにおけるイベント処理とは、ユーザーの操作（クリック・入力・キー操作など）に反応して、プログラムの処理を実行する仕組みのことです。