テキスト 🔒 ブラウザ内で動作 — データは送信されません

JSONフォーマッター

JSONを整形・検証・圧縮し、ツリーで閲覧 — ブラウザ内で即座に。

入力JSON

JSON整形ツール(オンライン・無料)— フォーマット・検証・圧縮

JSONは機械にとっては読みやすい形式ですが、1行に圧縮された状態で届くと人間には非常に読みづらくなります。このオンラインJSONフォーマッターは、ミニファイされたJSON、エスケープされたJSON、インデントが崩れたJSONを、ワンクリックで整ったインデント付きの読みやすい形に整形します。会員登録もファイルのアップロードも不要で、サーバー側のサイズ制限もありません。

同じツールで双方向の変換ができます。APIレスポンスを読む、レビューする、ドキュメントに載せるといった場面では整形を、設定ファイルやペイロード、データベースの値を送り出す前に空白や改行をすべて取り除きたい場面では圧縮を使ってください。解析はブラウザー内で実行されるため、結果はその場ですぐに表示されます。

図:同じJSONオブジェクトを1行で書いたもの(35バイト)と、スペース2つでインデントして整形したもの(61バイト)。圧縮:35バイト{"id":7,"tags":["a","b"],"ok":true}整形圧縮整形:61バイト{"id": 7,"tags": ["a","b"],"ok": true}
整形で増えるのは改行とインデントの空白だけです。データ自体はどちらも同じなので、通信用に圧縮して空白を取り除いてもJSONの意味は変わりません。

JSONフォーマッターが実際に行っていること

JSONの整形ツールは、貼り付けられたテキストを解析してメモリー上にオブジェクトツリーを構築し、一貫したインデント、元のキー順序、正しいエスケープを適用して書き戻します。この往復処理がそのまま検証にもなっています。不正なJSONはそもそも解析できないため、壊れた出力を黙って生成する代わりにエラーを表示します。つまり整形するたびにJSONの構文チェックも同時に行われているわけです。

オンラインでJSONを整形する手順

  1. 入力欄にJSONを貼り付けるか、直接入力します。
  2. インデントを選びます。スペース2つ、スペース4つ、タブから選択できます。JavaScriptやTypeScriptのプロジェクトではスペース2つ、PythonやJavaではスペース4つが一般的です。
  3. 整形するなら整形、同じデータを1行に圧縮するなら圧縮をクリックします。
  4. 出力欄で結果を確認し、コピーでクリップボードにコピーします。
  5. 出力を ツリー に切り替えると、JSONを折りたためるツリーとして表示できます。値は型ごとに色分けされ、各オブジェクトや配列は すべて展開 と すべて折りたたむ で開閉できます。

整形と圧縮のどちらを使うべきか

目的おすすめ
APIレスポンスやログの1行を読みたい整形
設定ファイルをGitに入れて差分を読みやすく保ちたい整形
ネットワーク送信前にペイロードのサイズを減らしたい圧縮
環境変数やデータベースの1カラムにJSONを保存したい圧縮

この検証ツールが検出するJSONエラー

  • 最後の要素の後ろに残った余分なカンマ。JavaScriptでは許容されますがJSONでは構文エラーです。
  • キーや値をシングルクォートで囲んでいるケース。JSONはダブルクォートしか受け付けません。
  • JavaScriptのオブジェクトリテラルからそのままコピーした、クォートなしのキー。
  • 文字列の中でエスケープされていない改行・タブ・バックスラッシュ。
  • コメント。JSONにコメント構文はないため、//や/* */があると解析に失敗します。
  • 閉じ括弧が欠けた、途中で切れたペイロード。

JSONビューアが日常的に使われる場面

  • デバッグ中にRESTやGraphQLのレスポンスを確認するバックエンド・フロントエンドの開発者。
  • テストレポートで期待値と実際のペイロードを比較するQAエンジニア。
  • package.json、tsconfig.json、composer.json、Kubernetesマニフェストを編集するDevOpsチーム。
  • 解析ツールのエクスポートやWebhookのログを読むデータアナリスト。
  • APIドキュメントにレスポンス例を掲載するテクニカルライター。

ここにJSONを貼り付けても安全ですか

安全です。入力した内容がこのページから外に出ることはありません。整形処理はあなたのブラウザータブ内で動く純粋なJavaScriptなので、アクセストークン、顧客データ、社内APIのレスポンスがアップロードされたり、記録されたり、サーバーに保存されたりすることはありません。個人情報や認証情報を含むペイロードを扱うときには重要な点であり、ページを読み込んだ後はオフラインでも動作し続けます。

大きなJSON・扱いにくいJSONのコツ

  • ログから貼り付けた場合は、先頭のタイムスタンプやログレベルを削除してください。テキストは{または[で始まる必要があります。
  • NDJSON(1行に1オブジェクト)は単一のJSONドキュメントではありません。1行ずつ整形してください。
  • 一部のAPIは最初の括弧の前にハイジャック対策の接頭辞を付けます。解析前に取り除いてください。
  • 非常に大きなドキュメントは描画が重くなります。まず圧縮し、必要な部分だけを整形するのが効率的です。
  • 2の53乗を超える数値はJavaScriptで精度が失われます。正確さが必要なら文字列のまま保持してください。

VS Code・Notepad++・コマンドラインでJSONを整形する

場所方法
VS Codeファイルを開いて Shift+Alt+F(ドキュメントのフォーマット)。インデント幅は Editor: Tab Size に従う
Notepad++プラグイン管理からJSToolを入れ、「プラグイン」→「JSTool」→「JSFormat」
コマンドラインpython -m json.tool input.json、jqがあれば jq . input.json
JavaScript整形は JSON.stringify(obj, null, 2)、圧縮は JSON.stringify(obj)
Pythonjson.dumps(obj, indent=2, ensure_ascii=False)
PHPjson_encode($data, JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE)

オンラインの整形ツールが便利なのは、JSONがすでにクリップボードにあるとき、エディターを設定していないマシンにいるとき、そして大きなレスポンスの中からツリー表示でひとつのキーを探したいときです。

関連ツール

APIのペイロードを扱う作業は、たいてい1つの形式だけでは終わりません。トークンはJWTデコーダーで読み、エスケープされた値はURLエンコード・デコードツールで変換し、埋め込みバイナリはBase64エンコーダーで扱い、整合性の確認はハッシュ生成ツールで行えます。JSONのサンプルからTypeScript、Go、Pythonの型を生成するにはJSON型定義ジェネレーターを使い、作業の流れ全体はTypeScriptでAPIレスポンスに型を付ける方法のガイドで確認できます。

関連ガイド