JSON→TypeScript変換とは？
JSON to TypeScriptはJSONデータをTypeScriptのインターフェースと型定義に変換します。文字列・数値・真偽値・配列・ネストオブジェクトを認識し、null許容フィールドをユニオン型でオプショナルとしてマークします。APIレスポンスの型を手作業で書く手間が省けます。
配列内のオブジェクトが少しずつ形状の異なる場合、ジェネレーターはそれらを統合します。一部のレコードに無いキーは `?` 付きで省略可能になります。ネストされたオブジェクトはそれぞれ名前付きの interface(User、UserAddress、UserAddressGeo)になります。プリミティブの混在する配列は `(string | number)[]` のようなユニオン型になります。ISO 8601 形式の日付文字列には JSDoc のヒントが付与され、複数サンプル中で少数の固定値しか取らない文字列フィールドは単なる string ではなく文字列リテラルのユニオンとして推論されます。TypeScript の出力に加えて、同じ入力から3つのタブが得られます:対応する Zod スキーマ、現実的なサンプル値を入れたモックデータ、そして draft-07 JSON Schema です。interface と type 別名を切り替え、`export` の付与を制御し、キーを A→Z で並べ替え、camelCase を有効にすれば snake_case や kebab-case のキーを TypeScript らしい名前に正規化できます。
使い方
- ステップ1 — JSONオブジェクトまたは配列を貼り付け、.jsonファイルを入力欄にドロップ、または URL を入力してオンラインのJSONを直接取得します。ツールが構造を解析し、すべてのフィールドのTypeScript型を推論します。
- ステップ2 — 出力をカスタマイズ：ルートインターフェース名の設定、インターフェースまたは型エイリアスの選択、nullになりうるフィールドのオプショナルプロパティの切り替え。
- ステップ3 — 出力をコピーするかダウンロードします。4つのタブは同じ設定を共有します:TypeScript の型、実行時バリデーション用の対応する Zod スキーマ、テストや Storybook にそのまま使えるモックデータ、そして OpenAPI やフォームライブラリ向けの draft-07 JSON Schema です。ネストされたオブジェクトはすべて自動的に個別の名前付きインターフェースになります。
使用するタイミング
- OpenAPI/Swagger 仕様がない API レスポンスに型を付けたいとき。
- スクリプトから読み込む JSON 設定(tsconfig.json、package.json)用の型をサッと作るとき。
- サードパーティ SDK のレスポンスに数秒で型付けラッパーを用意するとき。
結果
APIがネストされたaddressとpreferencesを含むユーザーオブジェクトを返します。JSONレスポンスを貼り付けてルート名を「User」に設定すると、User、UserAddress、UserPreferencesなどのきれいなインターフェースが生成され、オプショナルフィールドには「string | null」などの正確な型が付きます。
よくある質問
- 省略可能なフィールドはどう判定されますか?
- 入力が単一オブジェクトの場合、「null を省略可能として扱う」を有効にすると null 値のフィールドに `?` が付きます。オブジェクトの配列なら全レコードのキーをユニオンし、1 つでも欠けているキーは省略可能になります。
- 配列内の要素ごとに形が違う場合はどうなりますか?
- ロジックは同じです。全要素に存在するキーは必須、一部にしかないキーは省略可能、プリミティブ型が混在する値は `string | number` のようなユニオンになります。最終的に配列全体を表す 1 つのインターフェースが生成されます。
- interface と type エイリアスはどちらを選ぶべきですか?
- interface は宣言マージで拡張しやすく、API の形状を表すのに一般的です。type エイリアスはユニオン・インターセクション・マップ型と組み合わせる場合に便利です。実行時の挙動は同じなので、プロジェクトの慣習に合わせてください。
- なぜプロパティ名の一部が引用符で囲まれているのですか?
- TypeScript の識別子として使えない文字(ハイフン、空白、数字始まり、ドット)がキーに含まれる場合、ジェネレーターは引用符で囲みます。型は有効に保たれ、コード側では `obj["weird-key"]` のようにアクセスします。
- API レスポンスの形が変わったら、生成された型はそれに追随しますか?
- 再生成すれば反映されます。型は貼り付けた JSON のスナップショットなので自動更新はされません。API のバージョンが上がるたびに型を再生成し、コードレビューで差分を確認するワークフローが一般的です。