{ freetool24 }
Developer Tools

JSON & データツール：コードなしでJSONのフォーマット、バリデーション、変換、クエリを実行

ブラウザベースのJSONツール完全ガイド — JSONのフォーマット・バリデーション、TypeScriptインターフェースの生成、CSVやSQLへの変換、Zodスキーマの構築、JSON差分の比較、JSONPathクエリの実行まで対応。

7分で読めます

JSONデータ構造を表示するコードエディター

JSONはAPI、設定ファイル、データベース、データ交換の共通言語です。開発者は日常的にJSONを扱い、フォーマット、バリデーション、変換、情報抽出といった作業を繰り返しています。ここでは、あらゆるJSON作業をカバーするツールの完全ガイドを紹介します。すべてブラウザ上で直接動作します。

1. JSON フォーマッター & バリデーター

最も一般的なJSON作業：圧縮されたAPIレスポンスをそのまま貼り付けて、読みやすい形式に整えたい場合です。

JSON Formatterは3つの機能を提供します：

整形表示： {"name":"Alice","age":30,"scores":[98,87,91]} を以下のようにフォーマットします：

{
  "name": "Alice",
  "age": 30,
  "scores": [98, 87, 91]
}

バリデーション： 構文エラーを行番号と位置とともに即座に検出します。よく検出されるエラー：

  • 末尾のカンマ（JSオブジェクトでは有効だが、JSONでは無効）
  • ダブルクォートの代わりにシングルクォートを使用
  • クォートで囲まれていないキー
  • フィールド間のカンマ漏れ
  • 括弧の不一致

圧縮： フォーマット済みJSONをAPIリクエストや保存用に1行に圧縮します。

2. JSON to TypeScript：インターフェースの自動生成

大きなAPIレスポンスからTypeScriptインターフェースを手書きするのは面倒でミスも起きやすい作業です。JSON to TypeScriptコンバーターを使えば、自動で生成できます。

入力：

{
  "user": {
    "id": 1,
    "name": "Alice",
    "email": "alice@example.com",
    "roles": ["admin", "editor"],
    "metadata": {
      "createdAt": "2024-01-15T10:00:00Z",
      "active": true
    }
  }
}

出力：

interface Metadata {
  createdAt: string;
  active: boolean;
}

interface User {
  id: number;
  name: string;
  email: string;
  roles: string[];
  metadata: Metadata;
}

interface Root {
  user: User;
}

ネストされたオブジェクト、配列、オプショナルフィールド（入力に一部のキーが存在しない場合）、ユニオン型にも対応しています。実際のAPIレスポンスを貼り付けるだけで、本番環境で使えるTypeScriptコードが数秒で生成されます。

3. JSON to Zod Schema：ランタイムバリデーション

TypeScriptインターフェースはコンパイル時のみ有効です。APIレスポンス、フォームデータ、設定ファイルをランタイムでバリデーションするにはZodが必要です。JSON to Zodコンバーターは任意のJSONから完全なZodスキーマを生成します。

上記と同じ入力から：

import { z } from "zod";

const MetadataSchema = z.object({
  createdAt: z.string().datetime(),
  active: z.boolean(),
});

const UserSchema = z.object({
  id: z.number(),
  name: z.string(),
  email: z.string().email(),
  roles: z.array(z.string()),
  metadata: MetadataSchema,
});

const RootSchema = z.object({
  user: UserSchema,
});

スマートな型推論に注目してください — createdAtはISO datetime文字列として認識され、emailはメールアドレスとして検出されます。単なるz.string()ではなく、フォーマットまで検証されます。

4. JSON Schema バリデーター：スキーマに対するデータの検証

JSON Schema（Draft 4、6、7、または2019-09）があり、それに対してデータを検証したい場合、JSON Schema Validatorがajvライブラリを使ってブラウザ上でバリデーションを実行します。

主な用途：

  • 開発中のAPIリクエスト/レスポンスペイロードの検証
  • 生成されたデータがスキーマに一致するかのテスト
  • デプロイ前のスキーマバリデーションエラーのデバッグ
  • 設定ファイルが仕様に準拠しているかの確認

バリデーターは詳細なエラーパスを表示します — 「バリデーション失敗」だけでなく、どのフィールドが何故失敗したかを正確に示します：

/user/email: must match format "email"
/user/age: must be >= 0
/user/roles/2: must be string

5. JSON Diff ビューアー：変更点を正確に把握

APIの変更をデバッグしたり、2つのデータスナップショットを比較したりする際、JSON Diff Viewerを使えば何が追加・削除・変更されたかを正確に確認できます。

