【6章】React実践演習の振り返り

学んだこと

React Hook FormとZodを使うことで理解を深めることができました。

下記にて今回どのように使用したかと併せてReact Hook FormとZodについてまとめました。

React Hook Form

React Hook Form とは…React専用のフォーム作成のためのライブラリ

• フォーム入力値をuseStateで個別管理する必要が減るため、コード量が減り可読性が上がる

• refで入力値を管理するため、レンダリングが最小限となり、大規模なフォームでも高速でパフォーマンスが向上する

今回使用した関数やオブジェクトたち

• register …入力フォームをRHFに登録する関数

  • <input {...register(”xxx")} /> で入力値の管理やバリデーションチェック連携をRHFに紐づけできる

• handleSubmit …フォーム送信時の処理(onSubmit)をラップする関数

  1. バリデーションチェック

  2. 問題がなければonSubmitを実行

  3. バリデーションエラーがある場合はformState.errorsが更新される

• reset …フォームの値を初期化する関数

  • 送信ボタンの送信後の初期化、クリアボタンの初期化に使用

• formState …フォーム全体の状態を持つオブジェクト

  • 今回はerrorsとisSubmittingを下記のように分割代入で取り出して使用した

    • formState: { errors, isSubmitting }

  • errors

    • 前述のhandleSubmit で格納されたバリデーションエラー

      • errors.xxx?.message で該当の項目にバリデーションエラーメッセージの表示に使用

      • errors.xxx で該当の項目にバリデーションエラーがあるかのフラグとしてエラーメッセージを表示されるかどうかの判断に使用

  • isSubmitting

    • 送信中かどうかを表すフラグ

      • inputとbuttonのdisabled制御に使用

Zod

Zod とは…Typescriptの型定義と同じ形式で、データ構造の検証を行ってくれるライブラリ

• スキーマを定義することによってバリデーションルールの設定と型推論を同時にできる

• RHFだけでもバリデーションチェックはできるがzodと組み合わせることでフォーム制御とバリデーションの責務を分離できるため、複雑な検証条件を指定しているときのコードの可読性が向上する

  • 下記のようにRHFのuseFormのオプションであるresolverに宣言したスキーマを渡すことでRHFとZodで連携ができる

useForm({resolver: zodResolver(XxxSchema),});

気づき・感想

以前チートシートとにらめっこしてスタイルをあてていた記憶があったので、かなり手間だなとTailwind cssに抵抗感があったのですが、bg-[#333] のように[]内に数値を入れればスタイルがあたるし、この値なら既にこの登録があるよと推論してくれること気付いたのでこれなら無理なく使えるなと思いました。

また前の現場のコーダーの方がトンマナから外れるのが嫌だからと汎用コンポーネントは限定的であるほど良いという方針だったのでComponentProps を使用するという発想がありませんでした。

今後は保守性を鑑みてComponentProps を積極的に使用していこうと思います！