JSON から TypeScript 型と JSON Schema を生成

ツール概要：JSON → TypeScript & JSON Schema 変換ツール

任意の JSON を貼り付けるだけで、型安全な TypeScript 定義と JSON Schema を同時に生成します。API 契約や設定ファイル、モックデータをフロント／バック間で常に同期させましょう。

JSON → TypeScript & JSON Schema 変換ツールとは？

JSON → TypeScript & JSON Schema 変換ツールはJSONとTypeScriptの変換を素早く行い、すぐ使える結果を出力します。

使い方

1. JSONの内容を貼り付けるかパラメータを入力します。
2. TypeScriptの出力形式を選び、オプションを調整します。
3. 結果を確認してコピーまたはダウンロードします。

よくある利用シーン

• JSON↔TypeScriptのフォーマット移行
• JSONデータをTypeScriptのワークフローやコード生成に利用
• 変換結果の仕様チェック

❓ よくある質問

Q1: 変換に失敗する/空になる？
A: JSONの入力が正しいか確認してください。

Q2: 出力が違って見える？
A: TypeScriptのルールに合わせて整形される場合があります。

Q3: 一括処理は？
A: 安定のため小分けにして処理してください。

✨ 特長

• 🧱 型と Schema を両立：1 つの JSON から TypeScript インターフェースと JSON Schema を自動生成し、二重管理を解消。
• ⚙️ 柔軟な出力：ルートインターフェース名や Schema タイトル、インデント幅を調整して、そのままリポジトリに保存できます。
• 🧪 賢い推論：ネスト配列、ユニオン、null を自動検出し、必須・任意を JSON Schema に反映。
• 🌍 多言語 UI：ToolMi の既存レイアウトに沿い、/en/ や /zh/ のルーティングにも対応。

📋 サンプル

入力 JSON

{
  "project": "ToolMi",
  "version": "1.0.0",
  "features": [
    {
      "name": "Type generator",
      "status": "stable",
      "contributors": 8
    },
    {
      "name": "JSON schema",
      "status": "beta",
      "contributors": 5
    }
  ],
  "meta": {
    "updatedAt": "2024-03-12T08:45:00Z",
    "tags": ["json", "typescript", "schema"],
    "production": true
  }
}

出力 TypeScript

export interface RootObject {
  project: string;
  version: string;
  features: FeatureItem[];
  meta: Meta;
}

export interface FeatureItem {
  name: string;
  status: string;
  contributors: number;
}

export interface Meta {
  updatedAt: string;
  tags: string[];
  production: boolean;
}

出力 JSON Schema

{
  "$schema": "https://json-schema.org/draft/2020-12/schema",
  "title": "JSON Schema",
  "type": "object",
  "additionalProperties": false,
  "required": ["project", "version", "features", "meta"],
  "properties": {
    "project": { "type": "string" },
    "version": { "type": "string" },
    "features": {
      "type": "array",
      "items": {
        "type": "object",
        "additionalProperties": false,
        "required": ["name", "status", "contributors"],
        "properties": {
          "name": { "type": "string" },
          "status": { "type": "string" },
          "contributors": { "type": "integer" }
        }
      }
    },
    "meta": {
      "type": "object",
      "additionalProperties": false,
      "required": ["updatedAt", "tags", "production"],
      "properties": {
        "updatedAt": { "type": "string" },
        "tags": {
          "type": "array",
          "items": { "type": "string" }
        },
        "production": { "type": "boolean" }
      }
    }
  }
}

🔧 使い方のヒント

1. JSON を整形：末尾カンマやコメントを削除し、正しい構造で貼り付けます。
2. ルート型に名前を付ける：UserProfileResponse のように用途を表す名前にすると IDE で探しやすくなります。
3. 実データで検証：本番 API のレスポンスを貼り付けて差分を検出すれば、フィールド追加もすぐ把握できます。
4. ファイルを保存：types.d.ts や schema.json をリポジトリに含めて Pull Request でレビューしましょう。