TypeScriptでイベントの型定義を完全マスター！onClickやonChangeの書き方初心者ガイド

1. TypeScriptのイベント型とは何か？

1. TypeScriptのイベント型とは何か？

プログラミングの世界には、マウスでクリックしたりキーボードで文字を打ち込んだりする動作をイベントと呼びます。TypeScriptを使ってWebサイトを作る際、これらの動作に対して「これはクリックですよ」「これは入力ですよ」という情報を正確に伝える必要があります。これを型定義といいます。

なぜ型が必要かというと、TypeScriptが「ボタンをクリックしたときには、そのボタンの情報が手に入るはずだ」ということを事前にチェックしてくれるからです。もし型を指定しないと、パソコンは「何が起きるかわからないので、怖くて処理を進められません」とエラーを出してしまいます。初心者の方は、まず「イベントには名前をつけてあげる必要がある」と覚えておきましょう。

特にReactやNext.jsという道具を使って開発する場合、Reactが用意してくれている専用の型（React.MouseEventなど）を使うのが一般的です。これを使うことで、入力された値が数字なのか文字なのかを厳密に区別でき、プログラムのミスを劇的に減らすことができます。

2. クリックイベント（onClick）に型をつける方法

2. クリックイベント（onClick）に型をつける方法

一番よく使うのが、ボタンを押したときに動くonClickイベントです。例えば、送信ボタンや保存ボタンなどがこれにあたります。このとき、TypeScriptではReact.MouseEventという型を使用します。

MouseEventとは、その名の通り「マウスによるイベント」という意味です。クリックはマウスで行うものなので、この名前がついています。具体的な書き方を見てみましょう。まずはボタンをクリックしたときにメッセージを出すシンプルな例です。

import React from 'react';

export const ClickButton = () => {
  // handleClickという名前の関数を作ります
  // 引数のeに、マウスイベントの型を指定します
  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
    alert("ボタンがクリックされました！");
  };

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

ここで登場したHTMLButtonElementというのは、「このイベントはHTMLのボタン要素から発生したものですよ」という補足情報です。これをつけることで、ボタン特有の機能（例えば、ボタンを無効化するなど）にアクセスしやすくなります。パソコンを触ったことがない方でも、「ボタンのときはこれ！」というセットで覚えてしまえば大丈夫です。

3. 入力フォーム（onChange）の型定義を理解する

3. 入力フォーム（onChange）の型定義を理解する

次に重要なのが、文字を入力する場所（テキストボックス）などで使われるonChangeイベントです。ユーザーがキーボードで文字を打つたびに発生するイベントです。この場合は、React.ChangeEventという型を使います。

ChangeEventは「中身が変化したときのイベント」という意味です。テキストボックスに文字が入って、中身が書き換わったことを表しています。以下の例では、入力された文字をリアルタイムで表示する仕組みを作っています。

import React, { useState } from 'react';

export const TextInput = () => {
  const [text, setText] = useState("");

  // 文字が入力されるたびに動く関数
  // HTMLInputElementは「入力欄」という意味です
  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setText(e.target.value);
  };

  return (
    <div>
      <input type="text" onChange={handleChange} />
      <p>入力された文字：{text}</p>
    </div>
  );
};

注目してほしいのはe.target.valueという部分です。これは「イベントが発生した対象（target）の中身（value）」を指しています。型をしっかりつけておくことで、このvalueが必ず「文字列（文字の集まり）」であることをTypeScriptが保証してくれます。これにより、間違えて数字として計算してしまうようなミスを防ぐことができます。

4. フォームの送信（onSubmit）を制御する型

4. フォームの送信（onSubmit）を制御する型

お問い合わせフォームなどで、最後に「送信」ボタンを押したときの動きを制御するのがonSubmitイベントです。これにはReact.FormEventという型を使います。

Webページでは、送信ボタンを押すとページが勝手に再読み込み（リフレッシュ）されてしまう性質があります。最近のアプリでは、ページを切り替えずに処理を行うのが主流なので、その勝手な動きを止める必要があります。そこで使われるのがe.preventDefault()という命令です。

import React from 'react';

export const MyForm = () => {
  // フォーム全体のイベントなのでFormEventを使います
  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    // ページが勝手に更新されるのを防ぐおまじない
    e.preventDefault();
    console.log("フォームが送信されました");
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" placeholder="名前を入力" />
      <button type="submit">送信する</button>
    </form>
  );
};

このように、イベントごとに適した型（MouseEvent, ChangeEvent, FormEvent）を選ぶことが、TypeScriptでのフロントエンド開発の基本となります。初心者の方は最初は戸惑うかもしれませんが、HTMLのタグ名（button, input, form）とセットで考えると整理しやすくなります。

5. 型推論を活用した賢い書き方

5. 型推論を活用した賢い書き方

実は、いつも必ず型を自分で書かなければいけないわけではありません。TypeScriptには型推論という、前後の文脈から自動的に型を予想してくれる便利な機能があります。

例えば、関数の定義をHTMLの中に直接書く場合、TypeScriptは「あ、これはonClickの中に書かれているからマウスイベントだな」と自動で判断してくれます。これを「インラインで書く」と言ったりします。初心者のうちは、エラーが出たときだけ型を詳しく書き、慣れてきたらこの自動機能に任せるのも一つの手です。

import React from 'react';

export const SimpleButton = () => {
  return (
    // 関数の引数eにカーソルを合わせると、自動で型がついているのがわかります
    <button onClick={(e) => console.log(e.clientX)}>
      座標を表示
    </button>
  );
};

この例では、関数の外側に型を書いていませんが、エラーになりません。これはTypeScriptが賢いからです。しかし、大規模な開発や、関数を別の場所に分けて書くときは、これまで説明してきたようにハッキリと型を書いてあげるのが親切なプログラミングとされています。

6. ジェネリクスとは？型の後ろにあるカッコの正体

6. ジェネリクスとは？型の後ろにあるカッコの正体

これまでの説明で、React.MouseEvent<HTMLButtonElement>のように、< ＞という記号が出てきましたね。これはプログラミング用語でジェネリクスと呼ばれます。日本語では「総称型」と言いますが、難しく考える必要はありません。

例えるなら、イベント型は「飲み物のカップ」のようなものです。カップだけでは、中身がコーヒーなのかコーラなのかわかりません。そこで、< ＞の中に「中身はコーヒーです」と書くことで、中身を確定させているのです。<HTMLButtonElement>と書けば、「このイベントの発生源はボタンですよ」と中身を詳しく指定していることになります。

もしこれがセレクトボックス（選択肢から選ぶもの）なら<HTMLSelectElement>、画像なら<HTMLImageElement>になります。発生源に合わせて、この中身を書き換えるだけで、色々な要素に対応できるようになります。一見難しそうに見える記号ですが、実は「より詳しく説明するためのメモ」のような役割を持っているのです。

7. よく使うイベント型の一覧表

7. よく使うイベント型の一覧表

最後に、よく使う型と対応するHTML要素を整理しておきましょう。これを辞書のように使って、コードを書いてみてください。

最初は全部を暗記する必要はありません。「何かエラーが出たらこの表を見る」というスタイルで学習を進めていけば、自然と指が覚えるようになります。パソコン操作に不慣れな方でも、コピーして貼り付けながら試すことで、少しずつTypeScriptの便利さを実感できるはずです。