JavaScript 逆引き集 | 型のランタイムチェック(zod 等)

JavaScript JavaScript
スポンサーリンク

型のランタイムチェック(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
JavaScript
  • z.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 やフォームの安全性がぐっと高まります。

タイトルとURLをコピーしました