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

生徒

「Reactでボタンをクリックしたときに、何か動作させるにはどうしたらいいですか？」

先生

「ReactではonClickというイベントを使って、クリックされたときの処理を実行できますよ。」

生徒

「イベントって難しそう……どんなふうに書くんですか？」

先生

「それじゃあ、Reactでイベントを使う基本の書き方を見ていきましょう！」

1. Reactでイベントを使うとは？

React（リアクト）では、ボタンをクリックしたり、マウスを動かしたり、キーボードを押したときに処理を実行したいとき、イベントという仕組みを使います。

中でも一番よく使うのがonClickイベントです。これは「クリックされたときに何かする」という意味です。

2. JSXでonClickイベントを使う基本の書き方

それでは、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;

（画面に「こんにちは！」と表示され、ボタンを押すと「ボタンがクリックされました！」に変わります）

このように、buttonタグの中にonClickという属性をつけて、その中に実行したい処理を{}で囲って書きます。

3. 関数を使ってイベント処理を分ける書き方

さきほどのコードでは、クリック時の処理をその場で書きましたが、別の関数にまとめることもできます。


import React, { useState } from "react";

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

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

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

export default App;

（画面に「こんにちは！」と表示され、ボタンを押すと「クリックされました！」に変わります）

このようにすることで、コードが読みやすくなり、複数の場所で同じ処理を使いたいときにも便利です。

4. 他にもあるReactのイベント一覧

ReactにはonClickのほかにも、いろいろなイベントがあります。

onChange：入力欄の文字が変わったとき
onSubmit：フォームを送信したとき
onMouseOver：マウスが乗ったとき
onKeyDown：キーが押されたとき

これらのイベントもonClickと同じように書くことができます。覚えておくと便利です。

5. よくあるミスと注意点

イベントを書くときに間違えやすいポイントも紹介しておきます。

中かっこ（{}）で関数を書くのを忘れてしまう
関数の()をつけてしまい、すぐに実行されてしまう

たとえば次のように書いてしまうと、ページが表示された瞬間に実行されてしまいます。


<button onClick={handleClick()}>NGな例</button>

正しくはonClick={handleClick}と、()なしで関数を渡すようにしましょう。

6. onClickの中で複数の処理をしたいとき

onClickの中で複数の処理をしたいときは、{() => { ～ }}のように波かっこで囲って書くことができます。


<button onClick={() => {
  console.log("クリックされました！");
  alert("表示テスト");
}}>
  ボタン
</button>

このように、複数の命令をまとめて書くこともできます。

まとめ

Reactのイベント記述方法を振り返ろう

この記事では、Reactにおけるイベント記述方法、とくに初心者が最初に学ぶことになる onClickイベントの使い方を中心に解説してきました。 Reactでは、HTMLとよく似た見た目のJSXを使って画面を作りますが、イベントの書き方にはJavaScriptらしい考え方がしっかりと組み込まれています。そのため、単にボタンを配置するだけでなく、「クリックされたときに何を実行するのか」を明確に意識することが重要になります。

onClickは「ユーザーが操作した瞬間に処理を実行する」ための基本的な仕組みであり、 Reactアプリケーションでは欠かせない存在です。ボタンのクリック、リンクの操作、画面上のアクションなど、ユーザーとのやり取りの多くはイベントを通して実現されています。その中でもonClickは最も使用頻度が高く、 Reactのイベント処理を理解する第一歩と言えるでしょう。

関数としてイベント処理を書く理由

記事の中では、onClickの中に直接処理を書く方法と、別の関数にまとめてから呼び出す方法の両方を紹介しました。小さなサンプルであれば直接書いても問題ありませんが、実際の開発では処理が複雑になることが多いため、 イベント処理を関数として定義する書き方がよく使われます。こうすることで、コードの見通しが良くなり、どこで何が起きているのかを把握しやすくなります。

また、同じイベント処理を複数のボタンで使い回したい場合や、条件によって処理内容を変えたい場合にも、関数として切り出しておくことで柔軟に対応できます。 Reactでは「見た目」と「動き」を整理して考えることが大切なので、イベント処理を関数として管理する考え方は、今後コンポーネント分割や状態管理を学ぶ際にも役立ちます。

サンプルプログラムで理解を定着させる

ここで、onClickイベントと関数を組み合わせたシンプルなサンプルプログラムをあらためて確認してみましょう。状態を変更し、その結果を画面に反映させるという、 Reactらしい基本構造を意識した例です。


import React, { useState } from "react";

function EventSample() {
  const [text, setText] = useState("まだクリックされていません");

  const handleClick = () => {
    setText("ボタンがクリックされました");
  };

  return (
    <div>
      <h1>{text}</h1>
      <button onClick={handleClick}>
        クリック
      </button>
    </div>
  );
}

export default EventSample;

このように、onClickに関数名を渡すことで、ユーザーの操作に応じて状態が変化し、画面が自動的に更新されます。 ReactではDOMを直接操作する必要はなく、状態の変化をきっかけに画面が再描画される点が大きな特徴です。 onClickイベントは、その流れを体感できる非常に分かりやすい仕組みと言えます。

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

生徒

「onClickって、ただボタンを押したときの処理だと思っていましたが、状態と組み合わせることで画面が変わるのがよく分かりました。」

先生

「そうですね。Reactではイベントと状態がセットで動くことが多いので、 onClickの理解はとても大切です。」

生徒

「関数にまとめて書く理由も納得できました。コードが読みやすくなって、何をしているのか分かりやすいです。」

先生

「その感覚を覚えておくといいですね。今後はonChangeやonSubmitなど、他のイベントも同じ考え方で扱えます。」

生徒

「まずはonClickをしっかり使いこなして、 Reactのイベント処理に慣れていきたいと思います。」

先生