なぜJSONの整形が必要なのか

APIのレスポンスやログファイルのJSONは、多くの場合改行やインデントなしの1行で出力されます。

{"users":[{"id":1,"name":"田中太郎","email":"tanaka@example.com","role":"admin"},{"id":2,"name":"山田花子","email":"yamada@example.com","role":"user"}]}

これでは構造を把握するのが困難です。整形すると一目で構造がわかります。

{
  "users": [
    {
      "id": 1,
      "name": "田中太郎",
      "email": "tanaka@example.com",
      "role": "admin"
    }
  ]
}

方法1: ブラウザで整形（最も手軽）

kitkitのJSON整形ツールを使えば、ブラウザ上でJSONをすぐに整形できます。

できること

  • 整形（Pretty Print） — インデント付きで見やすく表示
  • ミニファイ（Minify） — 改行・空白を除去して1行に圧縮
  • 構文チェック（Validate） — JSONの構文エラーを検出
  • コピー — 整形結果をワンクリックでコピー

使い方

  1. JSON整形ツールにアクセス
  2. 左側にJSONを貼り付け
  3. 自動的に整形された結果が右側に表示
  4. 「コピー」ボタンでクリップボードにコピー

サーバーにデータを送信しないので、APIキーやユーザー情報を含むJSONでも安全に使えます。

方法2: コマンドラインで整形

jqコマンド（おすすめ）

# 整形
echo '{"name":"test"}' | jq .

# ファイルを整形
cat data.json | jq .

# 特定のフィールドだけ抽出
cat data.json | jq '.users[].name'

jqはJSONのフィルタリングもできる強力なツールですが、インストールが必要です。

Python

# Pythonがあればすぐ使える
echo '{"name":"test"}' | python3 -m json.tool

Python標準ライブラリのjson.toolを使う方法。追加インストール不要ですが、フィルタリング機能はありません。

方法3: エディタで整形

VS Code

  1. JSONファイルを開く
  2. Shift + Alt + F（Mac: Shift + Option + F）

VS Codeは標準でJSONの整形に対応しています。

Vim

:%!python3 -m json.tool

よくあるJSONのエラーと対処法

末尾のカンマ（trailing comma）

{
  "name": "テスト",
  "age": 30,  // ← この最後のカンマがエラー
}

JSONでは最後の要素の後にカンマを付けるとエラーになります。JavaScriptでは許容されるため、混同しやすいポイントです。

シングルクォート

{'name': 'テスト'}  // ← シングルクォートはエラー
{"name": "テスト"}  // ← ダブルクォートが正しい

コメント

{
  "name": "テスト" // コメントはNG
}

JSON仕様ではコメントは許可されていません。JSONC（JSON with Comments）は一部のツール（VS Code設定ファイルなど）でのみ使えます。

JSON整形ツールでは、これらの構文エラーを検出してエラー箇所と原因を表示します。

オフラインでも使える

kitkitのJSON整形ツールは静的サイトなので、一度アクセスすればブラウザのキャッシュで動作します。オフライン環境でも使える場面があります。

まとめ

方法手軽さ構文チェックインストール
JSON整形ツール◎○不要
jqコマンド○○必要
VS Code○○必要
Python json.tool○△Python必要

手軽に使いたいならJSON整形ツール、日常的に使うならjqコマンドの導入がおすすめです。