JSON整形（Pretty Print）の方法【2026年版】ブラウザ・jq・コードで実現する手順

結論から

• ブラウザで整形: FormatArc の JSON Formatter に貼り付ければ完結（データはブラウザ内のみ）
• ターミナルで整形: echo '{...}' | jq . または python3 -m json.tool
• コード内で整形: JavaScript/Node.js では JSON.stringify(data, null, 2)

3つのアプローチを順に解説します。よくあるエラーの対処法と使い分けの判断基準も後半で紹介します。

JSON 整形とは

JSON（JavaScript Object Notation）はデータのやり取りで最も広く使われるフォーマットの一つです。API レスポンスや設定ファイルなど、さまざまな場面で目にします。

しかし、圧縮（minify）された JSON は人間には読みにくいため、整形（pretty-print）して構造を視覚的に把握することが日常的に必要になります。

よくある JSON の構文エラー

JSON の文法は2つの公式仕様で定義されています。RFC 8259別タブで開きます（IETF 標準「The JavaScript Object Notation (JSON) Data Interchange Format」）と ECMA-404別タブで開きます（ECMA 標準「The JSON Data Interchange Syntax」）です。どちらも同じ構文を定義しているため、以下のルールはフォーマッターの独自仕様ではなく、すべて仕様そのものに由来します。

1. 末尾カンマ（trailing comma）

{
  "name": "example",
  "value": 42,
}

最後のプロパティの後にカンマがあると、JSON としては不正です。JavaScript では許容されますが、JSON の仕様では禁止されています。

2. シングルクォート

{'name': 'example'}

JSON ではダブルクォート " のみが有効です。シングルクォート ' は使えません。

3. キーのクォート忘れ

{name: "example"}

JSON ではすべてのキーをダブルクォートで囲む必要があります。

JSON 構文エラー修正早見表

以下の表は、よくある構文エラーと RFC 8259 / ECMA-404 が求める修正方法を対応づけたものです。

JSON.stringify() で Pretty Print する

JavaScript や Node.js では、JSON.stringify() の第3引数にインデント幅を指定するだけで整形済みの JSON が得られます。

const data = { name: "Alice", age: 30, roles: ["admin", "editor"] };

// 2スペースのインデントで整形
console.log(JSON.stringify(data, null, 2));

出力結果:

{
  "name": "Alice",
  "age": 30,
  "roles": [
    "admin",
    "editor"
  ]
}

第2引数はフィルター用の replacer 関数または配列です。すべてのプロパティを残す場合は null を渡します。

タブ文字でインデントしたい場合は次のように書きます。

JSON.stringify(data, null, "\t");

JavaScript で pretty print するときの落とし穴

JSON.stringify() は単純なケースには十分ですが、本番コードで踏みやすいパターンがいくつかあります。修正自体は短いコードで済むので、深夜にデバッグする前に知っておきたい内容です。

循環参照

入力に含まれるオブジェクトのどれかが自分自身を参照していると、JSON.stringify は TypeError: Converting circular structure to JSON を投げます。定番の解決策は、既にシリアライズしたオブジェクトを記録しておく replacer 関数を渡すことです。

function safeStringify(value, space = 2) {
  const seen = new WeakSet();
  return JSON.stringify(value, (_key, val) => {
    if (val && typeof val === "object") {
      if (seen.has(val)) return "[Circular]";
      seen.add(val);
    }
    return val;
  }, space);
}

DOM 風のツリー構造、状態管理ライブラリのストア、ロガーのペイロードで request オブジェクトを再参照しているコードなどで頻繁に発生する実行時エラーです。

toJSON() で出力を制御する

JSON.stringify は各値に toJSON() メソッドがあれば、その戻り値を採用します。Date 型は標準で toJSON() を持っていて ISO 8601 形式の文字列を返しますが、自分のクラスでも同じことができます。

class Money {
  constructor(amount, currency) {
    this.amount = amount;
    this.currency = currency;
  }
  toJSON() {
    return `${this.amount.toFixed(2)} ${this.currency}`;
  }
}
JSON.stringify({ price: new Money(19.9, "USD") }, null, 2);
// → { "price": "19.90 USD" }

シリアライズ前に別の変換ステップを走らせるよりすっきりしますし、pretty print のインデントもそのまま効きます。

replacer でキーを絞り込む / マスクする

