【React】onClickの仕組みと実例を徹底的に解説

（最終更新日：2023年11月）

✔このような方へ向けて書かれた記事となります

「ReactのonClickイベントについて理解を深めたい」
「ReactのonClickイベントの書き方を学びたい」
「onClickイベントの活用例を具体的に参照したい」

✔当記事を通じてお伝えすること

ReactのonClickイベントの概念
onClickイベントの実装方法とその応用
実際のonClickイベントの使用例

当記事では、ReactのonClickイペントの基本的な理解から、詳細を交えてより深い応用まで取り扱います。

ぜひ最後までご覧いただき、ReactのonClickイベントの使い方をマスターしましょう。

筆者プロフィール

【現職】プロダクトマネージャー

【副業】ブログ（月間20万PV）/YouTube/Web・アプリ制作

「プログラミング × ライティング × 営業」の経験を活かし、30後半からのIT系職へシフト。現在はプロダクトマネージャーとして、さまざまな関係者の間に入り奮闘してます。当サイトでは、実際に手を動かせるWebアプリの開発を通じて、プログラミングはもちろん、IT職に必要な情報を提供していきます。

【当ブログで紹介しているサイト】

当サイトチュートリアルで作成したデモ版日報アプリ

Django × Reactで開発したツール系Webアプリ

✔人に見せても恥ずかしくないコードを書こう

「リーダブルコード」は、わかりやすく良いコードの定義を教えてくれる本です。

見るからにきれいなコードの書き方
コードの分割方法
変数や関数の命名規則

エンジニアのスタンダートとすべき基準を一から解説しています。

何回も読むのに値する本なので、ぜひ手にとって読んでみてください。

リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック

created by Rinker

ReactでonClickを理解するための前提知識

当記事では、ReactにおけるonClickイベント処理について詳しく解説します。

これを理解することで、ユーザーのインタラクションに応じた動的なUIを実装が可能です。

Reactとは？
onClickイベント処理の重要性

Reactとは？

Reactは、Facebook（現Meta社）が開発し、開発者コミュニティによって保守されているJavaScriptライブラリです。

ユーザーインターフェースの構築に特化しており、コンポーネントベースのアーキテクチャを採用しています。

再利用可能なUIパーツを作成し、それらを組み合わせて複雑なユーザーインターフェースを構築できるのが特徴です。

Fun Tools

ReactとDjangoで作成したWebアプリです。便利なツールを揃えているので、ぜひ立ち寄ってみてください。作り方はブログで紹介しています！

onClickイベント処理の重要性

onClickイベントは、ユーザーが特定の要素（ボタン、リンクなど）をクリックしたときに発生するもの。

ユーザーのアクションに対して何らかの反応を返すことが可能です。

ページ遷移
モーダルの表示
データの更新

したがって、onClickイベントは、ユーザーとアプリケーションとの対話を可能にする重要な概念と言えるでしょう。

onclick基礎知識

次に、onClickイベントの基本的な理解を深めるために、その概要とReactでの特性を説明します。

onclickイベントの概要
Reactのonclickの特性

onclickイベントの概要

onclickは、特定のHTML要素がクリックされたときに発生するイベントのこと。

JavaScriptでは、このイベントを使用して、クリックアクションに対するレスポンスを定義します。

以下は、基本的なonclickイベントの使用例です。

<button onclick="alert('Hello, World!')">Click me!</button>

上記の例では、ボタンがクリックされると、アラートダイアログが表示されます。

Reactのonclickの特性

Reactでは、オリジナルのDOMイベントをラップしたSyntheticEvent（合成イベント）を使用します。

これにより、異なるブラウザで同じ動作をするように、イベントが正規化されるのです。

Reactのonclickは全て小文字であり、JavaScriptの関数を指定します。

以下は、その一例です。

<button onClick={() => alert('こちらはReactでの例です。')}>クリックしてください</button>

この例では、ReactのJSX内でボタン要素にonClickプロパティを設定しています。

SyntheticEvent(合成イベント)解説

ここではReactにおけるonclickイベントがどのような仕組みで動作しているのかを理解するため、合成イベントについて説明します。

合成イベントとは？
合成イベントのメリット

合成イベントとは？

Reactのイベントシステムは、W3C（World Wide Web Consortium）のイベントAPIをラップしたもので、合成イベントと呼びます。

すなわち、Reactでイベントを扱う際には、ブラウザ固有のイベントシステムではなく、React独自の合成イベントシステムをとおしておこなうのです。

<button onClick={(event) => console.log(event)}>Click me!</button>

上記の例では、ボタンがクリックされるとconsole.log(event)が実行され、クリックイベントオブジェクトがコンソールに出力されます。

このeventはブラウザ固有のイベントではなく、Reactの合成イベントオブジェクトです。

合成イベントのメリット

Reactの合成イベントは、ブラウザ間の挙動の違いを吸収し、一貫性のあるイベント処理を実現します。

