API レスポンス用 JSON 整形ツール

ブラウザのネットワークタブ、curl、Postman、ログファイルからコピーしたレスポンスを貼り付けてください。HTTP ヘッダー、JSONP、二重エンコードされた JSON は自動で検出され、大きな ID も全桁そのまま表示されます。

無料・登録不要

使い方

レスポンスをコピーします。Chrome、Edge、Firefox では開発者ツールを開き、ネットワークタブでリクエストを選んでレスポンスをコピーします。ターミナルでは curl -s、ヘッダーも含める場合は curl -i を使います。
入力欄に貼り付けます。ヘッダー、JSONP のコールバック、エスケープされた文字列として保存された JSON は取り除くかデコードされ、何を変更したかが表示されます。
ツリー表示に切り替えて入れ子のデータを確認します。値をタップすると $.data[0].attributes.email のようなパスが表示され、コードや jq のフィルター用にコピーできます。
整形した JSON をコピーまたはダウンロードします。リクエストボディを小さくしたいときは「圧縮」を選びます。

このツールの特長

HTTP レスポンスをそのまま

ステータス行とヘッダーを含む curl -i の出力を貼り付けても、ヘッダーを読み飛ばしてボディを整形します。

JSONP と二重エンコード

callback({...}) の囲みを取り除き、\" だらけの JSON 文字列は本来の JSON にデコードします。

64 ビット ID も正確

9,007,199,254,740,991 を超える ID も、サーバーが送ったとおりに表示し、JavaScript では丸められることをお知らせします。

入れ子の値へのパス

ツリーの値をタップするとパスをコピーでき、JavaScript、jq、テストのアサーションにそのまま使えます。

重複キーの警告

オブジェクトで同じキーが繰り返されている場合はどのキーかを表示します。多くのクライアントは最後の値しか残さないためです。

本番のレスポンスでも安心

すべてブラウザ内で処理されます。レスポンスに含まれるトークン、Cookie、顧客データがアップロードされることはありません。

API レスポンスのコピー元

コピー元	JSON のコピー方法
Chrome、Edge、Firefox	開発者ツール（F12）› ネットワーク › リクエストを選択 › レスポンスタブ › コピー
Safari	開発 › Web インスペクタを表示 › ネットワーク › リクエストを選択 › レスポンス
curl	ボディだけなら curl -s https://api.example.com/items、ヘッダーも含めるなら curl -i
Postman、Insomnia	レスポンスパネル › Body › Raw を選んでコピー
サーバーログ	ログの行全体をコピーします。途中で切れている場合はログファイルを開いてください。

API レスポンスが読みにくい理由

API はデータを小さく速く送るため、空白や改行のない圧縮された JSON を返すのが一般的です。そのため、数百件のレコードを含むレスポンスがとても長い1行で届きます。

整形すると値を変えずにインデントが加わり、どんなフィールドがあるか、配列がどう入れ子になっているか、ページ送りのリンクやエラーの詳細がどこにあるかが分かります。ツリー表示なら大きな配列を折りたたみ、それぞれの項目数も確認できます。

このページが検出する問題

curl -i やプロキシのログなどで、ボディの前に付いている HTTP ヘッダー。
古い API が返す callback({"items": []}); のような JSONP レスポンス。
二重エンコードされた JSON：サーバーやロガーが2回エスケープした "{\"id\":1}" のような文字列。
パーサーによって扱いが異なる重複キー。
JavaScript の数値では扱えない大きな整数。データベースや SNS の ID でよく起きる問題です。
手書きのリクエストボディの構文エラー。行と列を表示し、よくある間違いはワンクリックで修復できます。

JavaScript で大きな ID を扱うとき

多くの API は 64 ビット整数の ID を返します。JavaScript が正確に表せる整数は 9,007,199,254,740,991 までなので、response.json() は 9007199254740993 をエラーなしで 9007199254740992 に変えてしまいます。

よく設計された API は "id_str" のように ID を文字列でも返します。そうでない場合は BigInt に対応したライブラリで解析するか、API の提供元に文字列の ID を依頼してください。このツールは正確な桁を表示するので、問題に気づけます。

よくある質問

HTTP ヘッダーを含むレスポンスを貼り付けても大丈夫ですか？

はい。HTTP/1.1 200 OK のようなステータス行で始まる場合、最初の空行までをヘッダーとして読み飛ばし、ボディだけを整形します。

トークンや個人情報を含むレスポンスを貼り付けても安全ですか？

このページはすべてをブラウザ内で処理し、サーバーには何も送らないため、データは端末から出ません。それでも、レスポンスを他の人と共有する前にはアクセストークンを消す習慣をつけましょう。

JSON に \" がたくさん表示されるのはなぜですか？

JSON が2回エンコードされ、JSON を含む文字列になっています。このページは自動でデコードします。自分のコードでは JSON.parse を2回呼ぶか、データを二重に文字列化しないようサーバー側を修正してください。

JSONP とは何ですか？

JSONP は、古いブラウザでも別ドメインからデータを読み込めるように、JSON を callback({...}) のような JavaScript の関数呼び出しで囲む方式です。現在の API は代わりに CORS を使います。このページは囲みを取り除いてデータを読めるようにします。

パスはコードでどう使いますか？

$.data[0].id は「data 配列の最初の項目の id フィールド」という意味です。JavaScript では response.data[0].id、jq では .data[0].id と書きます。

XML や GraphQL のレスポンスも整形できますか？

GraphQL のレスポンスは JSON なので使えます。XML は別の形式のため、このツールでは対応していません。

API の JSON レスポンスの読み方とデバッグ方法

作りたい内容を教えてください。

シンプルなWebサイトから本格的なアプリ、AIソリューション、自動化、カスタムシステムまで、作りたいものをお聞かせください。

使い方