【ITニュース解説】One tool for both registration and editing! Basic Techniques for Reusing Forms in React

Reactを用いたWebアプリケーション開発では、ユーザーからの入力を受け付けるフォームの作成は非常に一般的である。例えば、新しいユーザー情報の登録フォームや、既存のユーザー情報を修正する編集フォームなどがある。これらのフォームは、見た目や入力項目が非常によく似ているにもかかわらず、多くの開発現場で「登録用」と「編集用」の二つのフォームを別々に作成してしまうという課題に直面することがある。これは、新規登録時には空のフォームを表示し、送信時には新しいデータをデータベースに保存する一方で、編集時には既存のデータをフォームに読み込み、送信時にはそのデータを更新するという、それぞれ異なる処理が必要になるためだ。しかし、このようなアプローチは、コードの重複を生み、保守が複雑になり、結果として開発効率の低下やバグの原因となる可能性がある。

この課題を解決し、一つのフォームで新規登録と編集の両方を効率的に行うための基本的なアアプローチがある。その鍵となるのは、Reactの「状態（state）」を効果的に活用することだ。状態とは、コンポーネント内で変化するデータを管理するための機能であり、これを用いることでフォームの挙動や表示を動的に切り替えることができる。

具体的には、まずフォームが現在「新規登録」モードなのか「編集」モードなのかを識別するための状態変数「mode」を導入する。これはReactのuseStateフックを使って定義され、"create"（新規登録）または"edit"（編集）のいずれかの値を持つように設定する。アプリケーションの初期状態では、フォームは新規登録モードであるため、modeの初期値は"create"に設定しておく。このmode変数が、フォーム全体の振る舞いを決定する司令塔となる。

次に、編集モードの場合にどのデータを編集するのかを特定するための状態変数「editing」を用意する。このeditingには、編集対象となる具体的なレコードデータ（例えば、タイトルと時間を持つオブジェクトなど）が格納される。新規登録モードの際には、特定の編集対象が存在しないため、editingはnullに設定される。useStateフックは、このediting変数の値を必要に応じて更新し、フォームコンポーネント内で常に最新の編集対象データを参照できるようにする。

フォームを開く際には、そのモードに応じて初期値を設定する処理を記述する。新規登録モードでフォームを開くための関数（openCreateなど）が呼び出された場合、まずmodeを"create"に設定し、editingはnullにクリアする。そして、フォーム内の入力フィールドはすべて空の状態でリセットされる。これにより、ユーザーは新しい情報を最初から入力できるようになる。一方、編集モードでフォームを開くための関数（openEditなど）が呼び出された場合、modeは"edit"に設定され、引数として渡された編集対象のレコードデータがeditingに設定される。同時に、フォームの入力フィールドには、このeditingに設定された既存のデータがあらかじめ入力された状態となる。この「初期値を設定する」という処理は、フォームライブラリのreset関数などを活用することで、簡単に行うことができる。その後、フォームを表示するモーダルなどが開かれる。

フォームがユーザーによって入力され、送信された際の処理も、このmodeの状態変数に基づいて分岐させる。フォーム送信時に実行されるonSubmit関数内では、まず現在のmodeが"create"なのか"edit"なのかを確認する。もしmodeが"create"であれば、フォームから入力された新しいデータをデータベースに登録する処理を実行する。ここではSupabaseのようなWebデータベースサービスを例に挙げると、insertメソッドを使って新しいレコードを追加する。入力されたタイトルと時間がデータベースのテーブルに書き込まれる形だ。

一方、modeが"edit"であり、かつeditingに有効な編集対象データが設定されている場合、データベース上の既存のレコードを更新する処理を実行する。Supabaseの場合、updateメソッドを用いて、editingに保持されているレコードのIDを条件として指定し、フォームから入力されたタイトルと時間でそのレコードを更新する。このように、同じonSubmit関数内で、modeの値に応じて全く異なるデータベース操作を行うことができる。

データベース操作が完了した後は、共通の後処理としてフォームをリセットし、modeを"create"に戻して次の新規登録に備える。editingもnullにクリアされる。最後に、フォームが閉じられ、最新のデータを表示するためにデータの再取得が行われる。

ユーザーインターフェース（UI）の表示もmodeの状態に応じて動的に切り替えることができる。例えば、フォームの上部に表示されるタイトルは、modeが"edit"であれば「Edit Record」（レコードを編集）、"create"であれば「New Registration」（新規登録）と表示を変化させる。同様に、フォームの送信ボタンのテキストも、modeが"edit"であれば「Update」（更新）、"create"であれば「Register」（登録）と切り替えることで、ユーザーに現在の操作が何であるかを明確に伝えることができる。これにより、ユーザーは一つのフォームで迷うことなく、新規登録と編集の両方を行うことが可能になる。

結論として、Reactアプリケーションにおいて、modeという一つの状態変数を中心に据え、それに応じてフォームの初期値設定、データ送信時のデータベース操作、さらにはUIの表示を動的に切り替えることで、新規登録と編集機能を単一のフォームで実現できる。このアプローチは、コードの重複を大幅に削減し、開発時の実装コストを抑えるだけでなく、将来的な機能追加や変更に対する保守性を格段に向上させる。また、ユーザーにとっても一貫性のある操作体験を提供できるため、アプリケーション全体の品質向上に大きく貢献する。システムエンジニアを目指す上で、このような設計パターンを理解し活用することは、効率的で高品質なWebアプリケーション開発を行うための重要な一歩となるだろう。