【ITニュース解説】React Form Action

Webアプリケーションにおいて、ユーザーからの情報を受け取るフォームは非常に重要な要素だ。例えば、ログイン画面でのユーザー名とパスワード入力、商品購入時の配送先情報入力など、私たちの日常的な操作の多くでフォームが使われている。Reactを使ってこのようなフォームを開発する際には、従来のHTMLフォームとは異なる、Reactならではの考え方がある。

Reactでは、フォームの入力フィールドは通常「制御されたコンポーネント（Controlled Component）」として扱われる。これは、入力フィールドの値がReactのステート（状態）によって完全に管理されていることを意味する。ユーザーが何かを入力するたびに、その入力値がReactのステートに保存され、そのステートの値がそのまま入力フィールドに表示されるという仕組みだ。これにより、入力値の検証（バリデーション）や特定の条件での入力の無効化など、開発者がフォームの動作を細かく制御できるようになる。

基本的なフォームの扱い方を見ていこう。まず、入力フィールドの値を保持するためにReactのuseStateという機能を使う。このuseStateは、コンポーネント内で変化するデータを管理するためのもので、例えば「ユーザーが入力した名前」を保存するのに利用できる。入力フィールドにはvalue属性があり、ここにuseStateで管理しているステートの値を設定する。これにより、入力フィールドの表示内容が常にステートと同期される。

次に、ユーザーが入力フィールドに文字を入力したときに、その入力値をステートに反映させる必要がある。これは、入力フィールドのonChangeというイベントハンドラを使って行う。onChangeイベントが発生すると、入力された新しい値が取得でき、それをuseStateの更新関数に渡すことで、ステートが新しい値に更新される。この一連の動きによって、Reactが入力フィールドの値を「制御」している状態になる。

フォームの送信処理も重要だ。HTMLでは、フォームを送信するとページ全体がリロードされてしまうのがデフォルトの動作だが、Reactのようなシングルページアプリケーションでは通常、ページのリロードは避けたい。そこで、フォームのonSubmitイベントハンドラの中でe.preventDefault()というメソッドを呼び出す。これは、「ブラウザがフォーム送信時に行うデフォルトの動作、つまりページのリロードを防ぐ」ためのものだ。この記述によって、ページがリロードされることなく、開発者が定義した独自の処理を実行できる。例えば、入力されたデータをコンソールに表示したり、サーバーに送信したりといった処理だ。

複数の入力フィールドを持つフォームの場合、それぞれのフィールドに個別のステートを用意することもできるが、入力フィールドが増えるとステートの管理が煩雑になる。そこで便利なのが、複数の入力フィールドの値を一つのJavaScriptオブジェクトとしてまとめてステートで管理する方法だ。例えば、ユーザー名、メールアドレス、パスワードといった複数の情報をformDataという一つのオブジェクトステートとして保持する。

この場合、onChangeイベントハンドラを共通化して、どの入力フィールドが変更されても同じ関数で処理できるようにする。入力フィールドにはname属性を設定しておき、onChangeイベント内でe.target.nameを使って、どのフィールドが変更されたかを識別する。そして、スプレッド構文（...formData）を使って既存のformDataのコピーを作成し、変更されたフィールドの値を新しい値に更新するという形を取る。これにより、少ないコードで多くの入力フィールドを効率的に管理できるようになる。

テキスト入力だけでなく、Webフォームにはチェックボックス、ラジオボタン、セレクトボックスといった多様な入力要素がある。これらも基本的にはuseStateとonChangeを使って管理するが、それぞれ少しずつ特性が異なる。 ラジオボタンは、複数の選択肢の中から一つだけを選ぶタイプだ。name属性を共通にしてグループ化し、選択されたボタンのvalueをステートに保存する。 チェックボックスは、オンかオフか（真偽値）を扱う要素だ。checkedプロパティで現在のチェック状態を表示し、onChangeでステートの真偽値を反転させることで、チェックの状態を切り替える。 セレクトボックス（ドロップダウンリスト）は、valueプロパティで現在選択されているオプションの値を指定し、onChangeで新しい選択値にステートを更新する。

フォームの入力値が正しい形式であるかを確認する「バリデーション（検証）」は、ユーザーエクスペリエンスとデータの整合性を保つ上で非常に重要だ。例えば、メールアドレスの入力フィールドであれば、必ず「@」記号が含まれているかをチェックするといった処理だ。バリデーションはフォームが送信される前に行われるのが一般的で、もし入力値に問題があれば、エラーメッセージをユーザーに表示して修正を促す。このエラーメッセージもuseStateを使って管理し、エラーがある場合にだけメッセージを表示するように実装できる。これにより、不正なデータが送信されるのを防ぎ、ユーザーにとっても分かりやすいフィードバックを提供できる。

Reactでフォームを扱う上で覚えておくべき重要なポイントはいくつかある。 まず、制御されたコンポーネントでは、入力値の変更を検知するために常にonChangeイベントハンドラを使用し、そこでステートを更新すること。 次に、フォームの送信時にページがリロードされるのを防ぐために、onSubmitイベントハンドラ内でe.preventDefault()を必ず呼び出すこと。 そして、複数の入力フィールドを扱う際には、それらの値を一つのオブジェクトとしてステートにまとめて管理すると、コードがすっきりと保たれ、拡張性が高まること。 最後に、フォームのデータは送信する前にバリデーションを行い、エラーがあればユーザーに通知することだ。

これらの基本的な知識とテクニックを習得すれば、Reactを使ったWebアプリケーションで、ユーザーが使いやすく、堅牢なフォームを開発できるようになるだろう。さらに進むと、これらのフォームデータをfetchやaxiosといったツールを使ってバックエンドのAPIに送信し、データベースに保存したり、複雑な処理を実行したりすることも可能になる。