TypeScriptでフォームバリデーションエラーを型安全に実装する方法！React Hook Form活用ガイド

1. そもそもフォームバリデーションとは？

1. そもそもフォームバリデーションとは？

Webサイトで名前やメールアドレスを入力してもらう際、ユーザーが間違った情報を入力してしまうことがあります。例えば、メールアドレスの形式が正しくなかったり、必須項目を入力し忘れたりすることです。このような誤りをチェックし、正しい情報だけをサーバーに送る仕組みをバリデーションといいます。

初心者の方に例えるなら、お店の入り口でチケットを確認する係員のようなものです。チケットがなければ入場できないように、正しいデータでなければ先へ進ませないルールを決めるのがこの作業です。バリデーションを怠ると、プログラムが壊れたり、データがぐちゃぐちゃになったりする原因になります。

2. なぜTypeScriptを使うと安心なのか

2. なぜTypeScriptを使うと安心なのか

TypeScriptを使う最大の利点は型安全にあります。型安全とは、プログラムが扱うデータの種類をあらかじめ決めておき、その決まりを破ったときにすぐに警告を出してくれる仕組みです。もし、数値を入れるべき場所に文字を入れてしまったら、TypeScriptが「それは違いますよ」と教えてくれます。

JavaScriptだけで書くと、動かしてみるまで間違いに気づけないことが多いです。しかし、TypeScriptならコードを書いている最中に間違いを見つけられるため、開発のスピードが上がり、バグの発生も抑えられます。フォーム管理のようにデータの入力や出力が多い場所こそ、この能力が輝くのです。

3. React Hook FormとZodの組み合わせ

3. React Hook FormとZodの組み合わせ

フォーム管理を楽にするために、React Hook Formというライブラリを使います。これは、ReactというWeb開発用のフレームワークでフォームを扱うための非常に人気のある道具です。そして、入力されたデータが正しい形式かどうかを定義するためにZodを使います。

Zodはスキーマ定義ライブラリと呼ばれ、データの形を細かく設定できます。「この項目は必須」「メールアドレスは必ず＠マークを含む」といったルールを、TypeScriptの型と連動させながら簡潔に記述できます。この二つを組み合わせることで、エラーメッセージの表示まで一括で管理できるのです。

import { z } from "zod";

const schema = z.object({
  username: z.string().min(1, "名前は必須です"),
  email: z.string().email("メールアドレスの形式が正しくありません")
});

4. 型定義を使ってバリデーションエラーを管理する

4. 型定義を使ってバリデーションエラーを管理する

次に、先ほど決めたルールに基づいて、実際にフォームを制御する方法を見てみましょう。React Hook FormのuseFormフックを使うと、入力状態の保持からエラーチェックまでを自動化できます。ここで、Zodのルールをそのままバリデーションの基準として利用するのがポイントです。

これにより、入力フォームの名前を変更しても、プログラム全体で型が自動的にチェックされるようになります。手作業でバリデーションを一つずつ書く必要はなく、プログラムが自動的にエラーの種類を判別してくれます。これにより、修正漏れや誤入力によるバグを劇的に減らすことが可能となります。

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

const { register, handleSubmit, formState: { errors } } = useForm({
  resolver: zodResolver(schema)
});

5. エラーメッセージを画面に表示する

5. エラーメッセージを画面に表示する

実際に画面上でエラーを表示するには、formStateという状態管理機能を使います。バリデーションに失敗した場合、errorsオブジェクトの中にエラー内容が自動的に格納されます。これを使って、入力ボックスの下に「名前を入力してください」といった親切なメッセージを出すのです。

例えば、名前が未入力であれば、errors.username.messageという場所にエラー文言が代入されます。これをHTML側に繋ぐことで、ユーザーが困らないように案内が出せます。ユーザーが正しい情報を入力すると、このエラー表示は自動的に消えるため、非常にスムーズで快適な操作性を実現できます。

<input {...register("username")} />
{errors.username && <p>{errors.username.message}</p>}

6. 型安全な開発がもたらすメリット

6. 型安全な開発がもたらすメリット

ここまで紹介した手法でフォームを作成すると、将来的に項目が増えたり、ルールの条件を変更したりした際も、TypeScriptが修正すべき場所を自動的に教えてくれます。これが型安全による恩恵です。プログラムの全体像がしっかり把握できるため、安心して機能の追加や改善を行えます。

もしパソコンに慣れていない初心者の方でも、まずはこの基本的な型定義の考え方に触れておけば、将来的に大規模なアプリを作ることになったときでも自信を持って開発に挑めます。バリデーションエラーを適切に管理することは、優れたWebサイトを作るための最初の一歩なのです。ぜひ自分のプロジェクトで試してみてください。

type FormData = z.infer<typeof schema>;

const onSubmit = (data: FormData) => {
  console.log("入力成功:", data);
};