JSONをTypeScriptに変換

関連おすすめ

JSON→TypeScript について：JSON データを自動的に TS 型に変換

ユースケース

• フロントエンド開発で REST API や GraphQL の JSON レスポンスを素早く TS interface に変換し、手動での型定義記述を回避します。
• React/Vue/Angular プロジェクトの Props、State、コンポーネントパラメータの型宣言が必要な場合、サンプル JSON から数秒で生成します。
• フルスタック TypeScript プロジェクトでフロントエンドとバックエンドが型定義を共有する場合、バックエンドのモック JSON をフロントエンドの type source of truth として利用できます。
• サードパーティ API（宅配便、天気、決済など）と連携する際、対応する TypeScript インターフェースを素早く生成し、ドキュメント調査の手間を省きます。
• モックデータ、テストフィクスチャ、JSON 設定ファイルから型定義を逆生成し、型安全性と IDE インテリセンスを強化します。
• データベース ORM がエクスポートした JSON Schema を TypeScript interface に変換し、Node.js バックエンドの DTO 定義に統合します。
• TypeScript 学習時に既存の JSON を interface 例に変換し、ネスト型、联合型、オプショナルフィールドの書き方を理解します。
• コードリファクタリング時に散在する JS オブジェクトリテラルを正式な interface に変換し、コード可読性と型安全性を向上させます。

使い方

1. 左側の入力ボックスに JSON 内容を貼り付けるか、「アップロード」ボタンをクリックして .json/.txt ファイルを選択するか、「サンプル」をクリックして内蔵サンプルをロードします。
2. ツールバー右側の interface 名ボタン（または歯車アイコン）をクリックして、ルート interface 名をカスタマイズ（デフォルト Root）、オプショナルフィールド/読み取り専用フィールドを有効化します。
3. ツールが自動的に変換します（入力後 400ms デバウンス）；右側で生成された TypeScript interface コードを確認し、CodeMirror ハイライトで読みやすく表示されます。
4. インデントスタイル（2 スペースまたは 4 スペース）を選択し、ツールバーの左/右パネルの幅を調整して最適な表示体験を得ます。
5. 「コピー」をクリックして TS コードをクリップボードにコピー、または「ダウンロード」をクリックして `${interfaceName}.ts` ファイル（例：User.ts）として保存します。
6. コードをプロジェクトの `types/` ディレクトリまたは `src/types/` ディレクトリに貼り付け、必要に応じて import して使用します。

特徴

• スマート型推論: null、boolean、number、string、array、object などの TypeScript 型を自動認識し、ネイティブ TS 構文にマッピングします。
• ネストオブジェクトの自動展開: ネストオブジェクトに対して独立したサブ interface（RootAddress など）を自動作成し、型の階層を明確に保ち冗長を回避します。
• 配列型のスマート処理: 要素型が一致する場合は `T[]`、混合型は联合配列 `(A | B)[]`、空配列は `any[]` をフォールバックとして生成します。
• オプショナルフィールドマーク: 有効にすると null/undefined フィールドを自動検出し `?` 修飾子を追加、TypeScript strict モードに準拠したコードを生成します。
• 読み取り専用フィールドサポート: 有効にするとすべてのフィールドに `readonly` 修飾子を追加、不変状態、設定、DTO などのシナリオに適しています。
• interface 名カスタマイズ: ルート interface 名を設定可能（デフォルト Root）、ダウンロードファイル名もその名前で命名されます（例：User.ts）。
• 2/4 スペースインデント選択可能: ツールバーでワンクリック切り替え、2 スペース（ESLint デフォルト）と 4 スペースインデントスタイル。
• リアルタイム自動変換: JSON 入力後 400ms デバウンスで自動変換、ボタンクリック不要；貼り付け、ファイルアップロード、サンプルの 3つの入力方式に対応。
• JSON エラー自動修復: 内蔵 tryFixJSON 修復関数で末尾カンマ、シングルクォート、引用符欠損などの一般的な構文エラーを自動処理。
• TypeScript コードハイライト: 右側出力は CodeMirror + JavaScript (TypeScript) ハイライトを使用し、可読性が高い。
• コピーとダウンロード: ワンクリックでクリップボードにコピー、または標準 .ts ファイルとしてダウンロードしてフロントエンドプロジェクトで直接使用。
• 純粋なブラウザローカル処理: すべての JSON 解析、型推論、interface 生成はブラウザ JavaScript で実行され、元のデータはアップロードされません。

よくある質問

トラブルシューティング

用語集

JSON (JavaScript Object Notation)

JavaScript オブジェクト構文に基づくがプログラミング言語に依存しない、軽量なデータ交換フォーマット。オブジェクト ({}), 配列 ([]), 文字列, 数字, ブール値, null の 6 つの基本型をサポートします。REST API、フロントエンドとバックエンドのデータ転送、設定ファイル、ログなどのシナリオで広く使用されています。

TypeScript

Microsoft が開発した JavaScript のスーパーセットで、JavaScript に静的型定義、インターフェース、ジェネリクスなどの特性を追加します。TypeScript コードはプレーン JavaScript にコンパイルされ、ブラウザまたは Node.js で実行されます。React、Vue、Angular などの現代フロントエンドプロジェクトの好まれる言語です。

インターフェース (interface)

TypeScript でオブジェクト型を記述するキーワードで、構文は `interface Name { prop: type; }`。宣言マージ（同名 interface 自動マージ）、implements（クラスがインターフェースを実装）、extends（インターフェース継承）をサポートします。TypeScript でオブジェクトの形状を記述する主要な方式です。