左（変更前）:                右（変更後）:
{                         {
  "status": "active",       "status": "inactive",   ← 変更
  "count": 42,              "count": 42,
  "tags": ["a", "b"],       "tags": ["a", "b", "c"] ← "c"を追加
  "deprecated": true        
}                         }                         ← "deprecated"を削除

差分はツリービューでカラーコーディングされて表示されます：

  • 🟢 緑：追加
  • 🔴 赤：削除
  • 🟡 黄：変更
  • ⬜ グレー：変更なし

主な用途：

  • コード変更前後の2つのAPIレスポンスの比較
  • 大きな設定ファイルの変更点の確認
  • キャッシュされたレスポンスと最新のレスポンスの差異のデバッグ
  • データ移行が期待通りの結果を生成したかの確認

6. JSONPath ファインダー：クリックでパスを取得

JSONPathはJSONのクエリ言語で、XMLにおけるXPathに相当します。特定のネストされた値へのJSONPathが必要な場合、JSON Path Finderを使えばツリー上の任意の値をクリックするだけでパスが即座に表示されます。

{
  "store": {
    "books": [
      { "title": "Clean Code", "price": 29.99 },
      { "title": "The Pragmatic Programmer", "price": 39.99 }
    ]
  }
}

29.99をクリック → パス：$.store.books[0].price "The Pragmatic Programmer"をクリック → パス：$.store.books[1].title

パスはドット記法（$.store.books[0].price）とブラケット記法（$['store']['books'][0]['price']）の両方で表示されるため、JavaScript、Python、またはあらゆるJSONPathライブラリでそのまま利用できます。

7. JSON to CSV / CSV to JSON：フォーマット間の変換

APIはJSONを返しますが、スプレッドシートはCSVを必要とします。CSV ↔ JSON Converterは双方向の変換に対応しています。

JSON配列 → CSV：

[
  { "name": "Alice", "age": 30, "city": "NYC" },
  { "name": "Bob", "age": 25, "city": "LA" }
]

変換結果：

name,age,city
Alice,30,NYC
Bob,25,LA

CSV → JSON： 逆方向の変換 — ヘッダー付きのCSVを受け取り、オブジェクトの配列を生成します。クォートで囲まれたフィールド、値内のカンマ、さまざまな改行コードにも対応しています。

CSVデータをより柔軟に扱うには、SQL on CSVツールを使うと、アップロードしたCSVファイルに直接SELECTクエリを実行できます — Pythonを1行も書かずにフィルタリング、ソート、結合が可能です。

8. JSON to SQL：INSERT文の生成

JSONデータをデータベースに投入する際、JSON to SQL Converterを使えば任意のSQLダイアレクト向けのINSERT文を生成できます。

入力：

[
  { "id": 1, "name": "Alice", "email": "alice@example.com" },
  { "id": 2, "name": "Bob", "email": "bob@example.com" }
]

出力（PostgreSQL）：

INSERT INTO users (id, name, email) VALUES
(1, 'Alice', 'alice@example.com'),
(2, 'Bob', 'bob@example.com');

MySQL、PostgreSQL、SQLite、SQL Serverのダイアレクトに対応し、各データベースのクォートスタイル、NULL値、ブール値の表現を正しく処理します。

9. JSON テーブルビューアー：JSON配列をスプレッドシート形式で表示

クエリを書くまでもなく、JSON配列をテーブルとして確認したいだけの場合もあります。JSON Table Viewerは任意のJSONオブジェクト配列を、ソートと検索ができるテーブルとして表示します。

列ヘッダーをクリックしてソート、検索ボックスに入力して行をフィルタリングできます。任意のサイズの配列に対応し、ネストされたオブジェクトをフラット化して表示し、検索にマッチした用語をハイライト表示します。

クイックリファレンス

作業 ツール
JSONのフォーマット/バリデーション JSON Formatter
TypeScriptインターフェースの生成 JSON to TypeScript
Zodバリデーションスキーマの生成 JSON to Zod
JSON Schemaに対するバリデーション JSON Schema Validator
2つのJSONオブジェクトの比較 JSON Diff Viewer
値のJSONPathを検索 JSON Path Finder
JSON ↔ CSVの変換 CSV ↔ JSON Converter
SQL INSERT文の生成 JSON to SQL
JSONをテーブルとして表示 JSON Table Viewer

共通点：これらのツールはすべてブラウザ上で完結して動作します。大きなJSONペイロードがユーザーの端末の外に送信されることはないため、本番データ、レスポンスに含まれるAPIキー、サードパーティサーバーに処理させたくない機密データを扱う際にも安全に使用できます。

すべての記事に戻るツールを閲覧