データと形式変換

JSONフォーマッター

JSONを貼り付ける、ファイルから読み込む、またはそのまま編集すると、DevKitLabがコードエディター上でリアルタイムに解析・ハイライトし、エラー位置まで示します。正しいJSONは貼り付け時やアップロード時に自動で整形され、不完全な断片は修復を試せます。整形、圧縮、キーの並び替え、文字列へのエスケープ、文字列からの復元、入れ子になったJSON文字列の展開にも対応。折りたたみ時の件数表示、JSON Path、全画面表示、表示オプションを使って、複雑なpayloadも落ち着いて確認できます。すべての処理はブラウザ内で完結し、データが端末の外へ送信されることはありません。

  • 正しいJSONを貼り付ける、またはアップロードすると、2スペースインデントの読みやすい形式に自動整形
  • 入力内容をリアルタイムに解析し、エラー位置を表示。エラー表示をクリックすれば該当行・列へ移動可能
  • 整形、圧縮、キーの並び替え、エスケープ、反エスケープ、入れ子JSONの展開、スマート修復に対応
  • オブジェクトと配列を折りたたみ可能。折りたたみ後は 5 elements や 10 keys のように件数を表示し、展開中はすっきり表示
  • 下部ステータスバーに現在のカーソル位置のJSON Pathを表示し、クリックでフィールドパスをコピー可能
  • 行番号、折りたたみコントロール、自動折り返し、現在行のハイライト、全画面表示を必要に応じて切り替え可能
  • 完全にローカルで処理。payload、token、設定、ログの内容がサーバーへアップロードされることはありません
工具/JSONフォーマッター
入力待ち
JSONコマンド

概要

このJSONツールは、単にインデントを整えるだけのものではありません。編集、整形、修復、折りたたみ、パス確認、コピー、ファイル操作をひとつの画面にまとめ、APIのデバッグ、ログ確認、設定整理、複雑なpayloadのレビューに使いやすいよう設計されています。

  1. 01

    貼り付け時・アップロード時に自動整形

    貼り付けた内容やアップロードしたファイルが正しいJSONなら、エディターが自動で2スペースインデントの整形済み表示に変換します。通常のテキスト、不完全な断片、一時的に解析できない内容はそのまま残すため、編集中の入力を勝手に壊しません。

  2. 02

    リアルタイム解析とエラー位置へのジャンプ

    入力が変わるたびに再解析します。正しい場合は解析OK、失敗した場合は行列位置を表示し、エディター内でもエラー周辺を示します。エラー表示をクリックすれば該当箇所へ移動できます。

  3. 03

    不完全なJSONのスマート修復

    修復を試すは、厳密なJSON、エスケープされたJSON文字列、Python風の真偽値やnull、jsonrepairによる修復などを順番に試します。ログ、コンソール出力、コードからコピーしたほぼJSONの断片を扱うときに便利です。

  4. 04

    整形、圧縮、キーの並び替え

    整形は現在のJSONを読みやすく書き直し、圧縮は1行にまとめます。キーを並び替えはオブジェクトのキーを再帰的にソートし、diff、レビュー、fixtureを安定させます。並び替えはエディター内のテキストを書き換えるため、元の順序を残したい場合は先にコピーしておいてください。

  5. 05

    文字列へのエスケープと反エスケープ

    エスケープは現在のJSONをJSON文字列に変換します。ログ、設定フィールド、コード上の文字列に埋め込むときに便利です。反エスケープはJSON文字列を構造化されたJSONへ戻し、二重にエンコードされたpayloadを読みやすくします。

  6. 06

    入れ子になったJSON文字列を展開

    フィールドの値そのものがJSON文字列になっている場合、たとえばログ内の payload: "{...}" のような値を、入れ子を展開でオブジェクトや配列として復元できます。値を手動でコピーして別のツールに貼る手間を減らせます。

  7. 07

    IDEに近い折りたたみ摘要

    展開中は余計な件数表示を出さず、コード領域をすっきり保ちます。配列を折りたたむと 5 elements、オブジェクトを折りたたむと 10 keys のように表示され、規模感をすばやく把握できます。

  8. 08

    JSON Pathステータスバー

    下部ステータスバーには、現在のカーソル位置に対応するJSON Pathが表示されます。例：$.data.users[0].name。クリックでコピーできるため、ドキュメント、フィールド指定、バックエンドとの確認に役立ちます。

  9. 09

    表示を調整できるエディター

    表示オプションから、行番号、折りたたみコントロール、自動折り返し、現在行のハイライトを切り替えられます。大きなpayloadは全画面モードで確認でき、周囲のUIに邪魔されません。

  10. 10

    完全ローカル、アップロードなし

    解析、整形、修復、折りたたみ、コピー、ファイル読み込み、ダウンロード生成はすべてブラウザ内で完結します。本番レスポンス、内部設定、token、ログ内容がサーバーへ送信されることはありません。

