1. Reactのフォーム入力とは何か

フォーム入力とは、名前やメールアドレスなどを入力する画面のことです。 Webサイトでよく見る入力欄は、ほとんどがフォームです。 Reactでは、この入力欄の値をJavaScriptで管理します。入力された文字を覚えておく仕組みを使うことで、画面とデータを同期させます。初心者のうちは、入力欄一つでもコードが長く感じるかもしれません。

2. フォーム入力をそのまま書いた場合の問題点

フォームをそのまま作ると、inputタグと状態管理のコードを何度も書くことになります。名前用、メール用、パスワード用と増えるたびに、似たコードが増えていきます。これは、同じ説明を何回もノートに書くようなものです。修正が必要になったとき、すべて直さなければならず、ミスも起きやすくなります。


import { useState } from "react";

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

  return (
    <div>
      <input value={name} onChange={(e) => setName(e.target.value)} />
    </div>
  );
}

export default App;

3. フィールドコンポーネントという考え方

フィールドコンポーネントとは、入力欄を一つの部品として切り出したものです。例えるなら、文房具セットの中の「ペン」だけを取り出して使う感覚です。入力欄の見た目と動きをまとめておくことで、どこでも同じように使えます。 Reactでは、これをコンポーネント分割と呼びます。


function InputField({ value, onChange }) {
  return <input value={value} onChange={onChange} />;
}

export default InputField;

4. フィールドコンポーネントを使って再利用する方法

作成したフィールドコンポーネントは、親コンポーネントから使います。 valueやonChangeを渡すことで、入力された内容を親が管理できます。これは、親がメモ帳を持っていて、子がそこに書き込むイメージです。同じInputFieldを使い回せるため、コード量が一気に減ります。


import { useState } from "react";
import InputField from "./InputField";

function App() {
  const [email, setEmail] = useState("");

  return (
    <InputField value={email} onChange={(e) => setEmail(e.target.value)} />
  );
}

export default App;

（入力欄に文字を入れると、その内容がReactの状態として保存されます）

5. label付きのフィールドコンポーネントにする

実際のフォームでは、入力欄の上に説明文があることが多いです。 labelも含めてコンポーネント化すると、より実用的になります。表示する文字を外から指定できるようにすれば、汎用的に使えます。これにより、見た目の統一もしやすくなります。


function LabeledInput({ label, value, onChange }) {
  return (
    <div>
      <label>{label}</label>
      <input value={value} onChange={onChange} />
    </div>
  );
}

export default LabeledInput;