この記事の要点
• Zodのスキーマ定義と型推論によるバリデーション
• 高度なスキーマ（ネスト・配列・ユニオン）の活用
• React Hook Formとの統合によるフォームバリデーション
このチュートリアルで学ぶこと
- Zodの基本
- スキーマ定義
- バリデーション
- 型推論
- React Hook Formとの統合
Step 1: セットアップ
npm install zod
ポイント: ZodはスキーマからTypeScriptの型を自動推論できます。z.infer<typeof schema>で型定義の二重管理が不要になります。
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']
});
実践メモ: @hookform/resolversを使えば、ZodスキーマをReact Hook Formのバ���データーとして直接利用できます。サーバーとクライアントで同じスキーマを共有しましょう。
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 });
}
まとめ
注意: .parse()はバリデーション失敗時に例外をスローします。エラーハンドリングが必要な場合は.safeParse()を使いましょう。
Zodは型推論とバリデーションを統合し、TypeScriptプロジェクトで型安全な入力検証を実現します。