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

生徒

「Reactでボタンをクリックしたときに何か動かしたいんですが、どうすればいいですか？」

先生

「それなら、ReactのonClickイベントを使います。これはボタンがクリックされたときに処理を実行する仕組みです。」

生徒

「HTMLのonclickとどう違うんですか？」

先生

「Reactではキャメルケースで書く必要がある点が違います。onclickではなくonClickと書きます。小文字と大文字の組み合わせがReactの書き方のルールです。」

生徒

「なるほど、実際のコード例も見てみたいです。」

先生

「では基本の例を一緒に見てみましょう！」

1. onClickイベントの基本的な使い方

Reactでは、ボタンがクリックされたときに特定の関数を実行するには、onClick属性に関数を指定します。関数は無名関数でも名前付き関数でもOKです。


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に無名関数を渡して、クリックされたときにsetMessageで文字列を更新しています。

2. 関数を分けてonClickイベントを書く方法

クリックしたときの処理が長くなりそうな場合は、関数を別に定義するとコードが整理されて読みやすくなります。


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;

（最初は「最初のメッセージ」と表示され、ボタンを押すと「クリックされました！」に変わります）

この方法では、ボタンのonClickに直接関数を渡すのではなく、先に関数を定義しておき、その名前を指定しています。処理が複雑になっても整理して書くことができるため、大きなアプリケーションではこちらの方法がよく使われます。

3. onClickイベントで覚えておきたいポイント

Reactのイベントはキャメルケースで書く（例：onClick、onChange）
クリックしたときに実行する処理は関数として定義する
無名関数でも、事前に定義した関数でもどちらでも使える
複雑な処理は関数を分けて書くとコードが見やすくなる
イベントオブジェクトを使うことでクリックされた要素の情報を取得することも可能

これらの基本を押さえると、Reactでのボタンクリック処理を自在に扱えるようになります。onClickイベントはReactのユーザー操作を受け付ける基本中の基本なので、必ず理解しておきましょう。

4. onClickイベントで引数を渡す方法

ReactのonClickイベントでは、関数に引数を渡して処理を分けることもできます。たとえば、同じボタン処理でも、渡す値によって動きを変えたい場合に便利です。無名関数を使って関数を呼び出すことで、クリック時に任意の値を渡せます。


import React, { useState } from "react";

function App() {
  const [message, setMessage] = useState("未選択");

  function handleClick(text) {
    setMessage(text);
  }

  return (
    <div>
      <h1>{message}</h1>
      <button onClick={() => handleClick("ボタンAが押されました")}>
        ボタンA
      </button>
      <button onClick={() => handleClick("ボタンBが押されました")}>
        ボタンB
      </button>
    </div>
  );
}

export default App;

（それぞれのボタンを押すと、対応したメッセージが表示されます）

このように引数を使うことで、同じ関数を再利用しながら柔軟なイベント処理が可能になります。ボタンの数が増えてもコードを整理しやすくなる点が大きなメリットです。

5. onClickイベントとイベントオブジェクトの基本

onClickイベントでは、クリックされたときの情報をイベントオブジェクトとして受け取ることができます。このオブジェクトには、クリックされた要素やマウスの状態など、さまざまな情報が含まれています。


import React from "react";

