JSON整形ツール

① このツールの使い方

テキストエリアにJSONを貼り付けるだけで、下に整形結果が自動で表示されます。ボタンを押す必要はありません。

• •1. JSONを貼り付ける：APIのレスポンスや設定ファイルの中身をそのままコピーして貼り付けます。
• •2. 表示形式を選ぶ：「整形（インデント）」でスペース2つ分の字下げ付きに、「圧縮（1行）」で改行・スペースを取り除いた1行に変換します。
• •3. コピーボタンで結果をコピー：右上のボタンでそのままクリップボードにコピーできます。

結果欄には行数と文字数も表示されるので、変換前後でデータ量がどれくらい変わったかも一目でわかります。

② 整形・圧縮のしくみ

JSONは本来「見た目」を持たないデータ形式です。プログラムの中では改行やインデントは意味を持たず、あくまで人間が読みやすいかどうかだけの違いになります。

• •整形：波かっこ・角かっこの中身を1つずつ改行し、階層が深くなるほどインデント（字下げ）を増やして表示します。
• •圧縮：改行・インデント用のスペースをすべて取り除き、必要最小限の記号だけを残した1行にします。

たとえば {"name":"shiba","age":3} のような1行のJSONを整形すると、name と age がそれぞれ改行された、階層のわかる形になります。逆に整形済みのJSONを圧縮すると、元の1行の形に戻ります。データの中身はどちらも同じで、見た目だけが変わります。

③ 整形と圧縮、それぞれどんな場面で使うか

整形は、APIのレスポンスをブラウザの開発者ツールやログで確認するとき、設定ファイル（package.jsonなど）を人が読みやすい形にしたいときに向いています。階層構造がひと目でわかるため、どの値がどの項目に属しているかを追いやすくなります。

圧縮は、通信量を減らしたいとき、あるいはJSONをコード中に1行の文字列として埋め込みたいときに使います。改行やスペースの分だけデータサイズが小さくなるため、本番環境で配信するAPIレスポンスは圧縮された状態であることが多いです。

④ エラーが出るときによくある原因

「JSONの形式が正しくありません」と表示される場合、次のような点でつまずいていることが多いです。

• •最後の項目の後ろに余計なカンマが付いている（JSONでは末尾のカンマは許可されていません）
• •文字列がシングルクォート（'）で囲まれている（JSONではダブルクォート「"」のみが有効です）
• •キー名がクォートで囲まれていない（{name: "shiba"} のような書き方はJSONとして無効です）
• •波かっこ { } や角かっこ [ ] の対応が崩れている

JSONの基本的な書き方や、これらのルールが決められている理由についてはJSONの基礎を解説した記事でも取り上げています。

⑤ 実務での使いどころ

フロントエンドの開発では、ブラウザの開発者ツールに表示されるAPIレスポンスがすべて1行に圧縮されていて読みにくい、という場面がよくあります。そんなときにレスポンスの中身をこのツールに貼り付けると、階層構造がひと目でわかる形に整形され、どの値がどの項目にぶら下がっているかを目視で追いやすくなります。逆に、フロントエンドからバックエンドの担当者へ「このJSONを送ってほしい」と伝えるときに、整形済みのJSONをそのまま提示すると、認識のズレが起きにくくなります。

⑥ ネストが深いJSONを読みやすくするコツ

APIのレスポンスは、配列の中にオブジェクトが入り、そのオブジェクトの中にさらに配列が入るというように、階層が何段にも重なることがあります。深くネストしたJSONを整形しただけの状態で目視すると、どのかっこがどの階層に対応しているのか追いにくく感じることがあります。そんなときは、まず一番外側の階層だけに注目し、興味のあるキー（たとえばdataやresultsなど）を見つけてから、その内側だけを順に追っていくと迷いにくくなります。エディタによっては、整形されたJSONを貼り付けると該当する階層の折りたたみ表示ができるものもあるため、整形結果をコードエディタに貼り付けて確認する使い方もおすすめです。

⑦ 数値・真偽値・nullの扱いに注意

JSONを手で編集する際に見落としやすいのが、数値・真偽値・nullとそれらの文字列表現との違いです。"age": 20（数値）と"age": "20"（文字列）はJSONとしてはどちらも有効ですが、プログラム側で扱うときの型が異なり、意図しない不具合の原因になることがあります。同様にtrue・false・nullはクォートで囲まずに書く必要があり、"true"のようにクォートで囲むと文字列として扱われてしまいます。このツールで整形した結果を見比べる際、値がクォートで囲まれているかどうかにも注目すると、こうした型の勘違いに気づきやすくなります。ちょっとした見落としが後々のバグにつながることも多いため、慣れないうちは1つずつ丁寧に確認する習慣をつけておくと安心です。

また、設定ファイル（tsconfig.jsonやpackage.jsonなど）を手で編集していてインデントが崩れてしまったときも、いったんこのツールで整形し直すと見た目がきれいになります。CSVとJSONを行き来したい場合はCSV⇔JSON変換ツールもあわせてお使いください。開発中のちょっとした確認作業を効率化してくれる、手軽で便利な無料の定番ツールです。日々の開発作業の効率化にぜひお役立てください。