JSONフォーマッター＆バリデーター

JSONとは？

// Format (pretty-print) JSON with 2-space indentation
const raw = '{"name":"Alice","age":30,"active":true}';
const parsed = JSON.parse(raw);        // parse string → object
const formatted = JSON.stringify(parsed, null, 2);
console.log(formatted);
// → {
//     "name": "Alice",
//     "age": 30,
//     "active": true
//   }

// Minify JSON (strip all whitespace)
const minified = JSON.stringify(parsed);
console.log(minified);
// → '{"name":"Alice","age":30,"active":true}'

主な機能

使用例

{"status":200,"data":{"user":{"id":"usr_2x7kP9","name":"Alice Chen","email":"alice@example.com","roles":["admin","editor"],"lastLogin":"2026-03-12T08:30:00Z"},"meta":{"requestId":"req_abc123","timestamp":1741776600}}}

{"name":"my-app","version":"2.1.0","private":true,"scripts":{"dev":"next dev","build":"next build","start":"next start","lint":"eslint ."},"dependencies":{"react":"^18.2.0","next":"14.1.0"},"devDependencies":{"typescript":"^5.3.0","eslint":"^8.56.0"}}

[{"id":1,"product":"Laptop Pro","price":1299.99,"inStock":true,"tags":["electronics","computers"]},{"id":2,"product":"Wireless Mouse","price":29.99,"inStock":false,"tags":["electronics","accessories"]},{"id":3,"product":"USB-C Hub","price":49.99,"inStock":true,"tags":["electronics","accessories"]}]

{"database":{"host":"localhost","port":5432,"name":"mydb","pool":{"min":2,"max":10}},"cache":{"enabled":true,"ttl":3600,"provider":"redis"},"logging":{"level":"info","format":"json","outputs":["stdout","file"]}}

使い方

1. 1

   JSONを貼り付ける

   上の入力欄に未加工のJSONデータを入力するか貼り付けてください。「Load example」をクリックしてサンプルデータを読み込むこともできます。

2. 2

   整形または圧縮する

   「Format JSON」をクリックしてインデント付きの読みやすい形式にするか、「Minify JSON」をクリックして1行に圧縮します。

3. 3

   結果をコピーする

   処理結果が出力エリアに表示されます。「Copy」をクリックすると、ワンクリックでクリップボードにコピーできます。

よくあるJSONエラー

{"name": "Alice", "age": 30,}

{"name": "Alice", "age": 30}

{'name': 'Alice'}

{"name": "Alice"}

{name: "Alice"}

{"name": "Alice"}

{"name": "Alice" // user name}

{"name": "Alice"}

{"users": [{"name": "Alice"}

{"users": [{"name": "Alice"}]}

{"name": "Alice" "age": 30}

{"name": "Alice", "age": 30}

主な活用シーン

APIレスポンスのデバッグ

圧縮されたAPIレスポンスを読みやすいJSONに整形し、素早くデバッグ・検証を行います。

設定ファイルの整理

package.json、tsconfig.json、.eslintrcなどの設定ファイルを検証し、見やすく整形します。

データの確認・調査

データベース、ログ、サードパーティサービスからエクスポートされたJSONデータを閲覧・分析します。

コードレビュー

JSONスニペットを整形して、コードレビュー時の差分比較をより明確にします。

技術ドキュメント

技術文書やチュートリアル用に、きれいに整形されたJSONサンプルを作成します。

データ移行

新しいシステムにデータをインポートする前に、JSONの構造と構文を検証します。

技術仕様

RFC 8259準拠

Unicodeやエスケープ文字を含む標準JSON仕様を完全にサポートしています。

ブラウザ内処理

すべての整形処理はブラウザ内でネイティブのJSON.parse()とJSON.stringify()を使用してローカルに実行されます。

ファイルサイズ対応

最大10MBのJSONファイルを処理でき、インデント幅（2スペースまたは4スペース）を設定可能です。

ベストプラクティス

使用前に検証する

本番環境でJSONデータを使用する前に、必ず検証を行い、構文エラーを早期に発見しましょう。

一貫したインデントを使用する

可読性とバージョン管理でのファイルサイズを考慮して、2スペースインデントの使用を推奨します。

本番環境では圧縮する

APIレスポンスや設定ファイルでは圧縮JSONを使用して、帯域幅と読み込み時間を削減しましょう。

よくある質問