型のランタイムチェック(Zod ライブラリ) — z.string().parse(x)
JavaScript は柔軟ですが「型の間違い」によるバグが起きやすいです。
TypeScript を使えばコンパイル時に型チェックできますが、実行時(ランタイム)に型を保証するには Zod のようなライブラリが便利です。
初心者は「Zod = データの形をチェックする先生」と覚えると理解しやすいです。
基本のコード例
import { z } from "zod";
// 文字列型を定義
const schema = z.string();
// データをチェック
schema.parse("Hello"); // OK
schema.parse(123); // エラー: Expected string, received number
JavaScriptz.string()→ 「文字列型」を定義。.parse(x)→ データxがその型に合っているかチェック。- 合っていれば値を返す、間違っていればエラーを投げる。
よく使うテンプレート集
数値チェック
const numSchema = z.number();
numSchema.parse(42); // OK
numSchema.parse("42"); // エラー
JavaScriptオブジェクトチェック
const userSchema = z.object({
id: z.number(),
name: z.string()
});
userSchema.parse({ id: 1, name: "Aki" }); // OK
userSchema.parse({ id: "x", name: "Aki" }); // エラー
JavaScript配列チェック
const arrSchema = z.array(z.string());
arrSchema.parse(["apple", "banana"]); // OK
arrSchema.parse([1, 2]); // エラー
JavaScript条件付きチェック
const ageSchema = z.number().min(18).max(120);
ageSchema.parse(25); // OK
ageSchema.parse(10); // エラー: 18未満
JavaScript例題: ユーザー登録データのチェック
const registerSchema = z.object({
username: z.string().min(3),
age: z.number().min(18)
});
try {
registerSchema.parse({ username: "Mi", age: 16 });
} catch (err) {
console.error("バリデーションエラー:", err.errors);
}
JavaScript- 効果: ユーザー名が短すぎたり、年齢が 18 未満ならエラーになる。
実務でのコツ
- API の入力チェックに最適: サーバーが受け取った JSON を Zod で検証。
- フロントでも使える: フォーム入力チェックに利用可能。
- TypeScript と相性抜群: Zod のスキーマから型を自動生成できる。
const userSchema = z.object({
id: z.number(),
name: z.string()
});
type User = z.infer<typeof userSchema>; // TypeScript型に変換
JavaScript練習問題(商品データのチェック)
const productSchema = z.object({
id: z.string(),
price: z.number().positive(),
tags: z.array(z.string())
});
try {
productSchema.parse({ id: "p1", price: -100, tags: ["sale"] });
} catch (err) {
console.error(err.errors);
}
JavaScript直感的な指針
- Zod = 実行時の型チェックライブラリ。
z.string().parse(x)→ 文字列かどうかをチェック。- オブジェクトや配列も定義できる。
- TypeScript と組み合わせると「コンパイル時+実行時」の二重チェックが可能。
これを覚えれば「受け取ったデータが正しいかどうか」をランタイムで保証でき、API やフォームの安全性がぐっと高まります。
