1. Reactのフォーム処理とは何か？

Reactのフォーム処理とは、画面に表示された入力欄に文字を書いたり、ボタンを押したりした内容を、プログラムで受け取って使う仕組みのことです。たとえば名前入力、ログイン画面、検索ボックスなどは、すべてフォーム処理を使っています。

フォームとは「入力する場所」という意味です。紙のアンケートに名前を書くイメージをすると分かりやすいでしょう。 Reactでは、その入力内容をコンピューターが覚えて、あとで使えるようにします。

2. なぜReactではフォーム処理が重要なのか

Reactは画面の表示を管理する仕組みです。フォームで入力された内容も画面の一部なので、 Reactがしっかり管理する必要があります。入力された文字を覚えておかないと、ボタンを押したときに何も分からなくなってしまいます。

例えるなら、先生が黒板に書いた内容をノートに書き写すようなものです。ノートに書いておかないと、あとで思い出せません。Reactではその「ノート」が状態と呼ばれます。

3. useStateを使った基本的な入力フォーム

Reactのフォーム処理では、useStateという仕組みをよく使います。 useStateは「今の状態を覚える箱」のようなものです。入力された文字をこの箱に入れておくことで、いつでも取り出せます。


import React, { useState } from "react";

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

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

export default App;

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

4. onChangeとは何をしているのか

onChangeは「変わったときに動くスイッチ」です。キーボードで文字を一文字打つたびに反応します。 Reactでは、このタイミングで入力内容を受け取ります。

難しく感じる場合は、インターホンを想像してください。ボタンが押された瞬間に音が鳴るように、入力が変わった瞬間にReactが気づく仕組みです。

5. ボタンを使ったフォーム送信の考え方

フォームでは、入力するだけでなく「送信」もよく行います。 Reactではボタンが押されたときの動作を自分で決めます。これにより、入力内容を確認したり、画面表示を変えたりできます。


import React, { useState } from "react";

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

  const handleClick = () => {
    alert(text);
  };

  return (
    <div>
      <input
        value={text}
        onChange={(e) => setText(e.target.value)}
      />
      <button onClick={handleClick}>送信</button>
    </div>
  );
}

export default App;

（入力した文字が、ボタンを押すとアラートで表示されます）

6. 複数の入力欄を扱うフォーム

実際のフォームでは、入力欄が一つだけとは限りません。名前やメールアドレスなど、複数の情報を入力します。 Reactでは、それぞれを別の状態として管理します。


import React, { useState } from "react";

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

  return (
    <div>
      <input
        type="email"
        placeholder="メール"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
      />
      <input
        type="password"
        placeholder="パスワード"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
      />
    </div>
  );
}

export default App;

（それぞれの入力欄に文字を入れると、Reactが別々に内容を覚えます）