第 2 引数の replacer は循環検出だけでなく、特定のキーを落とすのにも使えます。シークレットをマスクしたい、ログに残す API レスポンスからノイズを削りたい、というときに便利です。

const redactKeys = new Set(["password", "apiKey", "authorization"]);
JSON.stringify(response, (key, value) => redactKeys.has(key) ? undefined : value, 2);

関数の代わりに「残したいキーの配列」を渡すこともできます。

JSON.stringify(user, ["id", "email", "createdAt"], 2);

prettier と JSON.stringify の使い分け

CLI の prettier は複数言語対応のコードフォーマッタです (TypeScript、CSS、Markdown、JSON など)。プロジェクトで Prettier を導入している場合、.json ファイルは prettier --write file.json で整形すれば、printWidth やトレイリングカンマ、クォートのルールがプロジェクト全体と揃います。

一方、デバッグ出力・API レスポンスの一時確認・メモリ上の値をその場で見たいといった「単発の pretty print」には、JSON.stringify(data, null, 2) か FormatArc の JSON Formatter が速くてインストールも要りません。Prettier は「コードベース全体で一貫性を保ちたい」とき、JSON.stringify とブラウザツールは「いまこの出力を 1 回だけ整えたい」ときに向いています。

コマンドラインで JSON を整形する

jq を使う方法

jq は軽量なコマンドラインの JSON プロセッサです。パイプで渡すだけで整形できます。

echo '{"name":"Alice","age":30}' | jq .

Python を使う方法

Python に標準搭載されている json モジュールでも整形できます。

echo '{"name":"Alice","age":30}' | python3 -m json.tool

curl のレスポンスを整形する

API のデバッグ時には、curl と jq を組み合わせるとレスポンスをそのまま整形できます。

curl -s https://api.example.com/data | jq .

ブラウザで手軽に整形する

FormatArc の JSON Formatter を使えば、ブラウザ内だけで JSON を整形できます。データはサーバーに送信されないため、業務データや API レスポンスも安心して貼り付けられます。

使い方

1. 入力欄に JSON を貼り付ける
2. 「実行」ボタンを押す
3. 整形結果をコピーする

たったこれだけのステップで、読みやすい JSON が手に入ります。

整形前に JSON を検証する

JSON が壊れていると整形に失敗します。原因の多くは末尾カンマ、シングルクォート、キーのクォート忘れ（上記参照）です。設定ファイルにコメントを残したい場合は JSONC や JSON5 などの方法を検討してください。エラーメッセージに文字位置が含まれていても、大きなファイルでは該当箇所を見つけにくいことがあります。

FormatArc の JSON Formatter はエラー発生箇所の行番号を表示するため、問題の特定が容易です。よくあるパースエラーの原因と対処法は JSON Parse Error の解決方法 で詳しく解説しています。

Chrome 拡張で JSON を自動整形する

ブラウザで API エンドポイントを直接開いて確認することが多い場合は、Chrome 拡張を使う方法もあります。JSONView や JSON Formatter など、代表的な拡張の違いと選び方はJSON整形のChrome拡張おすすめ比較で解説しています。

他のデータ形式との連携

JSON の整形は、フォーマット間の変換を含むワークフローの一部になることがよくあります。

• YAML と JSON の違い — どちらを使うべきかの判断基準
• YAML を JSON に変換する方法 — Kubernetes 設定や CI ファイルの変換
• CSV を JSON に変換する方法 — スプレッドシートのエクスポートを JSON 化
• JSON の書き方ガイド — 正しい JSON を書くための基本
• formatarc CLI の使い方 — ターミナルから JSON を整形する方法
• curl レスポンスの JSON を整形する方法 — API デバッグ時に curl の出力を jq や python で即座に整形

今すぐ試してみる

整形したい JSON があれば、JSON Formatter を開いてデータを貼り付けるだけです。会員登録もサーバー送信も不要で、すぐに整形結果が得られます。

まとめ

• JSON の整形（Pretty Print）は開発・運用で日常的に必要な作業
• JSON.stringify(data, null, 2) でコード内から手軽に整形できる
• コマンドラインでは jq や python3 -m json.tool が便利
• よくあるエラーは末尾カンマ、シングルクォート、キーのクォート忘れ
• FormatArc ならブラウザだけで安全に整形できる