JSONフォーマッタ & 圧縮機
JSONコードを読みやすいように整形したり、サイズを縮小するために圧縮したりします ファイルをサーバーへ送らずブラウザ内で処理する、無料のオンラインツールです。
ここにJSONを入力してください...
使い方
- 整形したいJSONを入力エリアに貼り付けます（APIレスポンス、設定ファイル、ログ出力など）
- インデント幅を選択します（フロントエンド系は2スペース、バックエンド系は4スペースが目安）
- 「整形」ボタンを押すとブラウザ内で整形され、構文エラーがあればその場で位置が示されます
- 「JSONを圧縮」を押すと不要な空白がすべて削除され、本番デプロイ用の最小サイズに変換されます
- 「コピー」ボタンで結果をクリップボードへ転写し、エディタやレビュー資料、Slack、Notionへそのまま貼り付けます
- Chrome DevToolsのNetworkタブからレスポンスをコピーしてペーストする流れが、API開発・デバッグでもっとも使い勝手の良い使い方です
すべての処理はブラウザで行われ、ファイルがサーバーに送信されることはありません。
よくある質問
「整形」はAPIレスポンスやログを目で確認したい時、コードレビュー資料として貼る時に使います。「圧縮」は本番デプロイ用にJSON設定ファイルのサイズを削減したい時、HTTPレスポンスのペイロードを最小化したい時に使います。Webpack/Viteの本番ビルドではminify済みJSONが標準ですが、開発・デバッグ時は整形版が圧倒的に読みやすいです。
Chrome DevToolsのNetworkタブからレスポンスをコピー → 本ツールにペースト → 整形、の流れが一般的な使い方です。APIの仕様確認、フィールド名のtypoチェック、ネストの深さの把握、想定外のnullやundefinedの検出などに役立ちます。
数MB程度までは問題なく整形可能です。それ以上の本番ログやデータエクスポートは、ターミナルで `jq` コマンド、もしくはエディタ（VS Code）のFormat Documentを使う方が安定します。本ツールは「目で見て確認したい」サイズが得意分野です。
送信されません。すべての整形・圧縮処理はブラウザ内のJavaScriptで完結します。本番DBの認証情報を含むJSON、顧客データAPIのレスポンス、未公開製品の設定ファイルなども安心して貼り付けられます。
はい、無効なJSONを貼り付けると赤いエラーメッセージで「○行目の○文字目で末尾カンマが余分」「文字列リテラルの閉じ引用符が抜けている」など具体的な位置と理由が表示されます。手書きで設定ファイルを編集している時のtypo発見に便利です。
2スペースと4スペースに対応しています。フロントエンド系プロジェクト（React、Vue）は2スペースが標準、Java/Kotlinから来た方や厳格なコーディング規約のあるチームは4スペースを選ぶケースが多いです。設定はブラウザに保存され次回も維持されます。
向いています。APIモックの大きなJSON固定値、設定ファイル変更、データシードファイルの差分確認時、整形後の状態で目視確認することで「カンマ漏れ」「ネスト構造の取り違え」を早期発見できます。最終コミット時はリポジトリの.prettierrcに従ってください。