JSON整形

JSON整形の使い方

1. 1整形したいJSONデータをテキストエリアに貼り付けます
2. 2「変換する」ボタンをクリックします
3. 3インデント付きで整形された結果をコピーして利用します

JSON整形の例文・サンプル

{"name":"太郎","age":30,"skills":["JS","Python"]}

良いJSON整形の判断基準

APIのレスポンスや設定ファイルのJSONが読みにくいとき、構文エラーの原因を探したいときに使います。整形結果が出たら、下の基準で「正しいJSONになっているか」を確認してから次の作業に進みます。

• 末尾カンマやコメントが残っていないか

  JSONの仕様では、最後の要素の後ろのカンマ（末尾カンマ）とコメントは認められていません。プログラムのコードからコピーしたデータに混ざりやすいので、エラーが出たらまずここを疑います。

• キーと文字列がダブルクォートで囲まれているか

  JSONではキーも文字列も "（ダブルクォート）で囲む決まりです。シングルクォートやクォート無しのキーは、プログラムのコード上では通ってもJSONとしてはエラーになります。

• エラー表示が出たら1か所ずつ特定したか

  構文エラーは、カンマ抜け・括弧の閉じ忘れ・クォート抜けが定番です。1か所直すと次のエラーが見えてくることもあるので、表示された位置の手がかりから順番に潰していきます。

• 整形の前後でデータの中身が変わっていないか

  整形が変えるのは改行とインデント（見た目）だけで、値そのものは変わらないのが正常です。値や件数が違って見える場合は、コピーの欠落など貼り付け側の問題を疑います。

• 扱っているのが標準のJSONか、コメントを許す拡張形式か区別したか

  開発ツールの設定ファイルには、コメントを書ける拡張形式のものもあります。それらは標準のJSONとは別物なので、どちらの形式を扱っているかを意識して使い分けます。

• 機密データを貼る前に所属組織のルールを確認したか

  APIのレスポンスには認証トークンや個人情報が含まれることがあります。外部のツールに貼ってよいデータかどうか、所属組織のルールを先に確認します。

ありがちな失敗例（NG → 改善）

1行に圧縮された JSON が読めなくなる場面

API レスポンス・設定ファイル・データベース出力などで JSON データを扱う場面は、Web 開発・データ分析の現場で頻繁にあります。しかし圧縮された1行 JSON や、改行・インデントが乱れた JSON は人間が読めず、ミス特定や構造把握に時間がかかります。本ツールは入力された JSON 文字列を2スペースのインデントで整形し、構文エラーがある場合は整形結果を出さずにエラー文を返します。Web開発・データ分析の現場で日常的に使えます。

処理はブラウザの中だけで完結します。編集部が4パターンを流しながら通信を見張った範囲では、処理中に生成 AI の API を呼ぶ通信は1件も発生しませんでした。

API レスポンスの読解と設定ファイルの検証で使う場面

【1. API レスポンスの読解】1行に圧縮されたJSONレスポンスを整形して、ネスト構造とフィールドを把握できます。

【2. 設定ファイルの検証】package.json、tsconfig.json などで構文エラーがないか確認できます。

【3. 深い入れ子の構造把握】階層が深い JSON でも省略せずに開くので、どの階層にどのキーがぶら下がっているかを目で追えます。実際に5階層の入れ子を流した結果は後の項目に書いています。

name・age・tags の1行 JSON を整形にかけた実処理結果

編集部で4パターンを流し、画面に出た文字をそのまま記録しました。

入力は、name・age・tags の3つのキーを空白なしで1行に詰めた JSON です。age は数値の30、tags は "a" と "b" の2要素の配列、name には日本語の文字列を入れました。

出力は、キーごとに改行が入り2スペースずつ字下げされた形になりました。tags の配列も1行に並べず、"a" と "b" が1要素ずつ別の行に分かれ、閉じ括弧まで含めて全体で8行です。数値の30は引用符の付かない数値のまま、日本語の値も文字化けせずそのまま残りました。

インデント幅を選ぶ欄はなく、出力は2スペース固定です。4スペースで管理しているリポジトリに戻す場合は、貼り付け先のエディタ側で整え直すことになります。

末尾カンマとシングルクォートで返ってきたエラー文の実物

エラーになる入力も2パターン試しました。

