React＋Typescriptでクリックイベントを使用する方法を解説

ReactとTypeScriptでのフロントエンド開発では、ユーザーとのやりとりが重要な要素となります。
そのため、クリックやマウスオーバーなどのイベント処理の理解と活用は必須スキルと言えるでしょう。

今回の記事ではReactとTypeScriptでのイベントの制御について解説します。

初心者向け！TypeScriptとReactのuseState活用ガイド

TypeScriptとReact HooksのuseStateの活用方法を初心者でも理解できるよう解説！状態管理の基本を掴もう

gizanbeak.com

この記事を読むことで得られること

Reactではユーザーインタラクションを扱うイベントハンドラについて解説し、Typescriptでは型の安全性を保つためのイベントの型について詳しく説明します。
そして、最後にイベントの制御について見ていきます。

この記事を読むことでReact + TypeScriptのイベントハンドラへの理解が深まり、より洗練されたコードを書くための知識が得られます。

イベントハンドラの基本

まず最初に、Reactのイベントハンドラについて見ていきましょう。

イベントハンドラとは、特定のイベント（クリックやマウス移動など）が起きた時に実行される関数 のことです。

これをReactコンポーネントで作成すると以下のようになります。

const MyButton = () => {
  const handleClick = () => {
    console.log('クリック！');
  };

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

このコードでは、ユーザーがボタンをクリックしたときにブラウザのコンソールに クリック！ というメッセージを表示するイベントハンドラ（handleClick）を設定しています。

Typescriptでのクリックイベントの型指定

次に、Typescriptを使ってクリックイベントの型指定を見ていきましょう。

Typescriptは型安全性を保つために使用され、それが特にイベントハンドラで有用な理由となります。
Typescriptでは次のようにイベントハンドラ内でのイベントの型を指定することが可能です。

const MyButton = () => {
  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
    console.log('クリック！');
  };

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

この例では、React.MouseEvent<HTMLButtonElement> という型をイベントハンドラの引数として設定しました。

これにより、イベントオブジェクトのすべてのプロパティとメソッドが 型安全にアクセス できるようになります。
これがTypescriptの強力な特徴の一つです！

イベント制御

最後にReactでのイベントの制御方法について解説します。

これはクリックイベントだけでなく多くのブラウザイベントに共通です。
例えば、イベントが親要素へバブルアップしないようにする方法や、ブラウザのデフォルトのイベントを防ぐ方法などです。

const MyButton = () => {
  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
    event.preventDefault();
    console.log('クリック！');
  };

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

上記のコードでは event.preventDefault() を使用してブラウザのデフォルトイベントを防いでいます。

この場合にデフォルトのイベントはありませんが、リンクのクリックイベントやフォームの送信イベントなどのデフォルトのイベントが存在するケースでは非常に役立ちます。

event を React.MouseEvent<HTMLButtonElement> として定義できているため、preventDefault が型安全に実行できているわけですね。

TypeScriptで関数の型定義をする方法をわかりやすく解説

TypeScriptでの関数の型定義方法、typeを用いた事前型定義、ジェネリクスまで一挙に解説！

gizanbeak.com

まとめ

この記事を通してReactとTypescriptを使ったクリックイベントの取り扱いについて解説しました！

Reactのイベントハンドラの使い方、Typescriptの型の指定方法、そしてイベントの制御方はよく使われるので覚えておくと便利です。

Gizanbeak