MT
My Toolbox

JSON → TypeScript コンバーター — API レスポンスからインターフェースを生成

JSON サンプルを貼り付けて、ネストされたオブジェクトや配列の推論付き TypeScript interface または type alias を即座に生成。登録不要、サーバー不要、完全ブラウザ動作。

JSON入力
TypeScript出力

なぜ JSON から型を生成するのか？

TypeScript の強みは型システムですが、API レスポンスのインターフェースを手書きするのは退屈でミスしやすい作業です。フィールド名のタイプミス一つで実際のデータと一致しない型ができ、ランタイムエラーの原因になります。

このツールは実際の JSON サンプル（API、データベースエクスポート、ドキュメントなど）から正確な TypeScript インターフェースを生成します。ネストされたオブジェクトは個別の名前付きインターフェースに、配列は適切な要素型になります。

生成コードはそのままプロジェクトに貼り付けられます。出発点として使い、オプショナルフィールドの指定、JSDoc コメント追加、型名の調整を行ってください。

使い方

  1. 入力エリアに JSON サンプルを貼り付けます。デモ用サンプルが事前に読み込まれています。
  2. ルート型名を設定します（デフォルトは "Root"）。"UserResponse" など意味のある名前を推奨。
  3. "type を使用" を切り替えて type alias 出力に変更可能。
  4. "フィールドをオプショナルに" で全プロパティに ? を追加（部分レスポンス向け）。
  5. TypeScript 出力はリアルタイム更新。コピーボタンで取得できます。

利用シーン

API レスポンスの型付け

API を呼び出し、JSON レスポンスをコピーして貼り付け。フィールドを一つずつ手書きする代わりに数秒で型安全なインターフェースが得られます。

新プロジェクトの立ち上げ

既存 API を利用する新しいフロントエンドを始める場合、コンポーネントを書く前にサンプルデータからすべてのレスポンス型を生成できます。

JS から TS への移行

動作中の JS コードの console.log 出力からデータ構造がわかる場合、それを貼り付けて移行に必要な型を生成できます。

ドキュメントとコードレビュー

API ドキュメントの例からインターフェースを生成し、手書きの型が実際の契約と一致するか検証できます。

ヒント

1.

代表的なサンプルを使う

可能なすべてのフィールドを含むレスポンスを貼り付けてください。条件付きフィールドは複数レスポンスを合成するか、生成後にオプショナルにしてください。

2.

ルート型名は意味のある名前に

"Root" のままにしないでください。"UserProfile"、"OrderListResponse" など — 将来の自分が感謝します。

3.

配列型を注意深く確認

異なる構造のオブジェクトを含む配列ではユニオン型が生成されます。データの不整合を調査する手がかりになることもあります。

4.

生成された型は出発点

JSDoc コメントを追加し、本当にオプショナルなフィールドを指定し、ステータスコードなどには enum を検討してください。

例

シンプルな API レスポンス

プリミティブ型と配列を持つフラットなユーザーオブジェクト。

Input

{"id":1,"name":"Jane","email":"jane@example.com","roles":["admin","editor"]}

Output

export interface User {
  id: number;
  name: string;
  email: string;
  roles: Array<string>;
}

ネストされたオブジェクト

ネストされた profile オブジェクトから別のインターフェースが生成されます。

Input

{"id":1,"profile":{"bio":"エンジニア","avatar":"https://example.com/img.jpg"}}

Output

export interface User {
  id: number;
  profile: UserProfile;
}

export interface UserProfile {
  bio: string;
  avatar: string;
}

機能

  • JSON 編集時にリアルタイムで型生成
  • ネストされたオブジェクトは自動的に名前付きインターフェースに
  • 配列要素の型推論（ユニオン型対応）
  • interface と type alias の切り替え
  • オプショナルフィールドモード
  • ルート型名の設定可能

よくある質問

オブジェクト配列は処理できますか？

はい。最初の要素から要素型を推論し、名前付きインターフェースを生成します。

null 値はどう処理されますか？

null は "null" 型になります。"string | null" にする場合は生成後に手動で変更してください。

JSON Schema から生成できますか？

このツールは JSON サンプル（実データ）から生成します。Schema からの変換は json-schema-to-typescript などの npm パッケージを使用してください。

データは外部に送信されますか？

いいえ。変換は完全にブラウザのローカル JavaScript で実行されます。内部 API レスポンスや独自データ構造にも安全に使えます。

ヒントと関連ワークフロー