開発者が異なるブラウザのイベント処理の違いについて心配せず、より集中してアプリケーションの開発に取り組めるようにするためです。

さらに、Reactはイベント委譲を用いて合成イベントを効率的に管理しています。

個々の要素にイベントリスナーを追加するのではなく、ドキュメントのルートレベルでひとつのイベントリスナーを設定し、そこで発生したイベントを適切なReact要素にマッピングするという仕組みです。

これによりメモリ消費量を抑え、大量のイベントハンドラが登録された場合でもパフォーマンスを維持できます。

ReactでのonClickの具体的な使い方

合成イベントについて理解したところで、次にReactでのonClickイベントの具体的な使用方法について見ていきましょう。

インライン関数を用いたonclickの具体例
関数を引数として渡す方法
複数の関数呼び出しの例
onclickでの状態管理

インライン関数を用いたonclickの具体例

一般的なonclickの使用方法として、インライン関数を用いた例を考えてみましょう。

Reactコンポーネント内でインライン関数を定義し、それをonClickイベントハンドラに直接渡します。

function MyButtonComponent() {
  return (
    <button onClick={() => alert('Button is clicked!')}>
      Click me
    </button>
  );
}

この例では、ボタンがクリックされるとアラートメッセージが表示されます。

関数を引数として渡す方法

別の方法として、関数を事前に定義しておき、それをonClickイベントハンドラに引数として渡すことも可能です。

function MyButtonComponent() {
  const handleClick = () => alert('Button is clicked!');

  return (
    <button onClick={handleClick}>
      Click me
    </button>
  );
}

この例でも、ボタンがクリックされると同じアラートメッセージが表示されます。

複数の関数呼び出しの例

さらに、ひとつのonClickイベントハンドラで複数の関数を呼び出すことも可能です。

function MyButtonComponent() {
  const alertMessage = () => alert('Button is clicked!');
  const logMessage = () => console.log('Button is clicked!');

  return (
    <button onClick={() => { alertMessage(); logMessage(); }}>
      Click me
    </button>
  );
}

この例では、ボタンがクリックされるとアラートメッセージが表示され、同時にコンソールにもメッセージが出力されます。

onclickでの状態管理

最後に、ReactのuseStateフックを使って、onclickイベントでコンポーネントの状態を管理する例を見てみましょう。

import React, { useState } from 'react';

function MyButtonComponent() {
  const [count, setCount] = useState(0);

  return (
    <button onClick={() => setCount(count + 1)}>
      Clicked {count} times
    </button>
  );
}

この例では、ボタンがクリックされるたびにカウント数が1増えます。

具体的なイベントハンドラの使用方法

こちらでは、Reactでのイベントハンドラの具体的な使用方法について、具体的なコードを交えながら説明します。

メソッドのバインドについて
よく使うイベントハンドラ一覧

メソッドのバインドについて

Reactでは、クラスコンポーネントを使用する場合、メソッドのバインドが重要な概念です。

クラスメソッドはデフォルトではコンポーネントのインスタンスにバインドされていないため、thisを正しく参照するためには明示的にバインドする必要があります。

以下は、コンストラクタでメソッドをバインドする例です。

class MyButtonComponent extends React.Component {
  constructor(props) {
    super(props);

    // メソッドのバインド
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    console.log('Button clicked!');
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        Click me
      </button>
    );
  }
}

ここでは、コンストラクタ内でhandleClickメソッドをバインドしています。

これにより、handleClickメソッド内でthisを正しく使用できます。

よく使うイベントハンドラ一覧

Reactでは多数のイベントハンドラが提供されており、それぞれ異なる種類のイベントに対応します。

以下は、よく使用されるイベントハンドラの一部です。

onClick: ユーザーが要素をクリックしたときに発火
onChange: フォームの入力が変更されたときに発火
onSubmit: フォームが送信されたときに発火
onMouseOver: マウスカーソルが要素の上に移動したときに発火
onKeyDown: キーボードのキーが押されたときに発火

各イベントハンドラは特定の目的に応じて選択し、利用します。

実践コーナー

ここでは、Reactのアプリケーションであるカウンターアプリを作成します。

onClickイベントがどのように利用されるかを確認してください。

このアプリケーションでは、ボタンをクリックすることで数字が増減するというシンプルな機能を持っています。

import React, { useState } from 'react';

function CounterApp() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me to increase
      </button>
      <button onClick={() => setCount(count - 1)}>
        Click me to decrease
      </button>
    </div>
  );
}

export default CounterApp;

上記のコードでは、ReactのuseStateフックを使用して状態を管理。

各ボタンのonClickイベントには、それぞれカウンターを増やす、または減らすための関数が設定されています。

このように、ReactでのonClickイベントは、ユーザーインタラクションとコンポーネントの状態の間の橋渡しとなり、ダイナミックなアプリケーションを構築するための重要な道具となります。