JSONをオンラインで検証・圧縮・整形する方法

JSONはあらゆるところに存在します。設定ファイル、APIレスポンス、環境差分、データベースエクスポート — ほとんどの開発者が認めたくないほど、JSONの読み書きとデバッグに時間を費やしています。それでもデフォルトの体験は、目が滑るほどの文字の壁か、どこかに構文エラーが潜んでいる圧縮された塊であることがほとんどです。

このガイドでは、開発者が毎日行うJSONの3つの操作を取り上げます。検証（これは正しいJSONか？）、整形（読みやすくする）、そして圧縮（本番に乗せる前に空白を除去する）です。JSON Formatter → を使えば、この3つすべてをブラウザ上で実行できます。インストール不要、アカウント不要、ターミナルへのコピペも不要です。

JSONのフォーマットが重要な理由

フォーマットは見た目の問題ではありません。JSONはソフトウェアシステムの中で2つの異なる役割を担っており、その役割は正反対の方向を向いています。

人間が読むためのJSON — 設定ファイル、コードレビュー、デバッグ、ドキュメント向け — にはインデント、改行、視覚的な構造が必要です。深くネストされたオブジェクトが1行に書かれていては、事実上読めません。

本番用のJSON — APIペイロード、ビルド成果物、ネットワークを経由するあらゆるもの向け — はその空白をすべて除去すべきです。空白はバイト数であり、バイト数は積み重なります。圧縮されたJSONペイロードは、整形済みのものと比べて20〜40%小さくなることもあり、スケール時には無視できません。

問題は、ほとんどの開発者がこの2つの形式を手作業で切り替えていることです。オンラインの整形ツールに貼り付け、コピーして戻し、デプロイ前の圧縮を忘れ、末尾のカンマが残った設定ファイルをローカルでは動いてステージングで壊れる状態で出荷してしまう。検証・整形・圧縮の3つをまとめて扱えるツールがあれば、そのすべての摩擦がなくなります。

JSONの整形：概要と手順

整形とは、コンパクトまたは折り畳まれたJSONを、一貫したインデントと改行で展開して人間が読めるようにすることです。

次のJSONを例に取ります。

{"user":{"id":42,"name":"Ada Lovelace","roles":["admin","editor"],"preferences":{"theme":"dark","notifications":true}}}

2スペースのインデントで整形すると、このようになります。

{
  "user": {
    "id": 42,
    "name": "Ada Lovelace",
    "roles": [
      "admin",
      "editor"
    ],
    "preferences": {
      "theme": "dark",
      "notifications": true
    }
  }
}

データは同じです。読みやすさはまったく違います。後者の形式が適しているのは、プルリクエストをレビューするとき、APIレスポンスをデバッグするとき、あるいは設定ファイルを手書きするときです。

標準は2スペースのインデントです（JSONの仕様自体はこの点について無言ですが、2スペースはJavaScriptエコシステムでほぼ普遍的な慣習となっています）。4スペースやタブを使うチームもありますが、重要なのは一貫性です。

ブラウザで整形するには: JSONを JSON Formatter → に貼り付け、Format をクリックします。インデントを処理して、すっきり読みやすい出力を即座に返してくれます。

プログラムで整形するには:

// JavaScript / Node.js
const raw = '{"name":"Ada","roles":["admin","editor"]}';
const pretty = JSON.stringify(JSON.parse(raw), null, 2);
console.log(pretty);

JSON.stringify の第3引数がインデントレベルです。2スペースなら 2、4スペースなら 4、タブなら "\t" を渡します。

本番用JSONの圧縮

圧縮とは、データを変えることなく、すべての不要な空白（スペース、タブ、改行）を除去することです。結果はパーサーが好む1行の密なJSONになりますが、人間には読みにくいものです。

先ほどの整形済みの例を圧縮すると次のようになります。

{"user":{"id":42,"name":"Ada Lovelace","roles":["admin","editor"],"preferences":{"theme":"dark","notifications":true}}}

これはまったく同じJSONです。すべてのキー、すべての値、すべてのネストされたオブジェクト — そのまま維持されています。違いは空白がなくなっただけです。

これが重要になる場面は？

APIレスポンス — ペイロードが小さいほどネットワーク転送が速く、帯域コストも下がります
ビルド成果物 — フロントエンドアプリにバンドルされるJSON設定ファイルは、他のアセットと同様に圧縮すべきです
環境設定 — 環境変数のサイズに厳しい上限があるシステムもあります。圧縮されたJSONはより収まりやすくなります
環境間の差分比較 — インデントスタイルが異なる2つの設定ファイルは、差分がノイズだらけになります。両方を圧縮してからdiffを取ると、実際の変更点が明確になります

ブラウザで圧縮するには: JSON Formatter → に貼り付け、Minify をクリックします。コピー可能な1行の出力が得られます。

プログラムで圧縮するには:

// JavaScript / Node.js
const pretty = `{
  "name": "Ada",
  "roles": ["admin", "editor"]
}`;
 
const minified = JSON.stringify(JSON.parse(pretty));
console.log(minified);
// {"name":"Ada","roles":["admin","editor"]}