使い方

基本の流れは、貼り付けまたはアップロード、解析状態の確認、必要に応じた修復、その後の整形・折りたたみ・コピー・ダウンロードです。

  1. 01

    JSON、APIレスポンス、Webhook、ログ断片、設定ファイルをエディターへ貼り付けます。ローカルのJSON / テキストファイルはファイルを読み込むから開けます。

  2. 02

    内容が正しいJSONなら、貼り付け時やアップロード時に自動で整形されます。正しいJSONでない場合は原文を残し、解析状態を表示します。

  3. 03

    解析失敗が出たら、エラー表示をクリックして該当行列へ移動します。ログ、JSコンソール、Python風の出力から来た内容なら、修復を試すを使ってください。

  4. 04

    整形圧縮キーを並び替えで構造を整理し、エスケープ反エスケープ入れ子を展開で文字列化されたJSONや二重エンコードされたpayloadを処理します。

  5. 05

    大きなpayloadは、まずすべて折りたたむを使い、必要なオブジェクトや配列だけを展開します。折りたたみ摘要で elements / keys の件数を確認できます。

  6. 06

    下部のJSON Pathを確認し、クリックで現在のフィールドパスをコピーします。より広い作業領域が必要な場合は全画面表示に切り替えます。

  7. 07

    最後に用途に応じて整形版または圧縮版をコピーするか、ダウンロードでJSONファイルとして保存します。

詳細

このツールは、JSONのデバッグでよく起きる問題をまとめて扱えます。構文が壊れている、構造が深すぎる、フィールドの場所が分からない、値が文字列化されている、安定したdiffが必要、機密payloadを外部へ出したくない、といった場面に向いています。

  • 正しいJSONを貼り付けると自動で整形されるため、最初に整形を押す必要がありません。
  • JSONファイルをアップロードすると自動整形を試みます。解析できない場合は原文を残すので、そのまま修復作業を続けられます。
  • 解析状態をリアルタイムに表示し、エラー時は行列位置を示してクリック移動できます。
  • 整形済みJSONを1行へ圧縮でき、リクエストbody、環境変数、ログフィールド、fixtureに使いやすくなります。
  • オブジェクトのキーを再帰的に並び替え、APIレスポンス、設定ファイル、テストデータのdiffを安定させます。
  • JSONをエスケープ済み文字列へ変換したり、エスケープされたJSON文字列を構造化JSONへ戻したりできます。
  • ログ基盤やメッセージキューでよくある、二重エンコードされたJSON文字列を自動展開できます。
  • 配列を折りたたむと要素数、オブジェクトを折りたたむとキー数を表示します。展開中は余計なbadgeを出さず、視覚的なノイズを抑えます。
  • 下部に現在の行列、JSON Path、解析状態、文字数を表示し、大きな構造でも迷いにくくします。
  • 行番号、折りたたみ操作、自動折り返し、現在行ハイライトを必要に応じて切り替えられます。
  • 深いpayloadは全画面で確認でき、現在の整形済み内容をダウンロードすることもできます。

活用シーン

このページは、手元にあるJSONをすばやく読み解き、直し、整理し、コピーしたい場面全般に向いています。

  1. APIレスポンスのデバッグ

    REST、GraphQL、RPCのレスポンスを貼り付け、整形したうえで不要な分岐を折りたたみ、フィールドの欠落、null、型違い、余計な階層を確認できます。

  2. Webhookやイベントpayloadの確認

    Stripe、GitHub、Slack、決済システム、計測基盤などから届くイベントを確認し、event type、id、timestamp、signature関連フィールド、業務payloadをすばやく見つけられます。

  3. ログ内のJSON断片を復元

    ログに含まれるJSON文字列、エスケープされたpayload、近似JSONを貼り付け、反エスケープ、入れ子展開、修復を使って読みやすい構造へ戻せます。

  4. 設定ファイルの整理

    tsconfig、package.json、eslint設定、feature flags、CDNルール、アプリ設定を整理し、整形で読みやすく、キー並び替えでdiffしやすくできます。

  5. リクエストbodyの準備

    Postman、curl、fetch、テストスクリプトで使う前に、ここでbodyを編集してJSON構文を確認し、圧縮版または整形版をコピーできます。

  6. AIツール呼び出しとprompt fixture

    モデルのtool call引数、Agentの中間状態、prompt fixtureを確認し、余分なカンマ、括弧の不足、エスケープされたフィールドによる自動化失敗を防げます。

  7. JWT / Base64 payload確認後の再整理

    JWT、Base64、その他のツールでデコードしたJSONを貼り付け、さらに整形、折りたたみ、パスコピー、キー並び替えを続けられます。

  8. テストfixtureとシードデータ

    エクスポートしたサンプルデータを、キー順が安定し、インデントのそろったJSONに整えてから、fixtures、Storybook、mock server、ドキュメントへ追加できます。

  9. 障害対応とふりかえり

    本番レスポンス、エラー文脈、ログpayloadを第三者サイトへアップロードせずに読みやすく整え、チケットやふりかえり資料に使えます。

