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

生徒

「先生、Reactでフォームを作るときにTypeScriptを使うと便利って聞いたんですが、どういうことですか？」

先生

「いい質問だね。Reactではフォームイベントを扱うことが多いんだけど、TypeScriptを使うとそのイベントに型をつけられるから、安心してコードを書けるんだよ。」

生徒

「型をつけるっていうのは、具体的にどんな感じなんですか？」

先生

「例えば、テキストボックスやボタンを操作したときに起きるイベントを正しく扱うために、ChangeEventやFormEventといった型を指定するんだ。実際の書き方を見てみよう！」

1. Reactでフォームイベントを扱う基本

フォームイベントとは、ユーザーが入力したり送信したりするときに発生する動作のことです。例えば「テキストボックスに文字を入力する」「送信ボタンをクリックする」といったものです。

TypeScriptを使うと、こうしたイベントに「型」をつけることができます。型とは「どんなデータが入るのかをあらかじめ決めるルール」のことです。これにより予期しないエラーを防ぎやすくなります。

2. 入力イベント（ChangeEvent）の型定義

テキストボックスなどの入力欄で使うのはChangeEvent<HTMLInputElement>という型です。この型を指定することで、入力欄に関する正しいプロパティに安全にアクセスできます。


import React, { useState, ChangeEvent } from "react";

function FormExample() {
  const [text, setText] = useState("");

  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
    setText(e.target.value);
  };

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

export default FormExample;

（入力欄に文字を入力すると、下に「入力された文字: ○○」とリアルタイムで表示されます）

このときe.target.valueで文字列を安全に取り出せるのは、ChangeEvent<HTMLInputElement>で型を明示しているからです。

3. フォーム送信イベント（FormEvent）の型定義

フォーム全体を送信するイベントにはFormEvent<HTMLFormElement>を使います。これにより、送信処理を正しく制御できます。


import React, { useState, FormEvent } from "react";

function SubmitExample() {
  const [name, setName] = useState("");

  const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    alert("送信された名前: " + name);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
      <button type="submit">送信</button>
    </form>
  );
}

export default SubmitExample;

（名前を入力して送信ボタンを押すと「送信された名前: ○○」とアラートが表示されます）

ここでe.preventDefault()を呼ぶのは、ブラウザがページをリロードしないようにするためです。フォーム送信イベントはそのままだと画面をリセットしてしまうので注意しましょう。

4. セレクトボックスやチェックボックスのイベント

セレクトボックスやチェックボックスでもChangeEventを使います。ただし対象がHTMLSelectElementやHTMLInputElement（type="checkbox"）に変わります。


import React, { useState, ChangeEvent } from "react";

function SelectExample() {
  const [option, setOption] = useState("A");

  const handleChange = (e: ChangeEvent<HTMLSelectElement>) => {
    setOption(e.target.value);
  };

  return (
    <div>
      <select value={option} onChange={handleChange}>
        <option value="A">A</option>
        <option value="B">B</option>
      </select>
      <p>選択された値: {option}</p>
    </div>
  );
}

export default SelectExample;

（プルダウンでAかBを選ぶと「選択された値: A」または「選択された値: B」と表示されます）

このように、イベントの対象となる要素ごとに適切な型を指定するのがTypeScriptの基本です。