Zodバリデーション入門

このチュートリアルで学ぶこと

✓ Zodの基本
✓ スキーマ定義
✓ バリデーション
✓ 型推論
✓ React Hook Formとの統合

Step 1: セットアップ

npm install zod

Step 2: 基本的なスキーマ

import { z } from 'zod';

// プリミティブ型
const stringSchema = z.string();
const numberSchema = z.number();
const booleanSchema = z.boolean();

// オブジェクト
const userSchema = z.object({
  name: z.string().min(1, '名前は必須です'),
  email: z.string().email('有効なメールアドレスを入力してください'),
  age: z.number().int().positive().optional(),
});

// 型を推論
type User = z.infer<typeof userSchema>;

Step 3: バリデーション

// parse - 失敗時に例外
try {
  const user = userSchema.parse({
    name: 'Alice',
    email: 'alice@example.com'
  });
} catch (error) {
  if (error instanceof z.ZodError) {
    console.log(error.issues);
  }
}

// safeParse - 失敗時もオブジェクトを返す
const result = userSchema.safeParse(data);
if (result.success) {
  console.log(result.data);
} else {
  console.log(result.error.flatten());
}

Step 4: 高度なスキーマ

// 配列
const tagsSchema = z.array(z.string()).min(1).max(5);

// ユニオン
const statusSchema = z.enum(['active', 'inactive', 'pending']);

// 変換
const numberStringSchema = z.string().transform(val => parseInt(val, 10));

// リファインメント
const passwordSchema = z.string()
  .min(8, '8文字以上必要です')
  .refine(val => /[A-Z]/.test(val), '大文字を含めてください')
  .refine(val => /[0-9]/.test(val), '数字を含めてください');

// 条件付きバリデーション
const formSchema = z.object({
  password: z.string(),
  confirmPassword: z.string()
}).refine(data => data.password === data.confirmPassword, {
  message: 'パスワードが一致しません',
  path: ['confirmPassword']
});

Step 5: React Hook Formとの統合

npm install react-hook-form @hookform/resolvers

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

const schema = z.object({
  name: z.string().min(1, '名前は必須です'),
  email: z.string().email('有効なメールアドレスを入力してください'),
});

type FormData = z.infer<typeof schema>;

function ContactForm() {
  const { register, handleSubmit, formState: { errors } } = useForm<FormData>({
    resolver: zodResolver(schema)
  });

  const onSubmit = (data: FormData) => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register('name')} />
      {errors.name && <span>{errors.name.message}</span>}

      <input {...register('email')} />
      {errors.email && <span>{errors.email.message}</span>}

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

Step 6: APIバリデーション

// Next.js API Route
import { z } from 'zod';

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

export async function POST(request: Request) {
  const body = await request.json();
  const result = createUserSchema.safeParse(body);

  if (!result.success) {
    return Response.json(
      { errors: result.error.flatten() },
      { status: 400 }
    );
  }

  // result.data は型安全
  const user = await createUser(result.data);
  return Response.json(user, { status: 201 });
}

まとめ

Zodは型推論とバリデーションを統合し、TypeScriptプロジェクトで型安全な入力検証を実現します。