react-forms

React Forms スキル

堅牢な React フォーム（制御入力、React Hook Form、Zod によるバリデーション、動的配列、Server Actions、楽観的更新、再利用可能なフィールド、ファイルアップロード、ドラッグ＆ドロップ、複数ステップのウィザード）には、このスキルを使用してください。

このスキルを使用するタイミング

フロントマターのトリガーに該当するタスクをユーザーから依頼されたときに使用してください。特に、この領域での実装方法の案内、デバッグ、アーキテクチャの選択、本番環境向けの堅牢化、パフォーマンスを重視した判断が対象です。このオーケストレーターを起点にし、求められている詳細度に合ったリファレンスファイルを読み込んでください。

基本的なワークフロー

1. フォームモデルを選択します。単純なフォームには制御状態、複雑なクライアントフォームには React Hook Form、フレームワーク標準の送信処理には Server Actions を使用します。
2. データコントラクトの近くにバリデーションを定義します。データの形状が共有される場合や複雑な場合は、Zod などによるスキーマバリデーションを優先してください。
3. ラベル、aria-invalid、aria-describedby、フィールドの近くに表示するエラーテキスト、送信中や読み込み中の送信ボタンの無効化を使い、最初からアクセシビリティを組み込みます。
4. 動的フィールドでは、useFieldArray の安定したフィールド ID を使用し、項目の追加、削除、移動後もバリデーションパスを維持します。
5. ファイルアップロードでは、種類とサイズを検証し、適切な場合にのみプレビューを生成して、FormData で送信します。
6. 複数ステップのフォームでは、次に進む前に現在のステップだけを検証します。データを保持する必要がある場合は、すべてのステップで単一のフォームコンテキストを使用します。

主な注意点

• 意図的なブリッジコンポーネントなしに、同じ入力で制御パターンと非制御パターンを混在させないでください。
• 保留中は送信を無効にして、重複送信を防いでください。
• クライアント側のバリデーションがあっても、サーバー側のバリデーションエラーは必ずユーザーに提示してください。
• オブジェクト URL を解放しないと、ファイルプレビューによってメモリリークが発生する場合があります。また、大きなファイルでは Data URL のサイズが大きくなることがあります。
• Server Actions では、プログレッシブエンハンスメントと保留中／エラー状態をユーザーに見えるようにしてください。

リファレンスマップ

• references/react-forms-complete-guide.md - 制御フォーム、バリデーション、React Hook Form、Zod、フィールド配列、条件付きフィールド、Server Actions、楽観的更新、カスタムコンポーネント、アップロード、ドラッグ＆ドロップ、複数ステップフォーム、ベストプラクティスを網羅した完全版ガイドです。

回答の指針

• 明確な互換性上またはパフォーマンス上の理由がない限り、ユーザーが現在使用しているフレームワーク、ライブラリ、ツールの選択を維持してください。
• コピーしてそのまま使えるコードは、現在のタスクに必要な場合に限って提示してください。それ以外の場合は、該当するリファレンスのセクションを案内してください。
• 本番環境のワークフローに関するトレードオフ、失敗要因、検証手順を明示してください。
• 気の利いたマイクロ最適化よりも、アクセシビリティ、保守性、測定可能性を備えた解決策を優先してください。