Zodとは？React Hook Formとの連携でバリデーション実装

const {
  register,           // 各フォーム要素にバリデーションを適用するための関数
  handleSubmit,       // フォーム送信時の処理をまとめる関数
  formState: { errors } // バリデーションエラーの状態を管理するオブジェクト
} = useForm({
  mode: "onChange"     // 入力が変わるたびにバリデーションを実行する
});

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

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

// 入力項目のバリデーションルール
const schema = z.object({
  name: z.string().min(1, "名前を入力してください"),
  email: z
    .string()
    .min(1, "メールアドレスを入力してください")
    .email("正しいメールアドレス形式で入力してください"),
  tel: z
    .string()
    .min(1, "電話番号を入力してください")
    .regex(/^[0-9\-]+$/, "数字またはハイフンのみで入力してください"),
});

// Zodスキーマからフォームの型を自動生成
type FormData = z.infer<typeof schema>;

export default function ContactForm() {
  // useFormでフォームを初期化
  const {
    register, // 各inputにバリデーションを紐づける
    handleSubmit, // フォーム送信時にバリデーションを実行
    formState: { errors }, // 各項目のバリデーションエラー情報
  } = useForm<FormData>({
    resolver: zodResolver(schema), // Zodで定義したスキーマを使う
    mode: "onChange",              // 入力ごとにバリデーション実行
  });

  // バリデーション成功時の処理
  const onSubmit = (data: FormData) => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("name")} placeholder="名前" />　// registerの記載でチェック対象とする
      {errors.name && <p>{errors.name.message}</p>}　　// エラーメッセージの表示

      <input {...register("email")} placeholder="メールアドレス" />
      {errors.email && <p>{errors.email.message}</p>}

      <input {...register("tel")} placeholder="電話番号" />
      {errors.tel && <p>{errors.tel.message}</p>}

      <button type="submit">送信</button>
    </form>
  );
}