🌐 JA

🧾 JSON Formatter

JSONにインデントを付けて読みやすく整形したり、1行に圧縮したりできます。構文エラーがあれば正確な位置(行:列)を表示します。折りたたみ可能なツリービューで構造を一目で把握できます。

ガイド

詳しく見る

01

1. Pretty PrintとMinifyの違い

Pretty print(整形)はJSONにインデントと改行を加えて人が読みやすくする作業で、minify(圧縮)は逆に不要な空白や改行をすべて取り除いてファイルサイズを最小化する作業です。開発中はPretty printされたJSONがデバッグに役立ちますが、実際のAPIレスポンスや本番デプロイではminifyされたJSONがネットワーク転送量を削減します。このツールはインデントを2スペース・4スペース・タブから選べるので、プロジェクトのコードスタイルに合わせられます。

02

2. JSONエラーの位置を正確に見つける方法

JSON.parse()が投げるエラーメッセージはブラウザエンジンによって形式が異なり、正確な位置がわかりにくいことが多くあります。このツールはJSONの文法(オブジェクト・配列・文字列・数値・リテラル)を直接スキャンする独自のパーサーを内蔵しており、どのブラウザで開いても常に同じ「何行目、何列目」で問題が発生したかを示します。カンマの欠落、引用符のないキー、文字列の終端漏れなど、よくあるミスをすばやく見つけるのに役立ちます。

03

3. ツリービューで複雑なJSON構造を把握する

深くネストされたJSONはテキストだけではどの括弧がどこに対応しているのか把握しづらいものです。ツリービューはオブジェクトと配列を折りたたみ/展開可能なノードとして表示し、関心のある部分だけを展開して見ることができます。各ノード横のコピーボタンを押すと、その値のパス(例:$.tools[1])がクリップボードにコピーされ、コード内でその値を参照する際にそのまま貼り付けられます。

一緒に使うと便利なツール

よくある質問

入力したJSONはサーバーに送信されますか?
いいえ。パース・整形・検証はすべてブラウザ内でJSON.parse()のみを使って処理され、バックエンドAPIは一切呼び出されません。機密性の高いAPIレスポンスや設定値も安全に確認できます。
エラーメッセージが簡潔すぎてわかりにくいのですが?
「位置 3:5 — Expected ',' or '}'」のように、行:列とどのトークンが期待されていたかが表示されます。入力欄でもその行が自動的に選択されるため、すぐに該当箇所へ移動できます。
インデント方式を変更すると、入力済みの内容も自動的に変わりますか?
「整形」ボタンを再度押したときに選択したインデント(2/4スペース・タブ)で再フォーマットされます。プルダウンを変更しただけでは自動的には反映されません。
ツリービューの「キー数」と「深さ」は何を意味しますか?
「キー数」はJSON全体でオブジェクトのプロパティ(キー)がいくつあるかの合計で、「深さ」は最も内側までネストされた段階数です。構造の複雑さの目安として参考にできます。