JSON整形・検証ビューア
FIXER整形・圧縮・修復・JSONPath検索・ツリービュー・構造統計まで、JSONまわりの開発者ユーティリティを一気通貫で。
JSON整形・検証ビューアの使い方
JSONを貼り付けて「整形」ボタンを押すだけ。インデント幅は2/4/タブから選べます。「圧縮」で1行minify、「修復」でカンマやクォートのミスを自動修正、「検索」でJSONPathによる値抽出ができます。出力は「テキスト」と「ツリー」の2モードで切替可能。ツリービューではノードをクリックするとパス(例: data.items[3].title)がクリップボードへ自動コピーされるので、コードに貼ってそのまま使えます。
undefined を自動修正。「コピペしたらエラー」の救世主。$.users[0].name 形式で値を抽出。結果クリックで値をコピー。日本語ツールで貴重な機能。JSON修復モードで直せる主なエラー
「修復」ボタンは、人間が書きがち / コピペで混入しがちな以下のエラーを自動で正規JSONに変換します。
// 修復前(よくある壊れたJSON)
{
name: 'みっけ', // キーにダブルクォートなし、シングルクォート
count: 42, // OK
tags: ['tool', 'web',], // 末尾カンマ
removed: undefined, // undefined はJSON仕様外
// コメントもJSONには書けない
}
// 修復後
{
"name": "みっけ",
"count": 42,
"tags": ["tool", "web"],
"removed": null
}
修復ロジックは文字列内("..." / '...')の置換を避けるよう状態遷移で走査するため、値の中にカンマやクォートが含まれていても誤変換しません。
JSONPathで使える書き方
このツールでサポートしているJSONPath構文は以下の通り(必要十分な簡易セット):
$ ルート(全体) $.key オブジェクトのプロパティアクセス $['key'] ブラケット記法(特殊文字を含むキーに有効) $.arr[0] 配列の0番目 $.arr[-1] 配列の最後(負のインデックスは末尾から) $.arr[*] 配列の全要素 $.obj.* オブジェクトの全値 $.a.b.c 入れ子のパス
例えば $.users[*].name で「すべてのユーザーの名前」を一括抽出できます。複雑な抽出が必要ならjq等のコマンドラインツールを併用してください。
ツリービューでパスをコピーする使い方
「ツリー」タブに切り替えると、JSONの構造が階層表示されます。各ノードの三角アイコン(▶/▼)で折りたたみができ、ノード全体をクリックするとそのパス(例: $.items[2].title)が自動でクリップボードへコピーされます。コピーしたパスはそのまま「JSONPath」入力に貼って再検索したり、コード内で使えるドット表記(data.items[2].title)にすぐ展開できます。大きなJSONでも欲しい値の場所を即特定できます。
整形・圧縮・キーソートの選び方
整形はインデント付きで読みやすくしたいとき(コードレビュー・ドキュメント貼付け)。圧縮(minify)はAPIリクエスト本文や設定ファイルでファイルサイズを最小化したいとき(通信量削減)。キーソートはGit差分を取りやすくしたいとき・APIレスポンスを比較しやすくしたいときに有効です。ソート + 整形を組み合わせると、構造の変化だけが差分として見えるため、レビューが劇的に楽になります。
JSONとは / どんなときに使う?
JSON(JavaScript Object Notation)は、データを「キー: 値」のペアで構造化して表現するテキスト形式です。Webサービス間の通信(REST API・GraphQL)、設定ファイル(package.json / tsconfig.json)、データ交換、ログ出力など、現代のWeb開発の至る場所で使われています。シンプルで言語非依存なため、JavaScript以外(Python・Ruby・Java・Goなど)でも標準でサポートされています。