name と age の2つのキーを持つ短い JSON を用意しました。最後の値の後ろにカンマを1つだけ足した入力を渡すと、整形は行われず「JSON構文エラー: Expected double-quoted property name in JSON at position 22」と表示されました。

キーと値をシングルクォートで囲んだ JSON 風の1行を渡すと、「JSON構文エラー: Expected property name or '}' in JSON at position 1」と表示されました。

「JSON構文エラー:」までは日本語ですが、その後ろはブラウザの JSON 解析器が返す英語の文がそのまま入ります。position の数字は入力の先頭から何文字目かを指すので、貼り付けた文字列の同じ位置を数えれば場所は特定できます。ただし「何が足りないのか」を日本語で言い換える処理は入っていません。

5階層ネストと50要素の配列を入れて分かった整形のクセ

深い構造で途中が切れないかを確かめるため、5階層の入れ子の一番奥に50要素の数値配列を置いた JSON も流しました。結果は省略も打ち切りもなく、50個の数字が1行ずつ、半角12文字分の字下げまで開いた形で全部出ました。

ここまでで分かったクセは3つです。1つ目は、整形が変えるのは改行と字下げだけで、値そのものには手を入れないこと。2つ目は、エラーのときは途中までの整形結果を返さず、出力欄がまるごとエラー表示に切り替わること。3つ目は、エラー文の位置が「行と列」ではなく「先頭からの文字数」で示されることです。

弱点については、今回の4パターンでは処理そのものが崩れる場面はありませんでした。構造上の限界は、標準の JSON 以外を受け付けないところにあります。コメント付きの設定ファイルや末尾カンマを許す書き方は、読めるかどうかではなく仕様として弾かれます。なお、これは今回試した4パターンで見えた範囲で、どんな JSON でも同じ挙動になる保証ではありません。

AI を使わずに2スペース整形だけを行う仕組み

本ツールが内部で行っているのは、貼られた文字列を JSON として読み込み、2スペースの字下げで書き出す、この2段だけです。読み込みに失敗したときだけ、ブラウザが返した解析メッセージを「JSON構文エラー:」の後ろに付けて表示します。

画面にあるのは JSON を貼る欄が1つだけで、インデント幅や出力形式を選ぶ設定はありません。できるのは、2スペースで整形することと、構文エラーの有無を確かめることの2つです。

生成 AI は使いません。編集部が4パターンを流しながら通信を監視しましたが、生成 AI の API を呼ぶ通信は0件でした。貼ったデータが外部のモデルに渡ることも、待ち時間が発生することもなく、結果はその場で返ります。

コメント付き JSON・Shift-JIS・機密データという向かない入力

1つ目の失敗は、JSON5 や JSONC（コメント付きJSON）の構文を正規のJSONとして扱うことです。標準JSONはコメントを許可していません。コメント付きJSONを整形したい場合は、別のツールを使ってください。

2つ目は、エンコードの問題です。Shift-JIS などのエンコードで保存されたJSONはエラーになる場合があります。UTF-8 で扱うのが原則です。

3つ目は、機密データの取り扱いです。本ツールはブラウザ内処理ですがメモリ上にデータが存在するため、極めて機密性の高いデータはオフライン環境のローカルツールを推奨します。

向かない用途をもう1つ挙げると、値そのものを直す作業です。本ツールは並べ方を変えるだけで、キー名の統一や不要な項目の削除はしません。中身を編集したい場合はエディタで開く方が早く済みます。

エディタや API クライアントとの使い分けと、整形後に見る2点

VSCode などのエディタにもJSON整形機能はありますが、ブラウザでちょっと確認したいだけの時に開くのは手間です。Postman などのAPIクライアントでも整形できますが、特定のレスポンス確認のためだけに開くのは過剰です。本ツールはブラウザ内で完結し、サーバー送信なしで整形できます。会員登録もログインも不要です。

整形結果を次の作業へ持っていく前に、人が見るのは2点です。1つ目は、件数と値が元データと合っているか。整形が変えるのは見た目だけなので、配列の要素数や値が減って見えるときは、貼り付けの途中で文字列が切れている可能性を先に疑います。2つ目は、エラー表示が出た場合の position の数字です。先頭からその文字数だけ数えた位置を見れば、カンマ抜けや引用符抜けはたいてい見つかります。