devtools-hub

JSON to Zod

JSON を貼り付けるだけで Zod スキーマを自動生成

TypeScriptWeb開発バリデーション

JSON オブジェクトをペーストすると TypeScript 用 Zod スキーマをリアルタイム生成。string / number / boolean / null / 配列 / ネストオブジェクトの型を自動推論します。全フィールドへの .optional() 付与や整数を z.number().int() にするオプション付き。

広告

JSON to Zod

JSON 入力

Zod スキーマ

import { z } from 'zod'

export const schema = z.object({
  id: z.number().int(),
  name: z.string(),
  email: z.string(),
  age: z.number().int(),
  active: z.boolean(),
  score: z.number(),
  tags: z.array(z.string()),
  address: z.object({
    city: z.string(),
    zip: z.string(),
  }),
  nickname: z.null(),
})

Features

  • JSON 入力から Zod スキーマをリアルタイム生成
  • string / number / boolean / null / 配列 / オブジェクト / ネスト対応
  • 配列内の複数型を z.union([...]) で表現
  • 全フィールドに .optional() を付けるトグル
  • 整数を z.number().int() に変換するオプション
  • 生成スキーマをワンクリックでコピー

Desktop Only

有料版のみ

デスクトップ版(BOOTH)でのみ使える機能

  • .ts ファイルとして保存

Desktop App

デスクトップ版を入手する

Web版にはない機能をデスクトップ版で追加しています。

  • .ts ファイルとして保存
BOOTH で見る
広告

Zodとは — TypeScriptで実行時バリデーションを実現するスキーマライブラリ

ZodはTypeScriptファーストのスキーマバリデーションライブラリです。型定義とバリデーションを一箇所で管理でき、APIのレスポンス検証・フォームバリデーション・環境変数の型安全な読み込みなどに広く使われています。

Zodの基本的な使い方

import { z } from "zod" でインポートし、z.object({name: z.string(), age: z.number()})のようにスキーマを定義します。schema.parse(data) で検証し失敗時はエラーをthrow、schema.safeParse(data) で{success, data/error}オブジェクトを返します。z.infer<typeof schema> でTypeScriptの型を自動抽出できます。

JSONからZodスキーマを生成するメリット

APIのレスポンスを手動でZodスキーマに変換する作業はミスが起きやすく時間がかかります。JSON to ZodにJSONを貼り付けるとネスト・配列・null・boolean・数値を含む構造を自動解析してZodスキーマを生成します。生成されたスキーマは必要に応じて.optional()を追加したりバリデーションルールを強化して使います。

よく使うZodメソッド

z.string().min(1)(最小文字数)・z.string().email()(メールアドレス)・z.string().url()(URL)・z.number().int()(整数のみ)・z.number().min(0)(0以上)・z.array(z.string())(文字列配列)・z.union([z.string(), z.null()])(nullableな文字列)などが頻出です。z.enum(["a","b","c"])で取りうる値を限定できます。

Zodの活用シーン

Next.jsのAPIルートでリクエストボディを検証する・React Hook Formのresolverとして使う・環境変数をz.object({DATABASE_URL: z.string().url()})で型安全に読み込む・tRPCのルーター定義に使うなど、TypeScriptプロジェクトの様々な場面でZodは活躍します。JSON to Zodで生成したスキーマをベースにプロジェクト固有のバリデーションルールを追加できます。

Related Tools

JSON to TypeScript

JSONからTypeScriptのinterface型定義を自動生成

開発者向けTypeScriptJSON

使ってみる →

BOOTH

Meta Tag Generator

title / OGP / Twitter Card の meta タグを GUI で生成・コピー

SEOHTMLWeb開発

使ってみる →

BOOTH

URL Parser / Builder

URLを構成要素に分解・クエリパラメータをGUI編集して再構築

URLWeb開発開発者向け

使ってみる →

BOOTH

このツールを共有する