1. フォーム入力とStateの基本関係

Reactでフォームを作るとき、入力された文字や選択された値は、そのままでは保存されません。そこで使うのがStateです。

Stateは「画面の中で変わる情報を覚えておく箱」です。入力フォームでは、「今、何が入力されているか」をStateに入れて管理します。

たとえば、名前入力欄がある場合、「名前」というStateを作り、キーボードで文字を打つたびにそのStateを更新します。これを制御されたコンポーネントと呼びます。

例え：フォームは記入用紙、Stateはその内容を写し取るノートです。ノートに書いておけば、いつでも内容を確認できます。

2. なぜ型安全なフォーム管理が必要なのか

JavaScriptだけでもフォームは作れますが、文字と数値が混ざったり、想定外の値が入ったりしやすくなります。

TypeScriptを使うと、「この入力欄は文字だけ」「この入力は数値」といったルールを型で決められます。これが型安全という考え方です。

型安全なフォーム管理をすると、次のようなメリットがあります。

間違った型の入力処理にすぐ気づける
フォームが増えても管理しやすい
後から修正するときに安心できる

3. 文字入力フォームを型安全に管理する

まずは一番よく使う「文字入力」のフォームを見てみます。名前入力欄をStateで管理する基本形です。


import React, { useState } from "react";

function App() {
  const [name, setName] = useState<string>("");

  return (
    <div>
      <p>名前：{name}</p>
      <input
        type="text"
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
    </div>
  );
}

export default App;

（入力欄に文字を入れると、その内容が画面に表示されます）

ここではStateの型をstringにしています。これにより、「nameには文字しか入らない」というルールがはっきりします。

4. 数値入力フォームのState管理

年齢や個数など、数値を入力するフォームもよくあります。ただし、HTMLの入力欄から取得できる値は、基本的に文字です。

そのため、Stateの型はnumberにし、必要に応じて変換するのがポイントです。


import React, { useState } from "react";

function App() {
  const [age, setAge] = useState<number>(0);

  return (
    <div>
      <p>年齢：{age}</p>
      <input
        type="number"
        value={age}
        onChange={(e) => setAge(Number(e.target.value))}
      />
    </div>
  );
}

export default App;

（数字を入力すると、その数値が表示されます）

このようにStateの型をnumberにしておくと、文字が入るミスを防ぎやすくなります。

5. 複数の入力欄をまとめて管理する

フォームが増えると、Stateもたくさん必要になります。そこで便利なのが、オブジェクト型のStateです。

入力フォーム全体を1つのオブジェクトとして管理すると、整理しやすくなります。


type FormState = {
  name: string;
  age: number;
};

function App() {
  const [form, setForm] = useState<FormState>({
    name: "",
    age: 0
  });

  return (
    <div>
      <p>名前：{form.name}</p>
      <p>年齢：{form.age}</p>

      <input
        type="text"
        value={form.name}
        onChange={(e) =>
          setForm({ ...form, name: e.target.value })
        }
      />

      <input
        type="number"
        value={form.age}
        onChange={(e) =>
          setForm({ ...form, age: Number(e.target.value) })
        }
      />
    </div>
  );
}

export default App;

（名前と年齢を同時に管理できます）

ここではFormStateという型を作り、フォーム全体のルールをまとめています。これにより、項目が増えても型で管理できます。

6. チェックボックスや真偽値の管理

チェックボックスは「オンかオフか」という状態なので、真偽値で管理します。TypeScriptではboolean型を使います。


function App() {
  const [agree, setAgree] = useState<boolean>(false);

  return (
    <div>
      <p>同意：{agree ? "はい" : "いいえ"}</p>
      <input
        type="checkbox"
        checked={agree}
        onChange={(e) => setAgree(e.target.checked)}
      />
    </div>
  );
}

（チェックを入れると「はい」に変わります）

checkedを使うことで、真偽値とフォームの状態を正しく結びつけられます。