Reactでの入力フォームの基本：実務で役立つ書き方や活用方法を解説

フロントエンド開発•2025/1/28

はじめに

Reactでフォームを作成する際には、input要素の使い方がとても大切ですね。特に、ユーザーが入力したデータをどうやってコンポーネントの中で扱うかは、初心者の皆さんにとって最初の壁になりやすいのではないでしょうか。

フォームの入力ロジックをしっかり理解しておけば、ユーザー情報の管理やバリデーションなど、実務で必要になるさまざまな場面に応用できます。とはいえ、最初のうちは「どうやって値を取り出すのか」「どこでStateを管理すればいいのか」など迷うことが多いかもしれません。

そこでこの記事では、Reactのinput要素を使ったフォームの基本から、実務でも役立つ活用方法までを順序立てて解説していきます。必要となるポイントを具体例とともに紹介しますので、これからReactでフォームを扱いたい皆さんに役立つ内容になると思います。

この記事を読むとわかること

Controlled ComponentとUncontrolled Componentの基本的な違い
Reactでinput要素の値を管理する方法
フォームのイベント処理やState更新のポイント
実務での活用例と注意すべきポイント

ここで紹介する情報を理解すると、Reactアプリケーションでの基本的なフォーム構築がスムーズになるでしょう。

Reactでのフォームとinputの役割

Reactでは、ユーザーからの情報を取得するためにinput要素をよく使いますね。このとき、 State (状態)と連携させながら値を管理するかどうかで、アプローチが大きく分かれます。

値をReactのStateで管理する方法を、Controlled Componentと呼ぶことがあります。逆に、DOM自体が保持している値を直接取り出す方法はUncontrolled Componentと呼ぶことがあります。

実務では、Controlled Componentの方が取り扱いやすいケースが多いです。というのも、Stateで値を一括管理することで、画面遷移や他のコンポーネントとの連携が行いやすくなるからです。とはいえ、Uncontrolled Componentにもシンプルさという利点があるので、用途に応じた選択が望まれます。

Controlled Componentのメリット

Stateによる管理ができるため、フォームの値をすべてReact側で追跡しやすくなります。バリデーションなどのタイミングを制御しやすいのもメリットです。

Uncontrolled Componentのメリット

入力内容がローカルのDOMに紐づいているだけなので、コードが簡潔になりやすいです。小規模なフォームや一時的な入力欄などでは便利な場合があります。

以下の表は、Controlled ComponentとUncontrolled Componentの大まかな違いをまとめたものです。

項目	Controlled Component	Uncontrolled Component
データの管理方法	ReactのStateを使用	DOMの内部状態に依存
メリット	バリデーションや状態管理が一括で行いやすい	コードが簡潔で、少ない手間で書ける
デメリット	ややコード量が増えることがある	まとめて状態を管理しづらく、拡張性にやや難あり

実務的にはControlled Componentを選択することが多いかもしれません。しかし、あまり複雑になりすぎないように使い分けを意識するとよいでしょう。

Controlled Componentの基本的な書き方

Controlled Componentでは、input要素の値をuseStateなどを使ってReactが管理します。ここでは、簡単な例としてユーザーの名前を入力するフォームを見ていきましょう。


import React, { useState } from "react";

function ControlledForm() {
  const [userName, setUserName] = useState("");

  const handleChange = (event) => {
    setUserName(event.target.value);
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log("送信された名前:", userName);
    // このあと実務では送信や他コンポーネントへの通知などを行うでしょう
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        名前:
        <input
          type="text"
          value={userName}
          onChange={handleChange}
        />
      </label>
      <button type="submit">送信</button>
    </form>
  );
}

export default ControlledForm;

ここでは、userNameというStateをuseStateで定義し、value属性にそのStateを設定しています。また、onChangeイベントでevent.target.valueを取得し、setUserNameで更新する流れです。

このようにすることで、ユーザーが入力した文字が常にReactのStateに反映されます。フォームの送信時にまとめて値を扱うことができるため、入力内容のチェックやデータベースへの保存などがスムーズに行いやすくなります。

Uncontrolled Componentの基本的な書き方

Uncontrolled Componentでは、ReactではなくDOM自体が持つ値を最終的に取得します。 ReactではuseRefフックを使って、要素にアクセスする方法がよく採用されます。


import React, { useRef } from "react";

function UncontrolledForm() {
  const inputRef = useRef(null);

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log("送信された名前:", inputRef.current.value);
    // 必要に応じて、ここでデータを保存やAPI送信など行えます
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        名前:
        <input type="text" ref={inputRef} />
      </label>
      <button type="submit">送信</button>
    </form>
  );
}

export default UncontrolledForm;

refを使ってDOM要素に直接アクセスし、inputRef.current.valueから値を取得する仕組みです。バリデーションや他のStateと連動させる場合には、Controlled Componentよりも管理が難しくなるケースもあるでしょう。

ただし、「コードが簡潔になる」「頻繁に値を管理しなくてもよい」などの理由から、用途によってはこちらを採用する場面があります。

実務でよくある利用シーン

実務でReactのinputを扱うときは、単にユーザー入力を受け付けるだけでなく、さまざまな場面で複数のフォーム要素を組み合わせることが多いです。たとえば、以下のようなシーンを考えてみると、Controlled Componentが扱いやすいでしょう。

