JSON→TypeScript 型ガイド

なぜJSONからTypeScript型への変換が必要か

フロントエンドとバックエンドの協業では、APIレスポンスは通常JSON形式です。TypeScriptインターフェースを手動で書くのは時間がかかり、エラーも起きやすいです。特にフィールドが多く、ネストが深い場合に顕著です。型定義の自動生成で：

• 手書きインターフェースの作業量を削減
• フィールド名のタイプミスを防止
• フロントエンドとバックエンドの型の一貫性を維持
• コード補完とリファクタリングを加速

基本的な変換ルール

シンプルなオブジェクト

{
  "id": 1,
  "name": "太郎",
  "active": true
}

生成結果：

interface RootObject {
  id: number;
  name: string;
  active: boolean;
}

型マッピングルール

JSON値	TypeScript型
"hello"	string
42	number
3.14	number
true / false	boolean
null	null
[1, 2, 3]	number[]
{"a": 1}	ネストされたインターフェース

JSON→TypeScriptツールの使い方

ステップ1：JSONデータを取得

ブラウザのDevToolsのNetworkパネルからAPIレスポンスをコピーするか、既存のJSONデータを直接貼り付け。

ステップ2：ツールを開く

JSON→TypeScriptツールにアクセスし、JSONを入力エリアに貼り付け。

ステップ3：生成オプションを設定

• ルートインターフェース名：デフォルトは RootObject、意味のある名前に変更を推奨
• エクスポート修飾子：interface または type を選択
• オプショナルフィールド：null 値のフィールドをオプショナル（?）にするか
• 読み取り専用修飾子：全フィールドに readonly を追加するか

ステップ4：生成してコピー

生成ボタンをクリック。TypeScript型定義が即座に出力され、ワンクリックでクリップボードにコピー可能。

ネストされたオブジェクトの処理

深くネストされたJSONは自動的に複数のインターフェースに分割されます：

{
  "user": {
    "profile": {
      "avatar": "url",
      "bio": "text"
    }
  }
}

生成結果：

interface Profile {
  avatar: string;
  bio: string;
}

interface User {
  profile: Profile;
}

interface RootObject {
  user: User;
}

生成されたインターフェースは別々のファイルに分割し、モジュールごとに整理することを推奨。

ユニオン型の処理

配列に異なる型の要素が含まれる場合：

{
  "items": ["text", 42, true]
}

ツールはユニオン型を生成：

interface RootObject {
  items: (string | number | boolean)[];
}

オプショナルフィールドの処理

APIレスポンスで一部のフィールドが存在しない場合、一般的な対応方法：

• フィールド値が null の場合、オプショナルとしてマーク：bio?: string | null
• フィールドが欠落している場合、オプショナルとしてマーク：bio?: string
• ツールで「nullフィールドをオプショナルにする」を有効にすると自動処理

実践：実際のAPIから型を生成

1. ブラウザのDevTools → Networkパネルを開く
2. 対象のAPIリクエストを見つけ、右クリック → Copy Response
3. JSON→TypeScriptツールに貼り付け
4. ルートインターフェース名を設定（例：ApiResponse）
5. 生成後、プロジェクトの types/ ディレクトリにコピー

よくある問題

問題	原因	解決方法
型が具体的すぎる	単一データから型推論	複数のサンプルデータを追加
ネストが深すぎる	JSON構造が複雑	一部のインターフェースを手動で統合
配列要素の型が不一致	混合型の配列	ユニオン型またはジェネリクスを使用
日付がstringになる	JSONに日付型がない	手動で Date 型に変更

応用テクニック

1. JSONフォーマッターでJSONを整形してから型を生成
2. 同じ方法で JSON→Goツール でGo構造体を生成可能
3. 生成されたインターフェースはZodと組み合わせてランタイムバリデーションを推奨
4. 大規模プロジェクトではopenapi-typescriptでSwaggerから生成を推奨

まとめ

JSONからTypeScript型を自動生成することは、開発効率を向上させる強力な手段です。JSON→TypeScriptツールを使えば数秒で型定義が完了し、手動書き込みの手間とエラーを回避できます。本ガイドのネスト処理やオプショナルフィールドのテクニックを活用して、あらゆる複雑なシナリオに対応してください。