function App() {
  function handleClick(event) {
    console.log(event.target);
    alert("ボタンがクリックされました");
  }

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

export default App;

（クリックするとアラートが表示され、コンソールに要素情報が出力されます）

イベントオブジェクトを使うことで、どの要素がクリックされたかを判別したり、入力フォームと組み合わせて高度な処理を行ったりすることができます。基本を理解しておくと、応用の幅が一気に広がります。

6. onClickイベントを使う際のよくある注意点

onClickイベントはとても便利ですが、初心者がつまずきやすいポイントもいくつかあります。特に多いのが、関数の書き方や指定方法によるミスです。

onClick={handleClick()} のように関数を実行してしまう
キャメルケースを忘れて onclick と書いてしまう
処理を直接書きすぎてJSXが読みにくくなる

onClickには関数そのものを渡すことが基本です。関数を実行した結果を渡してしまうと、画面表示時に処理が動いてしまうため注意が必要です。また、処理が増えてきたら関数を分けて整理することで、 Reactのコードを長く保守しやすくなります。

これらのポイントを意識することで、onClickイベントをより安全かつ正確に扱えるようになります。基本を丁寧に積み重ねることが、Reactを理解する近道と言えるでしょう。

まとめ

ReactにおけるonClickイベントの基本を振り返る

この記事では、ReactでonClickイベントを使う方法について、初心者の方でも理解しやすいように順を追って解説してきました。 Reactでは、ユーザーの操作に応じて画面の表示や動作を変えることが非常に重要であり、その中心となるのがイベント処理です。中でもonClickイベントは、ボタン操作をはじめとした多くの場面で使われる、Reactの基本中の基本と言える存在です。

HTMLではonclickのようにすべて小文字で書いていましたが、Reactでは必ずキャメルケースでonClickと記述します。この書き方の違いは、JSXがJavaScriptの文法をベースにしていることに由来しています。最初は細かい違いに感じるかもしれませんが、Reactではこのルールが徹底されているため、 onClickやonChangeなどのイベント名は必ず正しい大文字と小文字で覚えることが大切です。

状態管理とonClickイベントの関係

記事内のサンプルでは、useStateを使って状態を管理し、onClickイベントをきっかけにその状態を更新する流れを紹介しました。 Reactでは、画面の表示内容を直接書き換えるのではなく、状態を変更することで自動的に再描画が行われます。この仕組みにより、コードの見通しが良くなり、複雑な画面構成でも安定した動作を実現できます。

onClickイベントは、その状態変更を発生させる「きっかけ」として機能します。ボタンをクリックするたびに関数が呼び出され、その中で状態が更新されることで、ユーザーの操作に応じたインタラクティブな画面を作ることができます。この考え方は、Reactアプリケーション全体に共通する重要なポイントです。

サンプルプログラムで理解を深めよう

ここで、onClickイベントと状態管理の基本を組み合わせたサンプルプログラムをもう一度確認してみましょう。クリック操作によって表示が切り替わる、Reactらしいシンプルな例です。


import React, { useState } from "react";

function ClickSample() {
  const [message, setMessage] = useState("まだクリックされていません");

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

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

export default ClickSample;

このコードでは、ボタンがクリックされるたびにhandleClick関数が実行され、 setMessageを通じて状態が更新されます。その結果、画面に表示されるメッセージが自動的に切り替わります。 DOMを直接操作する必要がない点は、Reactの大きな特徴であり、 onClickイベントを通してその便利さを実感できるはずです。

onClickイベントを理解するメリット

onClickイベントを正しく理解すると、Reactでできることの幅が一気に広がります。単なるボタン操作だけでなく、フォーム送信、画面遷移、データの切り替えなど、さまざまなユーザー操作を自然な形で実装できるようになります。また、関数を分けて書く習慣を身につけることで、コードの再利用性や保守性も向上します。

今後、onChangeやonSubmitなど他のイベントを学ぶ際も、 onClickで身につけた考え方がそのまま活かせます。まずはonClickイベントを確実に使いこなせるようになることが、 React学習をスムーズに進めるための重要なステップです。

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

生徒

「onClickって、ただのクリック処理だと思っていましたが、状態と組み合わせることで画面全体の動きにつながるんですね。」

先生

「その通りです。Reactではイベントが状態変更のきっかけになり、画面の再描画へとつながっていきます。」

生徒

「関数を分けて書く理由もよく分かりました。後から見返したときに理解しやすそうですね。」

先生

「それは大事なポイントです。Reactでは読みやすいコードを書くことが、バグを減らし、開発を楽にしてくれます。」

生徒

「まずはonClickをしっかり使いこなして、 Reactの基本操作に慣れていきたいと思います。」