TypeScriptでデータを検証する簡単で効果的な方法をお探しですか？データバリデーションの方法を革新する、Zodライブラリをご紹介します。2分で、なぜZodが不可欠になったのかを理解できます！
なぜZodなのか？🎯
Zodは以下の特徴を持つバリデーションライブラリです：
- 直感的で簡潔な構文
- TypeScriptとの完璧な統合
- 自動的な型推論
- 明確でカスタマイズ可能なエラーメッセージ
クイックインストール ⚙️
1npm install zod
2# または
3yarn add zod
30秒でわかるZodの基本 🚀
1import { z } from 'zod';
2
3// 簡単なスキーマ定義
4const userSchema = z.object({
5 name: z.string().min(2, '名前は2文字以上必要です'),
6 age: z.number().min(18, 'ユーザーは成人である必要があります'),
7 email: z.string().email('無効なメール形式です'),
8});
9
10// 型は自動的に推論されます！
11type User = z.infer<typeof userSchema>;
12
13// データバリデーション
14const validateUser = (data: unknown) => {
15 const result = userSchema.safeParse(data);
16 return result.success ? result.data : result.error.issues;
17};
高度な機能 💪
条件付きバリデーション
1const formSchema = z
2 .object({
3 type: z.enum(['individual', 'business']),
4 taxId: z.string().optional(),
5 })
6 .refine((data) => !(data.type === 'business' && !data.taxId), {
7 message: '事業者の場合は税務IDが必要です',
8 });
自動変換
1const dateSchema = z.string().transform((str) => new Date(str));
2const numberSchema = z.string().transform(Number);
ベストプラクティス 🎓
- より優雅なエラー処理のため、
parseよりsafeParseを使用：
1const result = userSchema.safeParse(data);
2if (!result.success) {
3 console.log(result.error.issues);
4 return;
5}
6// result.dataを安全に使用
- 保守性向上のためスキーマを再利用：
1const addressSchema = z.object({
2 street: z.string(),
3 city: z.string(),
4 zipCode: z.string().regex(/^\d{5}$/),
5});
6
7const userSchema = z.object({
8 // ...他のフィールド
9 address: addressSchema,
10});
一般的なユースケース 📋
APIバリデーション
1const apiResponseSchema = z.object({
2 status: z.number(),
3 data: z.array(userSchema),
4 metadata: z.record(z.string()),
5});
6
7async function fetchUsers() {
8 const response = await fetch('/api/users');
9 const data = await response.json();
10
11 const result = apiResponseSchema.safeParse(data);
12 if (!result.success) {
13 throw new Error('無効なAPIレスポンス');
14 }
15
16 return result.data;
17}
フォームバリデーション
1const loginSchema = z.object({
2 email: z.string().email(),
3 password: z.string().min(8),
4});
5
6function handleSubmit(formData: unknown) {
7 const result = loginSchema.safeParse(formData);
8 if (!result.success) {
9 // エラーを表示
10 return;
11 }
12 // 検証済みデータを処理
13}
さらなる学習 🎈
まとめ ✨
Zodは、TypeScriptでのデータバリデーションを大幅に簡素化し、型安全性を確保します。その直感的な構文と柔軟性は、TypeScript開発者にとって価値のあるツールとなっています。
