💻

Zodのフォーマット（.email等）とMockデータまで全自動推論するローカルツールを自作しましたよ。

に公開
Next.js
TypeScript
個人開発
JSON
zod
tech

既存のJSON変換ツールに限界を感じたので、Zodのフォーマット（.email等）とMockデータまで全自動推論する最強のローカルツールを自作しましたよ。

フロントエンド開発でAPIを繋ぎ込む際、レスポンスのJSONからTypeScriptの型やZodスキーマを作成する作業、どうしていますか？

多くの人が json2ts や quicktype のようなWeb上のコンバーターを使っているか、最近だとChatGPTにJSONを貼り付けて作らせているかもしれません。
しかし、既存のツールやAIには**フロントエンド開発者として見過ごせない「3つの大きな不満」**がありました。

  1. 推論が甘い：全部 string になってしまう。本当に欲しいのは z.string().email() や .datetime() のような具体的なフォーマット推論。
  2. 配列マージが甘い：配列の「1番目の要素」しか見ないツールが多く、2番目以降の要素にしか無いプロパティが型から漏れて本番で落ちる。
  3. セキュリティのリスク：企業の本番データを、裏で何をしているか分からない無料ツールやAIに貼り付けるのはコンプライアンス違反のリスクがある。

「型だけでなく、堅牢なバリデーションとMockデータまで一瞬で、しかも安全に生成したい」
そんな我儘をすべて叶えるため、**100%ローカルで完結するフロントエンド向け型ジェネレーター『TypeFlow』**を自作しました。

🔗 TypeFlow Pro

🚀 TypeFlow が既存ツールを圧倒する「神機能」

単なる「JSON → TS」の変換ツールではありません。実務の面倒な作業をゼロにするためのロジックを詰め込んでいます。

1. 値の中身の「フォーマット自動推論」と「ディープマージ」

既存のツールはキー名や型しか見ませんが、TypeFlowは**「値の中身」を正規表現で解析し、さらに「配列内の全要素の差分」**を完璧にマージします。

例えば、実務で一番イライラする「欠損プロパティがあるAPIレスポンス」を左側に貼り付けたとします。

{
  "status": "success",
  "data": [
    {
      "user_id": "550e8400-e29b-41d4-a716-446655440000",
      "profile": {
        "email": "dev@example.com",
        "avatar_url": "https://typeflow.pro/img.png"
      },
      "last_login": "2026-05-14T10:00:00Z"
    },
    {
      "user_id": "123e4567-e89b-12d3-a456-426614174000",
      "profile": {
        "email": "admin@example.com"
      },
      "last_login": "2026-05-15T12:30:00Z",
      "is_admin": true
    }
  ]
}

右側の「Zod」タブを開くと、以下のようにフォーマット付き＋欠損補完済みのスキーマが自動錬成されます。

export const RootSchema = z.object({
  status: z.string(),
  data: z.array(dataItemSchema),
});

export const dataItemSchema = z.object({
  user_id: z.string().uuid(),
  profile: profileSchema,
  last_login: z.string().datetime(),
  is_admin: z.boolean().optional(),
});

export const profileSchema = z.object({
  email: z.string().email(),
  avatar_url: z.string().url().optional(),
});
  • user_id や email は .uuid() や .email() に自動進化。
  • 2番目の要素にしかない is_admin や、1番目にしかない avatar_url を両方とも見逃さず、自動的に .optional() を付与。

これによって、コピペ後に手作業で .email() やオプショナルを付け足す作業が完全に消滅します。

2. スキーマに完全に準拠した「Mock Data」の自動生成

APIの型が決まったら、次はUIコンポーネントに流し込むダミーデータが必要です。
TypeFlowでは、推論されたフォーマット（メアドや日付）を元に、**本物そっくりのダミーデータ（JSON配列）**を瞬時に生成する「Mock Data」タブを搭載しました。
Faker.jsなどをわざわざプロジェクトにインストールして設定する手間から解放されます。

3. Zero-Tracking & 100% Local (サーバー送信なし)

エンタープライズのエンジニアが安心して使えるよう、バックエンドにデータを送信する仕組みを一切排除しました。コアの推論エンジンやパース処理はすべてブラウザ上（ローカル）で完結しています。企業の機密データが含まれたDBダンプやAPIレスポンスを貼り付けても、外部に漏れることは絶対にありません。

🛠️ 技術的な裏側（How it's built）

フロントエンドは Next.js (App Router) + Monaco Editor で構築しています。

一番苦労したのは前述の**「配列のディープマージ推論」**の実装です。
単純なコンバーターは Array.isArray(val) ? infer(val[0]) : ... と1番目の要素だけで型を決めてしまいます。
TypeFlowでは、配列の中に要素が何百個あっても、**すべてのオブジェクトを走査（AST解析）してプロパティを安全にマージする（欠損があれば any やオプショナルにフォールバックする）**という、QuickTypeと同等レベルの厳格なパーサーエンジンを自前で実装しています。

💡 まとめ

自分が毎日の業務で使うために「どうしても欲しかった機能」だけを限界まで詰め込みました。

TypeScript, Zodだけでなく、Go, Rust, Python, Prisma, GraphQLなどへの即時変換にも対応しています（現在300以上の変換ルートをサポート）。

基本機能はすべて無料で使えます。一部の高度な機能（Mock生成や高度な設定保存）も、1日3回まではフリートライアルで体験できるようになっているので、ぜひ使ってみてください！

もし「便利だ！」と思ったら、ぜひ周りのエンジニアにもシェアしていただけると、個人開発の励みになります🙏

Discussion