JSON を入力して整形をクリック
ツール説明
JSON フォーマッターについて
JSON フォーマッターは、圧縮された JSON やログからコピーした読みにくい JSON を、ネストが分かる形に整形し、構文エラーの位置を見つけやすくします。
このツールはフォーマット、圧縮、検証、ツリー表示をブラウザー内で実行するため、API レスポンス、設定ファイル、デバッグ用 payload の確認に向いています。
JSON Formatter の使い方
- 入力欄に JSON を貼り付けるか、サンプルで出力の形を確認します。
- Format で 1 行の JSON を読みやすく整形し、Minify で不要な空白を削除します。
- 解析に失敗したら、表示された行と列から始め、カンマ、引用符、括弧の対応を確認します。
- 結果をコピーするか、ツリー表示で深い階層のフィールドを確認します。
よくある利用場面
- バックエンドやフロントエンド連携のデバッグ中に、1 行の API レスポンスを展開する。
- package.json、manifest、モックデータに末尾カンマがないかコミット前に確認する。
- 文字列内容を手作業で壊さず、リクエスト本文を 1 行に圧縮する。
- 本番ログのエスケープ済み JSON を整形し、Text Diff で別レスポンスと比較する。
JSON 構文とよくあるエラー
標準 JSON で使えるのは、オブジェクト、配列、ダブルクォート文字列、数値、真偽値、null です。多くの失敗は JavaScript 風の書き方が混ざることで起きます。
- 末尾カンマ： オブジェクトや配列の最後の要素の後に余分なカンマは置けません。
- シングルクォート： JSON の文字列と key はダブルクォートが必要です。
- 引用符なしの key: {name:"dev"} は JavaScript オブジェクトであり、JSON ではありません。
- コメント： 標準 JSON は // や /* */ コメントをサポートしません。削除するか JSON5 を使います。
JSON フォーマッターのよくある質問
- JSON はサーバーにアップロードされますか？
- いいえ。整形、圧縮、検証、ツリー表示はブラウザー内で実行され、wetool.site へ送信されません。
- Format と Minify の違いは何ですか？
- Format は読みやすいように改行とインデントを追加します。Minify は転送や 1 行設定向けに不要な空白を削除します。
- なぜ JSON が無効と表示されますか？
- 末尾カンマ、シングルクォート、引用符なし key、括弧不一致、ログ由来の余分な文字がよくある原因です。
- 大きい JSON を扱えますか？
- はい。重い解析は可能な範囲で Web Worker に任せるため、大きな payload でも画面が固まりにくくなります。
- JSON5 やコメントに対応していますか？
- このツールは標準 JSON を検証します。コメント、シングルクォート、末尾カンマは先に標準 JSON へ直してください。
ブラウザー型 JSON Formatter を使う理由
JSON には内部 API データ、トークン、ログ、ユーザー情報が含まれることがあります。ローカル処理なら、機密 payload を第三者サーバーへ貼り付けるリスクを減らせます。
厳密な JSON と JSON5 の移行チェック
「JSON の整形に失敗する」入力の多くは JavaScript のオブジェクトや JSON5 です。本番の API、設定ファイル、ログのフィールドは通常、厳密な JSON を求めます。
- シングルクォートの文字列はダブルクォートに変え、オブジェクトのキーもすべて引用符で囲みます。
- 末尾カンマ、// コメント、/* */ コメントを削除してから厳密な JSON パーサーに渡します。
- NaN、Infinity、undefined、Date オブジェクト、関数は正しい JSON の値ではないため、文字列、数値、真偽値、null、配列、オブジェクトに変換します。
大きな JSON のデバッグチェック
大きな API レスポンスやログのペイロードは整形だけでなく、ブラウザーのフリーズと誤編集を避ける必要があります。
- まず形式してからフィールド名を検索すると、1 行の JSON の入れ子のパスを探すより確実です。
- 2 つのレスポンスを比較する前に同じインデントで整形し、空白や 1 行に圧縮された構造に差分を支配されないようにします。
- JSON がログ由来なら、タイムスタンプ、ログレベル、エスケープされたラッパー、周辺のテキストを除き、本来の JSON 部分だけにします。