なぜRHFと一緒にzodを使用するのか

最近はRHF（React Hook Form）＋zodでフォームを作ることが多い気がしていて、
「RHFだけでもバリデーションできるのになんでzodを入れるんだろう」と疑問に思ったので調べました。

RHFだけでもバリデーションはできる

RHFはフォームライブラリで、registerにオプションを渡すことで基本的なバリデーションができます。

<input {...register("email", { required: true, pattern: /^\S+@\S+$/i })} />

こんな感じでrequiredやminLength、patternなどを使って簡単なバリデーションであればRHFだけでも問題なさそうです。

zodを使う理由

では、なぜzodをわざわざ導入するのか。メリットを挙げていきたいと思います。

1. 型安全なバリデーションができる

zodはTypeScriptと相性が良く、バリデーションスキーマから型定義を自動で生成できます。

const schema = z.object({
  email: z.string().email(),
});

type FormData = z.infer<typeof schema>;

これにより、フォームデータの型が常にスキーマと一致し、IDEの補完や静的解析が効くようになります。

2. バリデーションロジックの再利用、変更がしやすい

バリデーションをzodスキーマとして定義することで、サーバーサイドやAPIバリデーションにも
同じスキーマを使い回すことができますし
バリデーションルールをコンポーネント内でバラバラに書くより読みやすく、変更しやすいメリットがあります。

3. 複雑なルールも柔軟に定義可能

例えば「2つのパスワード入力が一致しているか」といった複雑な条件も
zodのrefineやsuperRefineを使えば簡潔に書けるようになるようです。

4. エラーメッセージの一元管理ができる

zodでは個々のルールに対してエラーメッセージを指定できるので、メッセージの国際化や一括管理にも向いています。

まとめ

今回のPJではRHF➕zodを使用していて
「zodってバリデーションライブラリって書いてるけども、バリデーションならRHFでもできるはずだよね？」と思ったので調べてみました。

シンプルなフォームや小規模ならRHFだけで十分ですが、
中〜大規模なPJでの型の安全性が必要な場合や、複雑なバリデーションを必要とする場面では、zodを組み合わせると便利なので人気なんだなあと思いました。