みっけツール みっけツール 欲しいツール、きっとみっけ!
JSON

JSON整形・検証ビューア

FIXER

整形・圧縮・修復・JSONPath検索・ツリービュー・構造統計まで、JSONまわりの開発者ユーティリティを一気通貫で。

OPTIONS — オプション
インデント:
INPUT — JSON入力
RESULT — 結果
キー総数
最大ネスト深度
配列要素 総数
ノード総数
サイズ比較(整形前 / 整形後 / minify後)
整形前
整形後
minify
入力されたJSONはサーバーに送信されません。すべての処理はブラウザ内で完結します。

JSON整形・検証ビューアの使い方

JSONを貼り付けて「整形」ボタンを押すだけ。インデント幅は2/4/タブから選べます。「圧縮」で1行minify、「修復」でカンマやクォートのミスを自動修正、「検索」でJSONPathによる値抽出ができます。出力は「テキスト」と「ツリー」の2モードで切替可能。ツリービューではノードをクリックするとパス(例: data.items[3].title)がクリップボードへ自動コピーされるので、コードに貼ってそのまま使えます。

JSON修復モード
末尾カンマ・シングルクォート・キーノークォート・コメント・undefined を自動修正。「コピペしたらエラー」の救世主。
JSONPath ライブ検索
$.users[0].name 形式で値を抽出。結果クリックで値をコピー。日本語ツールで貴重な機能。
ツリービュー + パスコピー
折りたたみ可能なツリーで構造把握。クリックでパスをクリップボードへ。jq入門にも。
構造統計
キー総数・ネスト深度・配列要素数・サイズ比較を即表示。APIレビューや容量見積もりに。

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など)でも標準でサポートされています。