JSON Formatterの使い方｜5つの困りごとを即解決
結論から言います
JSONでエラーが出たら、原因を考える前にこのFormatterに貼ってください。
正直、JSONのエラーは慣れている人ほどハマります。見慣れているからこそ、末尾カンマ1つに気づかず10分消えることがある。そういうときほど、まず貼るのが一番早いです。
JSONの問題の9割は、
- 構文エラー
- 書式の崩れ
- JSONとJSONCの混同
この3つです。
本記事は「読む記事」ではありません。 JSON作業で迷ったときの"起点"として使ってください。
即断テーブル
| 困っていること | 操作 | 次に読む |
|---|---|---|
| エラーの原因がわからない | 「検証のみ」→ 行番号表示 | 構文エラーと直し方 |
| JSONが読みにくい | 「整形」ボタン | — |
| 本番用に圧縮したい | 「圧縮」ボタン | 整形と圧縮の使い分け |
| VSCode設定をAPIに送りたい | 「コメント除去」ON → 整形 | JSONとJSONCの違い |
| JSオブジェクトを貼ったらエラー | — | JSオブジェクトとの違い |
このツールで解決できる5つの問題
1. 「なんかエラーって言われるけど、どこが悪いかわからない」
APIから返ってきたJSON、設定ファイル、どこかからコピペしたJSON。 エラーメッセージだけ見ても原因がわからない。
→ 貼り付けて「検証のみ」をクリック
エラー箇所の行番号と列番号が表示され、該当行がハイライトされる。
よくある原因：
- 末尾の余計なカンマ
- シングルクォート（JSONはダブルのみ）
- キーのクォート忘れ
- 文字列内の改行
→ エラー箇所が特定できたら、JSONの構文エラーと直し方で原因別の修正方法を確認。
2. 「圧縮されていて何が書いてあるか読めない」
APIレスポンスやログに出力されたJSONが1行で、目で追えない。
→ 貼り付けて「整形」をクリック
インデント付きで出力される。2スペース / 4スペース / タブから選べる。
→ 整形できたら作業完了。整形と圧縮の使い分けが気になるならこちら。
3. 「本番環境用に圧縮したい」
開発中は整形済みで作業していたが、本番では通信量を減らしたい。
→ 貼り付けて「圧縮」をクリック
改行・スペースを除去して1行に。約30%のサイズ削減。
→ 圧縮できたら作業完了。いつ整形/圧縮を使うべきか迷うなら整形と圧縮の使い分けを参照。
4. 「VSCodeの設定ファイルをAPIに送ったらエラーになった」
settings.json や tsconfig.json にはコメントが書ける。
でもそのままAPIに送るとパースエラー。
→ 「コメント除去」をONにして整形
// や /* */ を自動削除して、標準JSONとして出力。
→ 変換できたら作業完了。なぜエラーになるのか、どこでJSONCが使えるのかはJSONとJSONCの違いで解説。
5. 「JavaScriptオブジェクトを貼ったらエラーになった」
コンソールでは動いたのに、Formatterに貼るとエラー。
// これはJavaScript。JSONではない。
{ name: "test", count: 1 }
// これがJSON。キーにクォートが必要。
{ "name": "test", "count": 1 }
→ Formatterのエラー表示を見て、キーをダブルクォートで囲む。
→ 修正できたら作業完了。なぜ違うのか、変換時に何が消えるのかはJavaScriptオブジェクトとJSONの違いで解説。
基本操作
ボタンの違い
| ボタン | 動作 |
|---|---|
| 整形 | インデントを付けて読みやすく |
| 圧縮 | 改行・スペースを除去して1行に |
| 検証のみ | 出力せず構文チェックだけ |
オプション
| 項目 | 説明 |
|---|---|
| インデント | 2スペース / 4スペース / タブ |
| コメント除去 | // や /* */ を削除（JSONC対応） |
| キーソート | アルファベット順に並べ替え |
判断フロー
JSONで困った
↓
まずFormatterに貼る
↓
エラーが出た？
├── Yes → 行番号を確認 → [構文エラーと直し方](/notes/json-formatter/json-syntax-errors)
└── No → 何をしたい？
├── 読みやすくしたい → 「整形」
├── サイズを減らしたい → 「圧縮」
├── コメントを消したい → 「コメント除去」ON
└── 比較したい → 「キーソート」ON
関連記事
| 記事 | 読むタイミング |
|---|---|
| JSONの構文エラーと直し方 | エラー箇所は特定できたが、直し方がわからない |
| JSON整形と圧縮の使い分け | いつ整形/圧縮を使うか判断基準が欲しい |
| JavaScriptオブジェクトとJSONの違い | JSオブジェクトとの違い、変換で消えるものを知りたい |
| JSONとJSONCの違い | コメント付きJSONがどこで使えるか知りたい |