スペース引数なしの JSON.stringify はデフォルトで圧縮済み出力を生成します。

JSONの構文検証

検証が答える問いはひとつです。これは有効なJSONか？アプリケーションにとってデータが意味をなすかどうかではなく、構文がJSONの仕様に照らして正しいかどうかです。

これは些細に聞こえますが、設定ファイルのパースエラーを前に、400行のどこが壊れているのか見当もつかないときに直面すると話が変わります。

JSONが無効になる一般的な原因を以下に示します。

末尾のカンマ

{
  "name": "Ada",
  "roles": ["admin", "editor"],
}

"editor" の後の末尾カンマはJSONでは違法です（JavaScriptやJSONCでは問題ありませんが、厳密なJSONでは許可されていません）。パーサーはこれを拒否します。

ダブルクォートの代わりにシングルクォート

{
  'name': 'Ada'
}

JSONはすべての文字列とすべてのキーにダブルクォートを要求します。シングルクォートは有効ではありません。

クォートされていないキー

{
  name: "Ada"
}

JSONではキーも文字列である必要があります。これはJavaScriptのオブジェクトリテラルとしては有効ですが、JSONとしては無効です。

コメント

{
  // author config
  "name": "Ada"
}

JSONはコメントをサポートしていません。設定ファイルでコメントが必要な場合は、JSONC、YAML、またはTOMLを検討してください。各形式のトレードオフは YAML vs JSON vs TOMLの比較で詳しく解説しています。

閉じ括弧の欠落または不一致

{
  "user": {
    "name": "Ada"
  
}

閉じられていないオブジェクトや配列はパースに失敗します。大きなファイルでは目視で見逃しやすいです。

無効なJSONを JSON Formatter → に貼り付けると、エラーがインラインでハイライトされ、問題がある正確な行と文字位置が示されます。エディタ上でその場で修正して、再度検証できます。ターミナルも、REPLでの JSON.parse も、推測も必要ありません。

よくあるJSONエラーとその修正方法

エラー	原因	修正方法
`Unexpected token ,`	末尾のカンマ	最後の要素の後のカンマを削除する
`Unexpected token '`	シングルクォートの文字列	ダブルクォートに置き換える
`Unexpected token }`	別の場所で閉じ括弧が欠落	すべての `{` に対応する `}` があるか確認する
`Unexpected end of JSON input`	入力が途中で切れている	JSONが完全に貼り付けられているか確認する
`Unexpected token /`	JSON内にコメントがある	コメントを削除する。必要な場合はJSONCを使用する
`SyntaxError: Unexpected token u`	`undefined` の値	JSONは `undefined` をサポートしていない。`null` を使用する

知っておくと役立つデバッグのパターンがあります。大きくて深くネストされたJSONの塊でエラーを見つけられない場合は、まずバリデータに貼り付けてみてください。正確な位置を指摘してくれます。その場で修正して、修正済みのバージョンを整形すれば完了です。

実践的なJSONワークフロー（ステップバイステップ）

実際のJSONタスクのほとんどをカバーする手順を以下に示します。

JSONをコピーする — APIレスポンス、設定ファイル、データベースエクスポート、ターミナル出力など、どこにあるものでも。
JSON Formatter → に貼り付ける。
まず検証する。 構文エラーがあればツールがインラインでハイライトします。他の操作を行う前に修正してください。
整形する — データを読む、構造を確認する、チームメンバーと共有する場合は Format をクリックします。
圧縮する — 空白が不要な場所（APIペイロード、ビルド成果物、環境変数）に出力を送る場合は Minify をクリックします。
結果をコピーして必要な場所に貼り付けます。

以上がワークフロー全体です。インストール不要、ターミナル不要、半端に動くブラウザ拡張機能も不要です。値のインライン編集、ツリービューのナビゲーション、JSONからCSVへの変換といったより高度な作業については、JSONビューアーとエディタのガイドで次のレベルのツール活用法を紹介しています。

各操作をいつ使うか

状況	操作
受け取ったAPIレスポンスが読めない	整形
設定ファイルを手書きしている	編集中は整形、保存前に検証
POSTリクエスト用のJSONペイロードを準備している	圧縮
異なる環境の2つの設定ファイルを比較している	両方を圧縮してからdiff
パースエラーをデバッグしている	検証
JSONスキーマのコードレビュー	整形
フロントエンドビルドにJSONをバンドルしている	圧縮

今すぐ試す

有効でも壊れていても、圧縮されていても肥大化していても、どんなJSONでも JSON Formatter → に貼り付ければ後はおまかせです。サインアップ不要、ファイルアップロード不要で、ブラウザ上で検証・整形・圧縮が完了します。

JSONを日常的に扱う方には、インラインのツリー編集向けの JSONビューアーとエディタと、設定ファイルのフォーマット選定に迷ったときの YAML vs JSON vs TOMLガイドもブックマークしておくことをお勧めします。

JSONをオンラインで検証・圧縮・整形する方法

JSONビューア・フォーマッター・エディター

JSONからCSVへのコンバーター

CSVからJSONへのコンバーター