type エイリアス

TypeScript で型に別名を付けるキーワードで、構文は `type Name = ...`。联合型 (`A | B`)、交差型 (`A & B`)、関数型などの定義に使用できます。interface より柔軟ですが宣言マージはサポートされません。本ツールは type ではなく interface を一律使用します。

型推論 (Type Inference)

本ツールが JSON value の typeof と具体的な形式に基づいて対応する TS 型を自動決定するプロセスです。例えば typeof string は string にマッピング、Array.isArray() がヒットした場合は配列として処理、typeof object がヒットした場合は独立したサブ interface を生成します。

オプショナルフィールド (?)

TypeScript でフィールドが省略可能であることを示す修飾子。`name?: string` は name フィールドが存在しない可能性があることを示します（値は undefined）。本ツールの「オプショナルフィールド」オプションを有効にすると、値が null または undefined のフィールドに自動的に `?` が追加されます。

読み取り専用フィールド (readonly)

TypeScript でフィールドが不変であることを示す修飾子。`readonly id: number` は id フィールドがオブジェクト作成後に再代入できないことを示します。本ツールの「読み取り専用フィールド」オプションを有効にすると、すべてのフィールドに自動的に `readonly` が追加されます。

联合型 (Union Type)

TypeScript で値が複数の型のいずれかであることを示す構文で、`A | B` と記述します。本ツールは配列要素の型が一致しない場合に使用し、例えば `(string | number)[]` は配列要素が string または number である可能性があることを示します。

配列型 (Array Type)

TypeScript で配列を示す構文で、2 つの形式があります：汎用形式 `Array<T>` と短縮形式 `T[]`。本ツールは短縮形式を一律使用します。本ツールには 3つの配列型生成モードがあります：一貫型 `T[]`、混合型 `(A | B)[]`、空配列 `any[]`。

ネストインターフェース (Nested Interface)

インターフェース内で他のインターフェースを参照して型階層を形成すること。本ツールは各ネストオブジェクトに対して独立したサブ interface を生成し、メインインターフェースはプロパティ名で参照します。例えば Root は RootAddress を参照し、RootAddress は他の型から独立して参照できます。

TypeScript strict モード

TypeScript コンパイラの厳格モードで、noImplicitAny、strictNullChecks、strictFunctionTypes などの複数のサブオプションを含みます。strictNullChecks を有効にすると、null と undefined は独立した型になり、他の型変数に代入できません。本ツールが生成するオプショナルフィールドは strict モードと完全に互換性があります。

DTO (Data Transfer Object)

データ転送オブジェクトで、異なる層（API と Service 層など）間でデータを転送するために使用されます。TypeScript プロジェクトでは通常 interface で記述され、readonly と組み合わせて不変性を強調します。本ツールは DTO 型定義を生成する一般的なツールです。

宣言マージ (Declaration Merging)

TypeScript interface の特性：同じ名前の interface は自動的にプロパティをマージします。サードパーティライブラリの型定義を拡張する際によく使用されます。本ツールが生成する interface はプロジェクト内の他の同名 interface とマージでき、段階的な型拡張を容易にします。

tsconfig.json

TypeScript プロジェクトの設定ファイルで、プロジェクトのルートディレクトリにあります。compilerOptions（target、module、strict など）、include、exclude などの設定を含みます。本ツールが生成する .ts ファイルは標準の tsconfig プロジェクトでそのまま使用できます。

tryFixJSON

本ツール内蔵の JSON 修復関数で、末尾カンマ、シングルクォートによるダブルクォートの置換、欠損引用符の key、コメントなどの一般的な JSON 構文エラーを自動処理します。JSON.parse が失敗したときに自動的に呼び出され、修復が成功した場合はユーザーに通知して変換を続行します。

JSON 型から TypeScript 型へのマッピングルール

本ツールの getTsType 関数が JSON value の形式に基づいて TypeScript 型を推論する完全なルール：

interface vs type エイリアス比較

本ツールが type エイリアスではなく interface を生成する理由と、TypeScript プロジェクトにおける両者の違い：

オプショナルフィールドと読み取り専用フィールドの生成ルール

本ツールの 2 つのスイッチオプションが生成コードに与える影響と最適な使用シナリオ：

Privacy & Security

本 JSON→TypeScript ツールのすべての操作はあなたのブラウザローカルで完全に実行されます：JSON 解析、型推論、interface 生成はすべてブラウザ JavaScript によってクライアントサイドで実行され、ネットワーク経由で JSON 内容、アップロードされたファイル、生成されたコードは一切サーバーに送信されません。ファイルアップロードはブラウザネイティブの FileReader API を使用して直接メモリに読み込まれ、中間サービスは経由されません。Cookie 追跡は使用せず、ユーザーの入力や使用データを一切収集しません。ページを閉じるか更新した後、すべての入力と出力内容はメモリから自動的にクリアされます。API キー、トークン、機密業務データを含む JSON の処理に適しています。

Authoritative References

• TypeScriptTypeScript interface 公式ドキュメント
• TypeScriptTypeScript 入門ハンドブック
• MDNJSON 仕様 - MDN Web Docs
• TypeScriptTypeScript Playground オンライン試用
• TypeScripttsconfig.json 設定リファレンス
• ZodZod - TypeScript 優先の schema 検証ライブラリ