Zod dengan Claude Code

Zodでtype safetyなvalidasiをpembangunan

Zod 「スキーマdefinisi = 型definisi」 実現 TypeScriptファースト validasilibrary.Claude Code スキーマ 設計 dari kompleksなvalidasiロジック implementasiま 、的確 サポート くれ.

dasar的なスキーマdefinisi

Claude Code データstruktur 伝えるだけ 、tepatなZodスキーマ generateされ.

> penggunaregistrasiform Zodスキーマ buatkan.
> メール形式チェック、パスワード強度verifikasi、konfirmasiパスワード 一致チェック 含めて。

import { z } from "zod";

const registerSchema = z
  .object({
    name: z
      .string()
      .min(2, "名前 2文字以上 input ください")
      .max(50, "名前 50文字以内 input ください"),
    email: z
      .string()
      .email("efektifなメールアドレス input ください"),
    password: z
      .string()
      .min(8, "パスワード 8文字以上 input ください")
      .regex(/[A-Z]/, "大文字 1文字以上含めてください")
      .regex(/[a-z]/, "小文字 1文字以上含めてください")
      .regex(/[0-9]/, "数字 1文字以上含めてください"),
    confirmPassword: z.string(),
    agreeToTerms: z.literal(true, {
      errorMap: () => ({ message: "pemanfaatan規約へ 同意 diperlukan す" }),
    }),
  })
  .refine((data) => data.password === data.confirmPassword, {
    message: "パスワード 一致しません",
    path: ["confirmPassword"],
  });

// スキーマから型 推論
type RegisterFormData = z.infer<typeof registerSchema>;

verifikasi ネストされたobjekとarray

kompleksなデータstruktur スキーマ juga 、Claude Code struktur 説明すれば正確 generate bisa dilakukan.

const orderSchema = z.object({
  customer: z.object({
    name: z.string().min(1),
    email: z.string().email(),
    phone: z.string().regex(/^0\d{9,10}$/, "efektifな電話番号 input ください"),
  }),
  items: z
    .array(
      z.object({
        productId: z.string().uuid(),
        quantity: z.number().int().positive().max(99),
        options: z.record(z.string()).optional(),
      })
    )
    .min(1, "商品 1つ以上選択 ください"),
  shippingAddress: z.object({
    postalCode: z.string().regex(/^\d{3}-?\d{4}$/, "郵便番号 形式 正しくありません"),
    prefecture: z.string().min(1),
    city: z.string().min(1),
    street: z.string().min(1),
    building: z.string().optional(),
  }),
  paymentMethod: z.enum(["credit_card", "bank_transfer", "convenience_store"]),
  notes: z.string().max(500).optional(),
});

type OrderData = z.infer<typeof orderSchema>;

integrasi Zodとtanstack/react-hook-form

formlibrary dan Zod 組み合わせるpola.

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

const loginSchema = z.object({
  email: z.string().email("efektifなメールアドレス input ください"),
  password: z.string().min(1, "パスワード input ください"),
  rememberMe: z.boolean().default(false),
});

type LoginFormData = z.infer<typeof loginSchema>;

function LoginForm() {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<LoginFormData>({
    resolver: zodResolver(loginSchema),
  });

  const onSubmit = (data: LoginFormData) => {
    // data type safety
    console.log(data.email); // string
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("email")} />
      {errors.email && <span>{errors.email.message}</span>}
      <input type="password" {...register("password")} />
      {errors.password && <span>{errors.password.message}</span>}
      <button type="submit">ログイン</button>
    </form>
  );
}

カスタムvalidasiとtransform

Zod transform dan refine pemanfaatan 、データkonversi dan validasi 同時 行え.

const environmentSchema = z.object({
  PORT: z.string().transform(Number).pipe(z.number().int().min(1).max(65535)),
  DATABASE_URL: z.string().url(),
  NODE_ENV: z.enum(["development", "production", "test"]).default("development"),
  LOG_LEVEL: z.enum(["debug", "info", "warn", "error"]).default("info"),
  CORS_ORIGINS: z
    .string()
    .transform((s) => s.split(",").map((o) => o.trim()))
    .pipe(z.array(z.string().url())),
});

// environment variable パース dan verifikasi 一度 実行
const env = environmentSchema.parse(process.env);
// env.PORT number 型、env.CORS_ORIGINS string[] 型

スキーマ設計 APIrequest・response

API endpointご dan スキーマ definisiし、request dan response 両方 verifikasi pola.

// 共通 paginationparameter
const paginationSchema = z.object({
  page: z.coerce.number().int().positive().default(1),
  perPage: z.coerce.number().int().min(1).max(100).default(20),
});

// pencarianparameter
const userSearchSchema = paginationSchema.extend({
  q: z.string().optional(),
  role: z.enum(["admin", "editor", "viewer"]).optional(),
  sortBy: z.enum(["name", "createdAt", "email"]).default("createdAt"),
  sortOrder: z.enum(["asc", "desc"]).default("desc"),
});

// API handler penggunaan
async function handleUserSearch(req: Request) {
  const url = new URL(req.url);
  const params = Object.fromEntries(url.searchParams);
  const query = userSearchSchema.parse(params);
  // query 完全 type safety
}

Summary

Zod dan Claude Code 組み合わせ より、validasiロジック implementasi速度 大幅 向上.スキーマ dari 型 推論 mekanisme oleh 、型definisi dan validasiルール 二重manajemen juga 解消 bisa dilakukan.

formvalidasi dan integrasi React Hook Form実践panduan 、type safetyなAPI pembangunan tRPCtype safetyAPIpengembangan silakan lihat.Zod公式dokumen juga konfirmasi おき.