JSON to Yup バリデーションスキーマ生成ツール
型安全Yupスキーマ合成

JSON to Yup バリデーションスキーマ生成ツール

JSONサンプルを型安全なYupオブジェクト検証スキーマに変換し、yup.string()、yup.number()、yup.array()、必須ルールを自動生成します。

100% クライアント側プライバシー
サーバー送信ゼロ
プリセット:
インデント:
必須ルール方針:
ソースJSONデータ
import * as yup from "yup";

// --- Inferred Nested Sub-Schemas ---
const OrderCustomerSchema = yup.object({
    id: yup.number().integer().required(),
    fullName: yup.string().required(),
    email: yup.string().email().required(),
    phone: yup.string().required(),
    tier: yup.string().required(),
    loyaltyPoints: yup.number().integer().required(),
  });
const OrderShippingAddressCoordinatesSchema = yup.object({
      latitude: yup.number().required(),
      longitude: yup.number().required(),
    });
const OrderShippingAddressSchema = yup.object({
    street: yup.string().required(),
    suite: yup.string().required(),
    city: yup.string().required(),
    state: yup.string().required(),
    postalCode: yup.string().required(),
    country: yup.string().required(),
    coordinates: OrderShippingAddressCoordinatesSchema,
  });
const OrderItemsItemSchema = yup.object({
    sku: yup.string().required(),
    title: yup.string().required(),
    quantity: yup.number().integer().required(),
    unitPrice: yup.number().required(),
    discount: yup.number().nullable(),
    tags: yup.array().of(yup.string().required()).required(),
    inStock: yup.boolean().required(),
  });
const OrderPaymentSummarySchema = yup.object({
    currency: yup.string().required(),
    subtotal: yup.number().integer().required(),
    tax: yup.number().required(),
    shippingFee: yup.number().integer().required(),
    grandTotal: yup.number().required(),
    transactionRef: yup.string().required(),
    status: yup.string().required(),
  });

// --- Root Yup Schema Definition ---
orderSchema = yup.object({
  orderId: yup.string().uuid().required(),
  orderNumber: yup.string().required(),
  createdAt: yup.string().datetime().required(),
  isFulfilled: yup.boolean().required(),
  customer: OrderCustomerSchema,
  shippingAddress: OrderShippingAddressSchema,
  items: yup.array().of(OrderItemsItemSchema).required(),
  paymentSummary: OrderPaymentSummarySchema,
}).required();

// --- Inferred TypeScript Types ---
OrderCustomerType = yup.InferType<typeof OrderCustomerSchema>;
OrderShippingAddressCoordinatesType = yup.InferType<typeof OrderShippingAddressCoordinatesSchema>;
OrderShippingAddressType = yup.InferType<typeof OrderShippingAddressSchema>;
OrderItemsItemType = yup.InferType<typeof OrderItemsItemSchema>;
OrderPaymentSummaryType = yup.InferType<typeof OrderPaymentSummarySchema>;
OrderType = yup.InferType<typeof orderSchema>;
構造の複雑さ
階層の深さ: 45 サブスキーマ
検出された形式
3 ルール検出Email, UUID, ISO, URL
TypeScript型定義
InferType ONsmart

100% クライアントサイドAST推論

JSONの構文解析とYupスキーマ生成はブラウザ内のローカル環境で完結し、外部サーバーへの通信は一切行われません。

型安全なYupとTypeScript InferType

再帰的なyup.object()、yup.array().of()、スマートフォーマット検証、FormikやReact Hook Formに対応した型定義を出力します。

スマートフォーマット検証とNull制御

メールアドレス、UUID、ISO日時、URL、数値制約を自動検出し、柔軟なrequired/nullableルールを生成します。

技術リファレンス&アーキテクチャガイド

JSON to Yup バリデーションスキーマ生成ツール — リファレンスガイド

JSONサンプルを型安全なYupオブジェクト検証スキーマに変換し、yup.string()、yup.number()、yup.array()、必須ルールを自動生成します。

主要パラメータ&設定項目

ルートスキーマ名文字列 (string)

エクスポートされる最上位Yupスキーマおよび推論されるTypeScript型定義の変数名。

初期値: rootSchema
サブスキーマの抽出真偽値 (boolean)

ネストされたオブジェクト構造をプロパティ名に基づいた独立した再利用可能スキーマ宣言に分割します。

初期値: true
スマートフォーマット検出真偽値 (boolean)

RFC 5322メール、UUID、URL、ISO 8601日時文字列を自動検出し、.email()、.uuid()、.url()、.date()ルールを付与します。

初期値: true
必須ルール設定列挙型 (all | optional | non-null)

推論されたプロパティに.required()を付与するか、.optional()とするか、サンプルのnull状態に応じるかを制御します。

初期値: all
未知プロパティの拒否 (.noUnknown)真偽値 (boolean)

オブジェクトスキーマに.noUnknown()を付加し、定義されていない未知のキーを含むペイロードを弾きます。

初期値: false
TypeScript InferType型のエクスポート真偽値 (boolean)

静的型と実行時スキーマを同期するため、export type RootType = yup.InferType<typeof rootSchema>; を出力します。

初期値: true

プロの活用テクニック&推奨設定

FormikおよびReact Hook Formとのシームレスな統合

生成されたスキーマはFormikのvalidationSchema={rootSchema}や、React Hook FormのuseForm({ resolver: yupResolver(rootSchema) })(@hookform/resolvers/yup)にそのまま渡して即座にフォーム検証を実行できます。

abortEarly: falseによる全フィールドエラーの一括収集

