第10回：フォーム入力を同期する！Controlled Components（制御コンポーネント）の仕組み

前回：条件分岐で表示を切り替える「条件付きレンダリング」の極意では、状況に応じてUIを出し分けるテクニックを学びました。

今回は、Webアプリの要である「入力フォーム」を攻略します。 Reactには 「制御コンポーネント（Controlled Components）」 という独特の考え方があります。これを知ると、入力されたデータをReactが完全に支配し、リアルタイムでバリデーション（入力チェック）をかけたり、送信データを加工したりすることが自由自在になります。

1. 「制御コンポーネント」って何？
2. フォームを支配する「3つのステップ」
3. 【実践】リアルタイム入力フォーム
1. App.jsx（最小構成版）
4. コードの解説（JavaScript & React）
1. JavaScriptのポイント
2. Reactのポイント
5. 2026年の学び：なぜ「制御」する必要があるのか？
1. 今回のまとめ
2. 次回予告：ついに登場！副作用の番人

1. 「制御コンポーネント」って何？

普通のHTMLのフォームは、入力された文字を「ブラウザ自身」が記憶しています。しかし、Reactではそのやり方はおすすめしません。

HTML標準： ブラウザが勝手に文字を覚えている。
React流： すべての文字を「State（状態）」に持たせ、Reactが管理する。

入力欄の値をReactのStateと「同期」させることで、プログラム側から「今、何が入力されているか」を常に把握できるようにします。これが「制御（コントロール）されている」状態です。

2. フォームを支配する「3つのステップ」

第2回の環境構築や第6回のuseStateで学んだ知識を組み合わせて、以下の手順で実装します。

Stateを用意する： 入力値を保存する場所を作る。
valueに紐付ける： inputタグの値をStateに固定する。
onChangeで更新する： キーを叩くたびにStateを書き換える。

3. 【実践】リアルタイム入力フォーム

ユーザーが名前を入力すると、その場で文字数をカウントし、空欄のときは送信ボタンを押せないようにする「賢いフォーム」を作ってみましょう。第2回の環境で作成した App.jsx を書き換えてください。

App.jsx（最小構成版）

JavaScript

import React, { useState } from 'react';

export default function App() {
  // 1. 入力値を管理するState（初期値は空文字）
  const [name, setName] = useState("");

  // 送信時の処理
  const handleSubmit = (e) => {
    e.preventDefault(); // JavaScriptのポイント：ページのリロードを防ぐ
    alert(`送信されました： ${name}`);
  };

  return (
    <div style={{ textAlign: 'center', marginTop: '50px' }}>
      <h1>お名前入力フォーム</h1>

      <form onSubmit={handleSubmit}>
        {/* 2. valueをStateに固定し、3. onChangeで同期する */}
        <input 
          type="text"
          value={name}
          onChange={(e) => setName(e.target.value)}
          placeholder="名前を入力..."
        />
        
        {/* [第9回]の知識：条件付きでボタンを無効化（disabled） */}
        <button type="submit" disabled={name.length === 0}>
          送信する
        </button>
      </form>

      {/* リアルタイムに文字数を表示 */}
      <p>現在の文字数： {name.length} 文字</p>
      
      {name.length > 10 && (
        <p style={{ color: 'red' }}>※10文字以内で入力してください</p>
      )}
    </div>
  );
}

CodeSandboxで制御コンポーネントを体験する

4. コードの解説（JavaScript & React）

JavaScriptのポイント

e.preventDefault(): HTMLの form は送信ボタンを押すとページをリロードしようとします。React（SPA）ではリロードさせたくないため、この命令でブラウザの標準動作をキャンセルします。
string.length: 文字列の長さを取得するJavaScriptの基本プロパティです。これを使ってバリデーションを行います。

Reactのポイント

value={name}: これがあるおかげで、もしプログラム側から setName("") を実行すれば、入力欄の中身もパッと空になります。
データの流れ: 「入力 → onChange発動 → State更新 → 再描画 → inputのvalueが変わる」というサイクルが爆速で回っています。