フォーム実装の基礎

知識課題

知識課題1

• React Hook Formのようなフォームライブラリを使用する主なメリットについて説明してください。
• フォームライブラリが、React標準機能のみでの実装と比較して、開発効率やコード品質をどのように向上させるかについて説明してください。

実践課題

実践課題1

• 氏名（name）とメールアドレス（email）を入力するフォームを作成してください。
  • 各入力には個別のuseStateとonChangeハンドラを使用してください。
  • 入力値がstateにリアルタイムで反映されることを確認できるように実装してください（例：コンソール出力）。
  • 送信ボタン（<button type="submit">）クリック時に、onSubmitイベントでstateの値を取得できるように実装してください。

実践課題2

• 実践課題1で作成したフォームコンポーネントを、単一のstateオブジェクトと共通のhandleChange関数で状態を管理するようにリファクタリングしてください。
  • 各<input>要素に適切なname属性を設定してください。
  • 共通のhandleChange関数内で、event.targetのnameとvalueを用いて動的にstateを更新するように実装してください。
  • リファクタリング後もフォームが正しく機能することを確認してください。

実践課題3

• React Hook Formライブラリを導入し、実践課題2のフォームを再実装してください。
  • register関数を使用して入力フィールドを登録してください。
  • handleSubmit関数を使用して送信処理を実装し、成功時に入力値をコンソールに出力してください。
  • 以下のバリデーションルールを適用してください。
    • 氏名：必須入力
    • メールアドレス：必須入力、有効なメール形式
  • バリデーションエラーが発生した場合、formState.errorsを用いてエラーメッセージを表示するように実装してください。

参考資料

• React Hook Form