Yupのデフォルト動作では最初のエラーで検証が中断されます。schema.validate(data, { abortEarly: false })を指定することで、すべての検証失敗をerr.innerに集約し、フォーム全体の入力エラーを一括表示できます。

yup.InferTypeによる型定義の二重管理排除

個別のinterfaceを手動定義せず、export type FormData = yup.InferType<typeof rootSchema>; を活用することで、バリデーションスキーマの変更がコンパイル時のTypeScript型へ即座に自動反映されます。

.transform()と.trim()による検証前のデータサニタイズ

yup.string().trim()や.transform((curr, orig) => orig === '' ? null : curr)を連結することで、空文字列のnull化や前後の余分な空白除去をバリデーションと同時に安全に処理できます。

よくあるトラブルと解決策

ValidationErrorが最初のエラーメッセージしか返さず、他の無効なフィールドのエラーがフォームに表示されない。

Yupは初期設定でabortEarly: trueとなっています。schema.validate(data)またはvalidateSync(data)の呼び出し時に第2引数として{ abortEarly: false }を渡し、err.inner配列から全フィールドのエラーを抽出してください。

JSONに含まれる追加プロパティが検証後の出力から消去される、または意図しない検証エラーが発生する。

Yupは未定義のキーをデフォルトで自動削除(strip)します。未許可のキーを厳格に拒否したい場合は.noUnknown()を付与し、未定義キーをそのまま保持したい場合はvalidateのオプションに{ stripUnknown: false }を指定してください。

ISO 8601日時文字列が検証に失敗する、または無効なJavaScript Dateオブジェクトに変換されてしまう。

yup.date()は内部でnew Date()による変換を試みるため、空文字列などで無効な日付となります。.nullable().transform((curr, orig) => orig === '' ? null : curr)を適用するか、厳密な文字列検証としてyup.string().matches(...)を使用してください。

よくある質問 (FAQ)

TypeScriptプロジェクトにおけるYupとZodの主な違いは何ですか?▼

どちらも実行時スキーマ検証ライブラリですが、ZodはTypeScriptの型推論を中心に設計されたイミュータブルな設計が特徴です。一方、YupはFormikやReact Hook FormなどのReactエコシステムで長年のデファクトスタンダードとして広く採用されており、.when()による条件付き検証や柔軟な型キャスト・データ変換機構に強みがあります。

生成されたYupスキーマをFormikやReact Hook Formに接続するにはどうすればよいですか?▼

Formikの場合はコンポーネントの属性に直接指定します:<Formik validationSchema={rootSchema} ... />。React Hook Formの場合は@hookform/resolversを導入し、useForm({ resolver: yupResolver(rootSchema) })と設定するだけで完全な型安全フォーム検証が動作します。

配列内に異なる型のデータが混在する場合、どのようにスキーマが生成されますか?▼

ジェネレーターは配列内のすべての要素を走査します。構造が共通している場合は単一のyup.array().of(yup.object({...}))を出力し、異なる型やキーが存在する場合は競合するプロパティをオプショナルとして統合したスキーマを合成します。

入力したJSONデータやバリデーションコードが外部サーバーに送信されることはありますか?▼

いいえ、一切送信されません。すべてのJSON構文解析、スキーマ合成、型推論処理はブラウザ内のJavaScriptサンドボックスで100%クライアントサイド実行されます。外部サーバーへの通信や保存は発生しません。

interfaceを手書きすることなく、生成されたYupスキーマからTypeScript型を抽出できますか?▼

はい、可能です。Yupには組み込みのユーティリティ型yup.InferType<typeof schema>が用意されています。export type MyType = yup.InferType<typeof rootSchema>; を宣言するだけで、実行時検証ルールとコンパイル時型が完全に同期します。

関連するおすすめ開発ツール

すべてのツール →
JSON から Joi オブジェクト検証スキーマ自動生成ガイド開発ツール

サンプル JSON データ構造から Joi.object()、Joi.string()、Joi.number()、Joi.array() などの制約を備えた Joi バリデーションスキーマを瞬時に自動生成します。

ツールを開く→
JSON から Apache Avro スキーマ (.avsc) 変換ツール開発ツール

JSONペイロードから、名前空間、プリミティブ型、論理型、null許容共用体型、スキーマ進化ルールを備えた本番仕様のApache Avroスキーマ(.avsc)定義を生成します。

ツールを開く→
GraphQL SDL to Zod バリデーションスキーマ生成開発ツール

GraphQL SDL の型定義、クエリ、入力を、Null 許容性を適切に制御したランタイム Zod バリデーションスキーマ(z.object、z.string、z.array)へ自動変換します。

ツールを開く→
GraphQL SDL to TypeScript 型・インターフェース変換ツール開発ツール

GraphQL スキーマ定義言語 (SDL) の type、input、enum をクリーンで依存関係ゼロの TypeScript インターフェースや型エイリアスにブラウザ上で直接変換します。

ツールを開く→
Kubernetes ConfigMap & Secret YAML ジェネレーター開発ツール

Base64データエンコード、stringData、TLS、Dockerレジストリ認証、およびimmutableリソースフラグに対応したKubernetes ConfigMapおよびSecretマニフェスト生成ユーティリティ。

ツールを開く→
Kubernetes HorizontalPodAutoscaler (HPA v2) 生成ツール開発ツール

CPU・メモリ使用率ターゲット、カスタムメトリクス、スケールアップ/ダウンの安定化ポリシーを含む Kubernetes HPA v2 (autoscaling/v2) マニフェストを生成します。

ツールを開く→