関連情報

payloadの解析が通ったら、次は形式変換に進むことがよくあります。JSON コンバーター に渡せば、YAML、XML、CSV、TOML、JavaScriptオブジェクト構文、PHP配列などへ変換でき、各形式のオプションも利用できます。データがすでに行列構造になっている場合は、続けて CSV ツール で区切り文字の検出、表プレビュー、列名変更、CSV / TSV / JSON / Markdown へのエクスポートができます。JSONがログの接頭辞や繰り返しテキストに包まれている場合は、先に テキスト置換 で外側のテキストを取り除き、ここへ戻ってpayloadを検証できます。2つのバージョンのJSONがあり、何が変わったかを正確に確認したい場合は、JSON 差分 に渡すとgit風の並列または行内差分、JSON Pathで整理された変更一覧、長い文字列の単語レベル差分を確認できます。

覚えておきたいJSONのルール

解析エラーの多くはツールの問題ではなく、入力が厳密なJSONではないことが原因です。特にログ、コンソール出力、設定断片では、次の違いがよく問題になります。

  1. キー名は必ずダブルクォートで囲む

    標準JSONではキー名を {"name": "Alice"} のように書く必要があります。{name: "Alice"} はJavaScriptのオブジェクトリテラルであり、厳密なJSONではありません。手で直すか、修復を試すを使ってください。

  2. 文字列はダブルクォートのみ

    JSONではシングルクォート文字列は使えません。{"name": "Alice"} は有効ですが、{'name': 'Alice'} は厳密なJSONではありません。ログやPython / JSの出力ではよく見かけます。

  3. 末尾のカンマは使えない

    オブジェクトや配列の最後の要素の後ろにカンマを置くことはできません。JavaScriptでは許されることがありますが、厳密なJSONパーサーではエラーになります。

  4. 標準JSONにはコメントがない

    // や /* */ はJSONC、JSON5、JavaScriptの構文であり、標準JSONには含まれません。エディターで読めるからといって、APIやパーサーでも読めるとは限りません。

  5. JSONの値は6種類だけ

    JSONの値は object、array、string、number、boolean、null のいずれかです。undefined、関数、Date、NaN はJSON値ではありません。

  6. 整形は構造を変えないが、キー並び替えは順序を変える

    整形と圧縮は空白文字だけを変え、データ構造は変えません。キーの並び替えはオブジェクトキーのテキスト上の順序を変えるため、diffには便利ですが、元の順序を残したい場合は事前に保存してください。

使い方のヒント

JSONが大きく、階層が深くなるほど、確認手順を決めておくことが大切です。次の習慣を使うと、見落としややり直しを減らせます。

  • 貼り付けたらまず解析状態を確認します。正しいJSONなら自動整形され、解析失敗ならエラー表示から該当位置へ移動できます。
  • ログ、コンソール、バックエンド例外からコピーした内容は、まず修復を試すと反エスケープを検討してください。厳密なJSONではないことがよくあります。
  • 文字列フィールドの中にさらにJSONが入っている場合は、入れ子を展開を使います。値だけをコピーして別ツールで何度も解析する必要がありません。
  • 大きなpayloadでは、まずすべて折りたたむを使い、JSON Pathやフィールド名を見ながら必要な部分だけ展開します。折りたたみ摘要でオブジェクトや配列の規模も確認できます。
  • diffやfixtureの提交前には、整形し、必要ならキーを並び替えます。その後の変更が安定し、レビューしやすくなります。
  • HTTP body、環境変数、メッセージキュー、1行ログフィールドには圧縮版をコピー。ドキュメント、チケット、ふりかえりには整形版をコピーが向いています。
  • 本番データを扱う前に必ず脱敏してください。このツール自体はアップロードしませんが、チケット、チャット、ドキュメント、録画にコピーした内容は共有される可能性があります。

制限事項

