1. フォーム入力が増えると何が大変か

フォームとは、名前やメールアドレス、年齢などを入力する画面のことです。入力欄が一つだけなら管理は簡単ですが、入力欄が増えるたびにStateを増やすと、コードが長くなり見づらくなります。まるで、メモ帳が何冊も机に散らばっているような状態です。そこで、複数の入力を一つにまとめる考え方が役立ちます。

2. 1つのStateでまとめて管理する考え方

複数の入力を一つのStateで管理するときは、オブジェクトという仕組みを使います。オブジェクトとは、名前と内容をセットで管理できる箱の集まりです。「名前はこれ」「メールはこれ」というように、一冊のノートに項目ごとに書くイメージです。

3. 最もシンプルな基本例

まずは、名前とメールアドレスを一つのStateで管理する例を見てみましょう。最初に空の入力欄を用意し、入力された内容をまとめて保存します。


import React, { useState } from "react";

function App() {
  const [form, setForm] = useState({
    name: "",
    email: ""
  });

  return (
    <div>
      <input
        type="text"
        placeholder="名前"
        onChange={(e) => setForm({ ...form, name: e.target.value })}
      />
      <input
        type="email"
        placeholder="メール"
        onChange={(e) => setForm({ ...form, email: e.target.value })}
      />
    </div>
  );
}

export default App;

（名前とメールアドレスを入力できます）

4. spread構文の意味をやさしく理解する

コードに出てくる三つの点は、spread構文と呼ばれます。これは「今ある内容を一度全部コピーする」という意味です。申込書に新しい項目を書き足すとき、すでに書いた内容を消さずに追加するのと同じです。これを使わないと、他の入力内容が消えてしまうので注意が必要です。

5. 入力欄が増えた場合の管理方法

入力欄が増えても、同じStateに項目を追加するだけで対応できます。電話番号や年齢などを追加しても、管理する箱は一つのままです。


import React, { useState } from "react";

function App() {
  const [form, setForm] = useState({
    name: "",
    email: "",
    age: ""
  });

  return (
    <div>
      <input
        type="text"
        placeholder="名前"
        onChange={(e) => setForm({ ...form, name: e.target.value })}
      />
      <input
        type="email"
        placeholder="メール"
        onChange={(e) => setForm({ ...form, email: e.target.value })}
      />
      <input
        type="number"
        placeholder="年齢"
        onChange={(e) => setForm({ ...form, age: e.target.value })}
      />
    </div>
  );
}

export default App;

（複数の入力欄を一つのStateで管理できます）

6. name属性を使ってコードを短くする

入力欄が多くなると、同じような処理を何度も書くことになります。そこで、name属性を使う方法があります。これは、入力欄に名前札を付けて、どの項目が変更されたかを自動で判断する仕組みです。


import React, { useState } from "react";

function App() {
  const [form, setForm] = useState({
    name: "",
    email: "",
    age: ""
  });

  const handleChange = (e) => {
    setForm({ ...form, [e.target.name]: e.target.value });
  };

  return (
    <div>
      <input name="name" placeholder="名前" onChange={handleChange} />
      <input name="email" placeholder="メール" onChange={handleChange} />
      <input name="age" placeholder="年齢" onChange={handleChange} />
    </div>
  );
}

export default App;

（一つの処理で全ての入力を管理できます）