JSONフォーマッター

はじめに

JSONフォーマッターは、JSONデータを扱うすべての人（開発者、APIテスター、データアナリスト、テクニカルライター）にとって不可欠なツールです。APIや設定ファイルからの生のJSONは、しばしば圧縮されていたりインデントが乱れていたりして、読み取りやデバッグが困難です。JSONフォーマッターは、乱雑なJSON入力を、適切なインデントと構文検証を備えた、きれいで構造化された出力に瞬時に変換します。

インストールが必要なコマンドラインツールやブラウザ拡張機能とは異なり、Toollect JSONフォーマッターはブラウザ内で完全に動作します。貼り付けるたびに即座に解析され、JSONの有効性と構造に関するフィードバックが即座に得られます。外部サーバーにデータが送信されることはないため、速度とプライバシーの両方を提供します。

REST APIレスポンスのデバッグ、デプロイ用の設定ファイルの準備、JSON構文の教育など、このツールは必要な精度と即時性を提供します。

仕組み

JSONフォーマッターは、JavaScriptのネイティブメソッドである JSON.parse() と JSON.stringify() によって動作します。これらは、すべてのモダンブラウザとNode.jsでJSONを処理するのと同じエンジンです。

パース

ツールは入力テキストを JSON.parse() に渡します。このメソッドは文字列を読み取り、メモリ内にJavaScriptオブジェクトまたは配列を構築しようとします。パーサーは厳格で、ECMA-404 JSON仕様に正確に従い、有効なJSON構文から逸脱するものはすべて拒否します。

検証

JSON.parse() が成功すれば、入力は有効なJSONです。失敗した場合、メソッドは説明メッセージ付きの SyntaxError をスローします。ツールはこのエラーをキャッチしてステータスエリアに表示します。この段階でよくあるエラー：

• Unexpected token：余分な文字、末尾のカンマ、引用符で囲まれていないキー
• Expected property name：プロパティ間のカンマ欠落、または誤った引用符
• Unexpected end of input：JSON文字列が途中で切れている、または括弧が閉じられていない

整形

有効なJSONの場合、ツールはパースされたオブジェクトをパラメータ space=2 で JSON.stringify() に渡します。これにより以下の処理が行われます：

1. オブジェクトをJSON文字列として再シリアル化
2. 各 {、}、[、] およびカンマの後に改行を挿入
3. ネストレベルごとに2スペースでインデント
4. 元のデータ型を保持

出力

整形された結果が出力エリアに表示され、読みやすさのために等幅フォントで表示されます。出力は読み取り専用ですが、ワンクリックでクリップボードにコピーできます。

使用方法

Toollect JSONフォーマッターの使用には設定や登録は不要です。以下の手順に従ってください：

1. ツールを開く — ブラウザでJSONフォーマッターページを開きます。

2. JSONを貼り付ける — 任意のソースからJSONテキストをコピーし、Ctrl+V（Macの場合はCmd+V）で入力エリアに貼り付けます。

3. 結果を確認する — 貼り付け後、ツールが自動的に整形し、結果を即座に表示します。

4. ステータスを確認する — フィールド間のステータス表示を確認します：

   • 緑色のメッセージで有効なJSONを確認
   • 赤色のエラーメッセージでパーサーの問題を表示

5. 結果をコピーする — 「コピー」をクリックして整形済みJSONをクリップボードに転送します。

6. やり直す — 「クリア」をクリックして両方のフィールドを空にします。

チュートリアル

シナリオ: REST APIレスポンスをデバッグしており、JSON構造を検査する必要があります。

1. JSONフォーマッターを開きます。

2. 生のAPIレスポンスをコピーします：

{"status":"success","data":{"users":[{"id":1,"name":"Alice","email":"[email protected]","active":true},{"id":2,"name":"Bob","email":"[email protected]","active":false}],"total":2,"page":1},"timestamp":"2026-07-11T10:30:00Z"}

3. 貼り付けて自動整形：

{
  "status": "success",
  "data": {
    "users": [
      { "id": 1, "name": "Alice", "email": "[email protected]", "active": true },
      { "id": 2, "name": "Bob", "email": "[email protected]", "active": false }
    ],
    "total": 2,
    "page": 1
  },
  "timestamp": "2026-07-11T10:30:00Z"
}

4. エラーを含むJSONをテスト：

{"status":"success","data":{"users":[{"id":1,"name":"Alice",}]}}

ツールに表示：Invalid JSON: Expected property name or '}' at position...

5. コピーして使用 — 「コピー」をクリック。

上級者向けヒント

• 末尾カンマに注意：JSONでは最後の要素の後にカンマを置くことはできません
• 引用符での診断：不明な場合はフォーマッターに貼り付けてください
• 開発中にAPIレスポンスを検証：ツールを開いたままにして素早く検証
• BOM文字の確認：一見有効な文字列がパースできない場合、目に見えないUnicode文字が含まれている可能性があります
• 前後比較：並べて表示を使用して圧縮版と整形版を比較
• 他のツールとの連携：整形済み出力をdiffツールにコピーして変更を追跡

代替ツール

トラブルシューティング

技術仕様

パフォーマンス

技術詳細

• 検証エンジン：ネイティブ JSON.parse()（ECMAScript仕様）
• 整形エンジン：ネイティブ JSON.stringify()、space=2
• イベントモデル：入力により自動整形をトリガー（300msデバウンス）
• 互換性：Chrome 80+、Firefox 75+、Safari 13+、Edge 80+、Samsung Internet 13+、Opera 67+

プライバシー

• ゼロデータ転送：すべての処理はブラウザのメモリ内で完了
• Cookie、localStorage、sessionStorageを使用しません
• 分析やトラッキングスクリプトはありません
• 初回読み込み後はオフラインでも使用可能
• 登録、ログイン、APIキーは不要です

機能

• 自動インデントによるJSONの即時整形・美化
• 詳細なエラーメッセージ付きリアルタイムJSON検証
• エラー位置を自動表示する構文エラー検出
• ワンクリックで整形済みJSONをコピー
• ワンクリックで入力と出力をクリア
• ブラウザ内で完全実行 — サーバーにデータを送信しません

よくある質問