ログインやサインアップ画面のフォーム

ログインやユーザー登録といったフォームでは、複数の入力項目（メールアドレスやパスワードなど）が存在することが多いですね。このとき、各項目のStateをReactが管理することで、送信時に一括でユーザー情報を取得できます。また、バリデーションの処理も同じタイミングで行うことができるのは大きな利点です。

ユーザー情報の編集画面

ユーザープロフィールなどを編集する画面では、フォームの初期値としてユーザーの既存データを入力しておく必要があります。 Controlled Componentであれば、APIから取得したデータをStateに設定してvalueに紐づけるだけで済むため、実装がわかりやすくなります。

フォームの項目数が多い場合は、Stateの管理が複雑になることがあります。そういった場合には、Reducerパターンの導入などを検討したほうが良いかもしれません。

フォーム入力時のイベント処理

input要素とReactのStateを組み合わせる場合、イベントハンドラがポイントになります。代表的なものはonChangeですが、他にもonBlurやonFocusなどが頻繁に使われることがあります。

onChangeイベント

入力値が変化するたびに呼び出されるイベントです。上の例のように、Stateに入力値を反映させるケースが多いでしょう。入力チェックをリアルタイムに行いたい場合にも便利です。

onBlurイベント

ユーザーが入力フィールドを離れたときに呼び出されるイベントです。「入力が完了した段階」でバリデーションを行いたい場合に使うことがあります。

onFocusイベント

ユーザーが入力フィールドを選択したタイミングで実行されます。入力アシストやヒントを表示したい場合などに役立つかもしれません。

これらを組み合わせることで、入力補助やエラー表示などのインタラクティブなフォームを作ることができます。実務では、「入力途中からエラーを出しすぎると混乱を招く」ということもありますので、タイミングを適切に調整するのがポイントです。

バリデーションとエラーメッセージ

入力チェック（バリデーション）も実務では大切な仕組みですね。たとえば、メールアドレスの形式を確認したり、文字数制限を設けたりすることがあります。

以下の例では、簡単な文字数チェックを行い、条件を満たさない場合にはメッセージを表示しています。


import React, { useState } from "react";

function SimpleValidationForm() {
  const [text, setText] = useState("");
  const [error, setError] = useState("");

  const handleChange = (event) => {
    const inputValue = event.target.value;
    setText(inputValue);

    if (inputValue.length < 5) {
      setError("5文字以上で入力してください。");
    } else {
      setError("");
    }
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    if (!error) {
      console.log("送信:", text);
      // バリデーションOKならここでデータ送信など
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        テキスト入力:
        <input type="text" value={text} onChange={handleChange} />
      </label>
      {error && <p style={{ color: "red" }}>{error}</p>}
      <button type="submit">送信</button>
    </form>
  );
}

export default SimpleValidationForm;

onChangeで常に入力内容をチェックしており、条件を満たさない場合にエラーメッセージを表示しています。ただし、実際にはもっと多様なバリデーションを行うことが多いので、フォームが大きくなるとコードが複雑になりがちです。

カスタムフックやバリデーションライブラリを活用すると、より管理しやすい形でバリデーションを実装できるかもしれません。

実務レベルで意識したいポイント

Reactのinputを使ったフォーム実装は、基本が分かればいろいろなところで応用できます。ただし、プロジェクトが大きくなるほど、State管理の設計やバリデーションロジックをしっかり考える必要があるでしょう。

部品化とメンテナンス性

たとえば、メールアドレスを入力する欄やパスワードを入力する欄など、一般的な項目はコンポーネントとして切り出しておくと便利です。大規模なフォームほど、コンポーネントを細かく分割し、一貫したデザインやバリデーションを適用しやすくする工夫が求められるでしょう。

マルチステップフォーム

入社手続きやショッピングサイトの注文画面など、ユーザーが複数ページにわたってフォームを入力するケースもあります。この場合、ページをまたいだState管理や入力データの一時保存の仕組みが必要になることが多いです。 React Routerなどのルーティングと連携しながら、ステップごとにバリデーションを挟む実装を考える必要があるかもしれません。

サーバーサイドとの連携

フォームの入力結果をサーバーに送信する場合は、通常はAPIを介してデータを受け渡すことになります。 submitボタンのイベントハンドラでfetchやaxiosなどを使い、入力データを送信するフローが典型的です。エラーが返ってきた場合の処理や、送信中のローディング状態表示などにも注意が必要です。

まとめ

Reactのinput要素を活用したフォーム作成は、初心者が最初に学ぶべきテーマの一つですね。 Controlled ComponentとUncontrolled Componentの違いやメリットを理解しながら、実際のイベント処理やバリデーションを組み合わせていくと、実務でも使いやすい形に仕上がります。

小さなプロジェクトであれば、State管理やバリデーションがさほど複雑にならないでしょう。しかし規模が大きくなると、コンポーネント分割や外部ライブラリの導入などを検討する必要が出てきます。そうした工夫も徐々に学びながら、実際の開発での活用をイメージできるようにしていくと良いですね。

フォームはユーザーがデータを入力するための重要な入り口です。 Reactの基本機能をしっかり理解して、より使いやすく、ミスの少ないフォームを作っていきましょう。