TypeScriptでフォームバリデーションを定義・再利用！React Hook Formで効率化する方法

1. バリデーションとフォーム管理の基本を理解する

1. バリデーションとフォーム管理の基本を理解する

ウェブサイトにある入力フォームで、名前やメールアドレスを入力したとき、「入力が足りません」といったエラーメッセージが表示された経験はありませんか。これがバリデーションです。日本語では妥当性検査と呼びます。

バリデーションは、ユーザーが間違ったデータを入力することを防ぎ、システムが正しいデータだけを受け取るための防波堤のような役割を果たします。パソコンを触ったことがない方でも、アンケート用紙で「この欄は必ず書いてください」と指定されていることを想像してみてください。それがバリデーションです。

TypeScriptを使うと、どのような形式のデータが入力されるべきかをあらかじめ定義できるため、エラーを未然に防ぐことができます。React Hook Formは、このバリデーションをより簡単に、そして高速に扱うための非常に人気がある道具です。

2. なぜルールを定義して再利用するのか

2. なぜルールを定義して再利用するのか

例えば、名前を入力する欄と、会員登録用の名前欄の両方で、「名前は必須」「文字数は五文字以上」というルールが必要だとします。もし、この二つの場所で同じルールをバラバラに書いていたら、あとから「やっぱり四文字以上に変更しよう」となったときに、全部の場所を修正しなければなりません。これはとても大変な作業です。

ルールを一箇所にまとめて定義し、それをあちこちから読み込んで使うことを再利用といいます。こうすることで、ルールを変更したくなっても、その一箇所を書き換えるだけで済むようになります。これが開発の現場で非常に重視されるメンテナンス性（後から修正しやすいこと）を高める秘訣です。

3. TypeScriptでのバリデーションルール定義

3. TypeScriptでのバリデーションルール定義

まずは、どのようなデータを入力してもらうかを型として定義します。ここでは例として、ユーザー名と年齢を入力するフォームを想定しましょう。TypeScriptを使うと、入力項目をオブジェクトとして管理できます。オブジェクトとは、関連するデータ同士をひとまとめにした箱のようなものです。

type UserForm = {
    username: string;
    age: number;
};
    

このように型を定義することで、プログラムは「usernameには文字が入る」「ageには数字が入る」ということを理解します。次に、この形式に合わせてバリデーションルールを作成します。

4. Zodを使ったルールの定義と再利用

4. Zodを使ったルールの定義と再利用

再利用可能なルールを作るために、Zod（ゾッド）という非常に便利なライブラリを使うのが現代の標準です。ライブラリとは、便利な機能がたくさん詰まった道具箱のようなものです。Zodを使うと、複雑なルールもシンプルに書くことができます。

import { z } from "zod";

export const userSchema = z.object({
    username: z.string().min(2, "名前は二文字以上で入力してください"),
    age: z.number().min(18, "十八歳以上である必要があります"),
});
    

このように定義したスキーマ（データの構造を決める設計図）は、他のファイルに読み込んで自由に使うことができます。これがまさに「再利用」の強力な武器になります。

5. React Hook Formと統合してフォームを作成する

5. React Hook Formと統合してフォームを作成する

いよいよ、定義したルールをReact Hook Formと連携させます。React Hook Formは、入力フォームの状態を管理し、エラーメッセージを効率よく表示してくれる強力なツールです。

import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";

const { register, handleSubmit } = useForm({
    resolver: zodResolver(userSchema),
});
    

resolver（リゾルバー）という仕組みを使うことで、React Hook Formは先ほど作ったZodのルールを自動的に読み取ってチェックしてくれます。これにより、プログラムを書く量を大幅に減らすことができます。

6. フォームの状態管理を効率化するメリット

6. フォームの状態管理を効率化するメリット

ここまで紹介した手法を使うと、フォームの数が増えても恐れることはありません。新しいフォームを作るときは、すでに定義済みのルール（スキーマ）をインポートするだけで、すぐに一貫したバリデーションが機能します。

例えば、別のログインページや設定画面でも、同じバリデーションルールを使い回すことができます。プログラムの世界では、同じコードを何度も書かないことが、バグ（プログラムの欠陥）を減らすための最も大切な鉄則の一つです。皆さんもぜひ、この方法で安全で使いやすいフォームを作ってみてください。