このツールが扱うのは、JSONの構文、構造、表示です。schema検証、業務ルール検証、diff、データ変換パイプラインの代わりにはなりません。

  • JSON構文は検証しますが、フィールドが業務ルールに合っているかまでは判断しません。必須項目、列挙値、範囲制限、複数フィールドにまたがる制約は、Zod、Ajv、OpenAPI、またはバックエンドの検証器で確認してください。
  • 完全なJSON5 / JSONCエディターではありません。修復を試すはよくある貼り付け問題を扱えますが、すべての拡張構文に対応するものではありません。
  • JSON diffツールではありません。キー並び替えはdiffを安定させるのに役立ちますが、本格的な差分比較には専用のdiffツールを使ってください。
  • フィールド値の業務的な意味を自動で変更することはありません。キー名変更、型の一括変換、フィールド削除、構造マッピングには、変換ツール、スクリプト、テキスト置換が向いています。
  • 数十MB級の非常に大きなpayloadはブラウザを重くすることがあります。関連する部分だけを切り出すか、コマンドラインやストリーミング処理で分析してください。
  • すべての処理はローカルですが、端末、ブラウザ拡張、画面共有、コピー先の安全性には引き続き注意が必要です。

よくある質問

自動整形、スマート修復、折りたたみ摘要、JSON Path、プライバシー、大きなpayloadについてのよくある質問です。

私のJSONはサーバーへ送信されますか？

いいえ。解析、整形、圧縮、修復、折りたたみ、ファイル読み込み、コピー、ダウンロードは、すべて現在のブラウザタブ内で行われます。DevKitLabがpayloadをサーバーへ送信することはありません。

なぜ貼り付けただけで整形されるのですか？

貼り付けた内容が正しいJSONの場合、すぐ読みやすいように2スペースインデントで自動整形します。正しいJSONでない場合は原文を残し、途中入力や断片を勝手に変更しません。

修復を試すは何をしますか？

厳密なJSON、エスケープされたJSON文字列、Python風の True / False / None、jsonrepairによる修復、さらにそれらの組み合わせを試します。成功すると、結果を整形してエディターへ書き戻します。

JSONのように見えるのに、なぜ解析に失敗しますか？

よくある原因は、キー名にダブルクォートがない、文字列がシングルクォート、末尾カンマがある、コメントを含む、括弧が閉じていない、または入力がJSONオブジェクトではなくJSON文字列であることです。修復を試すまたは反エスケープを使ってください。

整形や圧縮でデータは変わりますか？

変わりません。整形と圧縮は空白、インデント、改行だけを変え、JSON構造は変えません。キー並び替えはオブジェクトキーの表示順を変えますが、対応する値は変わりません。

エスケープと反エスケープはいつ使いますか？

JSONを別のJSONフィールド、ログ文字列、コード上の文字列へ入れたいときはエスケープを使います。"{\"a\":1}" のような文字列化されたJSONを受け取ったときは、反エスケープでオブジェクトへ戻します。

入れ子を展開はどんな場面で使いますか？

フィールド値そのものがJSON文字列になっている場合に使います。たとえばログの payload、メッセージキューのbody、Webhook内の入れ子パラメータなどです。オブジェクトや配列の文字列を再帰的に展開します。

折りたたみ後の elements と keys は何ですか？

配列を折りたたむと要素数、たとえば 5 elements が表示されます。オブジェクトを折りたたむとキー数、たとえば 10 keys が表示されます。展開中は余計な件数表示を出さず、コード領域をすっきり保ちます。

JSON Pathは何に使えますか？

JSON Pathは、現在のカーソル位置のフィールドを正確に表すパスです。例：$.data.users[0].email。チケット、ドキュメント、ログ説明、API確認、テストのassertionなどで使えます。

キー並び替えで元の順序は変わりますか？

はい。エディター内のオブジェクトキーの順序を書き換えます。diffを安定させたり、設定を整えたりする用途には便利ですが、元の順序を残したい場合は、並び替える前に原文をコピーしてください。

大きなJSONファイルも扱えますか？

日常的なAPIレスポンス、Webhook、設定ファイル、数MB程度のpayloadなら通常問題ありません。数十MBの内容はブラウザが重くなることがあるため、関連する部分だけを切り出すか、コマンドラインツールを使うことをおすすめします。

JSONC、JSON5、NDJSONには対応していますか？

エディターは厳密なJSONとして検証します。JSONC、JSON5、NDJSONはネイティブ形式ではありません。一部のよくあるJSON5 / JSONC風の問題は修復を試すで扱えますが、NDJSONは1行ごとのJSONに分けて確認してください。

全画面のショートカットはありますか？

あります。ビューアーにフォーカスがある、またはマウスが乗っている状態で F キーを押すと、ウィンドウモードと全画面モードを切り替えられます。

関連ツール

JSONの作業は、データツール群でさらに続けられます。他形式への変換、CSVテーブル処理、payloadを包む外側のテキスト整理などに進めます。