はじめてのReact Hook Form 〜住宅ローン審査システムでの実践から学んだこと〜
Reactに触れたばかりの頃、私はある住宅ローン審査システムの開発に携わる機会を得ました。
そのプロジェクトでは、フロントエンドの実装に React Hook Form（以下RHF） を使用しており、私にとってはそれが初めてのRHFとの出会いでした。
今回はそのときの経験をふりかえりつつ、「業務でRHFを使ったらどんな感じか」「どんな学びがあったか」を共有したいと思います。
目次
RHF + Yup でバリデーションを組む
住宅ローン審査という業務の性質上、フォームの入力項目は多岐にわたります。
電話番号、郵便番号、メールアドレス、年収、勤務年数など、正しい形式で入力されるべき項目がたくさんありました。
このときバリデーション処理には、RHFと一緒に Yup を使いました。
今でこそZodが主流ですが、本件ではyupを使うことになっていました（当時はRHF公式ドキュメントでもYupとの連携例が掲載されていたように記憶しています）。
const schema = yup.object({
email: yup.string().email().required(),
phone: yup.string().matches(/^\d{10,11}$/),
});
yupResolver を使って useForm に渡すことで、
スキーマ定義に沿ったバリデーションが簡単に実現できました。
実装とテストの両方に関わる
私はこの案件で、RHFによるフロントエンド実装だけでなく、テスト仕様書の作成とテスト実施にも携わりました。
バリデーションが効いていること、適切にエラーメッセージが表示されること、APIとの通信が想定通りに動くことなど、細かく確認していく必要がありました。
バックエンドはJavaで構成されていましたが、私はJavaの実装には関与せず、モックサーバーに対してAPIリクエストを送り、フロント側での疎通確認や入力制御を中心に対応しました。
RHFとYupの組み合わせはシンプルで分かりやすく、慣れてくると実装もテストもしやすく感じましたが、当時の私はまだReactを始めたばかりで、関連書籍を一通り読んだくらいのレベルでした。そのため、useForm や register の使い方、エラー表示の仕組み、スキーマとの連携に至るまで、すべてが手探り状態でした。
相談できる人がいない環境で気づいたこと
このプロジェクトにはReactの有識者がほとんどおらず、相談できる相手もあまりいない状態でした。
他の方々を含め多くが「React初心者です」という状況だったので、自分で調べて試して解決するしかありませんでした。
でも、だからこそ、公式ドキュメントを読む習慣がついたり、エラーとちゃんと向き合う力がついたりと、実践の中で強くなれた部分もあったと感じています。
難しいフックを無理に使わなくてもいい
この経験を通じて、個人的に感じたのは「Reactのフックはすべて使いこなさなくても大丈夫」ということです。
実際の開発では、useState、useEffect、そして今回使った useForm さえ理解していれば、ほとんどのUIは構築できます。
もちろん、重たいAPIリクエストの最適化などで useCallback を使う場面もありますが、それは必要に応じて調べて使えば十分です。
むしろ業務では、他のメンバーが読みやすく理解しやすいコードのほうが価値が高く、「変に高度なことをやらない」ことがチーム開発では大切だと感じるようになりました。
「覚えることが多そう…」と不安になる方もいるかもしれませんが、まずは基本だけでしっかり実装できるようになることが、結果として一番の近道だと思います。
最後に
React Hook Formを初めて業務で使った住宅ローン審査システムの案件は、今でも自分にとって印象深いプロジェクトです。
React初心者の状態から現場で格闘した経験は、その後のReact開発でも大きな財産になっています。
これからReactを始めようとしている方や、RHFにチャレンジしてみたい方の参考になればうれしいです。
まずは小さなフォームから、状態管理やバリデーションを意識して組んでみるところから始めてみてください！
