JSONの整形とは、機械が省いた改行とインデントを加えて、4万文字の1行を形の見えるものに変えることです。たいていのエディタやターミナルなら、コマンド1つでできます。実際に決めることは、インデントの幅と、整形のためにデータをWebサイトに貼り付けるかどうかだけです。
先に結論
- ターミナルで：
jq . file.json、またはpython3 -m json.tool file.json。 - VS Codeで： ファイルを開いて Shift+Alt+F（Macは Shift+Option+F）。
- ブラウザで： JSONビューアを内蔵しているFirefoxで
.jsonのURLを開き、Pretty Print を押します。 - スマホで： テキストをWebサイトに貼り付けるのではなく、Beautifyコマンドのある JSON アプリを使います。
- そもそも整形できない： まだ有効なJSONではありません。先にそちらを直します。整形ツールのエラーメッセージが場所を教えてくれます。
整形で変わるもの、変わらないもの
整形（プリティプリント）が加えたり取り除いたりするのは、トークンの間にある空白だけです。文字列の外にあるスペース、タブ、改行のことです。正しい整形ツールは値には一切触れません。つまり、次の2つは同じドキュメントです。
{"id":7,"tags":["a","b"],"owner":{"name":"Ana"}}
{
"id": 7,
"tags": [
"a",
"b"
],
"owner": {
"name": "Ana"
}
}
ミニファイはその逆で、省略できるスペースと改行をすべて取り除きます。ネットワークで送るときや、1行しか受け付けない設定欄に貼るときに使います。どちらの方向でも、データの意味は変わりません。自分で書いていないファイルでも、安心して整形し直せるのはそのためです。
多くのツールでは、整形の隣にあるのに、害はなくても変更になる操作が2つあります。各オブジェクトをアルファベット順に並べ替えるキーのソートと、ドキュメント全体を1つの文字列にするエスケープです。副作用としてではなく、意図して行ってください。
ターミナルで
入れておくなら jq です。
jq . data.json # pretty, 2-space indent
jq --indent 4 . data.json # 4 spaces
jq --tab . data.json # tabs
jq -c . data.json # minified, one line
jq -S . data.json # keys sorted A–Z
ファイルをその場で整形するときは、一時ファイルに書き出してから戻します。jq . data.json > data.json では、jqが読む前にファイルが空になってしまいます。
jq . data.json > tmp.json && mv tmp.json data.json
Python には整形機能が付いているので、Python 3があるマシンならどこでも使えます。
python3 -m json.tool data.json
python3 -m json.tool --indent 4 --sort-keys data.json
python3 -m json.tool --compact data.json
実データで差が出る点があります。json.tool は整数以外の数値をPythonのfloatとして読むので、1.10 のような値は 1.1 になって出力されます。jq 1.7以降は、数値リテラルを書かれたとおりに保ちます。価格、バージョン番号、先頭の桁が意味を持つIDがファイルにあるなら、出力を確認してください。
エディタで
VS Code： Shift+Alt+F でドキュメント全体を整形します。コマンドパレットの Format Selection なら一部だけです。[json] ファイルを頻繁に編集するなら、"editor.formatOnSave": true を設定しておくと便利です。インデントはエディタのタブサイズ設定に従います。
Sublime Text、Notepad++、JetBrains系IDE は、どれもJSONを整形できます。標準機能（JetBrains：Code → Reformat Code）か、1行で入るプラグイン（Notepad++：JSON Viewer や JSTool）です。
Prettier は、プロジェクト全体のJSONの見た目をそろえたいときに向いています。npx prettier --write "**/*.json" を実行します。
ブラウザで
Firefox は、あらゆるJSONレスポンスを自動で整形します。折りたたみできる JSON タブ、Raw Data タブ、Pretty Print ボタンがあります。何もインストールせずにAPIのレスポンスを読むなら、これがいちばん手早い方法です。
ChromeとEdge は、最近のバージョンなら生のJSONの上に Pretty-print のチェックボックスが出ます。それ以上のこと（折りたたみ、キーで検索）には拡張機能が必要です。
オンライン整形ツールの問題
このテーマで検索すると、1ページ目は大きなテキストボックスがあるWebサイトばかりです。使えますが、問題は何を貼り付けるかです。
アクセストークン入りのAPIレスポンス、データベースのパスワード入りの設定ファイル、顧客データのエクスポート。こうしたものが、日常的に整形ツールに貼り付けられています。そのテキストがブラウザの中にとどまるのか、サーバーに送られて記録されるのかを、ページから確かめる方法はありません。「共有」ドキュメントを、推測できるURLで保存していたサイトが見つかった例もあります。
ルールは単純です。公開チャットに貼れないものは、ローカルで整形します。上で挙げた方法は、どれも手元のマシンで動きます。
インデントの選び方
- スペース2つが事実上の標準です。jq、Prettier、たいていのJavaScript系ツール、たいていのAPIドキュメントがそうです。
- スペース4つは、ネストの深いドキュメントを広い画面で読むのに向いています。Pythonの慣習でもあります。
- タブは、読む人が自分で幅を選べて、ファイルも少し小さくなります。
どれも間違いではありません。プロジェクトごとに1つ選び、整形ツールで強制しましょう。そうすれば、差分に空白の変更ではなくデータの変更が出ます。
iPhoneとiPadで
スマホはJSONがいちばん読みにくい場所です。iOSは .json ファイルを改行のないプレーンテキストで表示するからです。開き方はこちらにまとめています。整形はその次の手順です。
Smart Jsonでは、Beautify が一貫したインデントでドキュメントを整形し、Minify が1行にまとめ、Sort keys A–Z が各オブジェクトを並べ替えます。3つとも元に戻せます。テキストを解析できないときは、中途半端に有効なものを整形せず、問題を行と列つきでバナーに表示します。Fix は、よくある原因であるコメント、末尾のカンマ、シングルクォート、引用符のないキーを直します。
iPhoneとiPadでBeautify、Minify、Sort keys。オフラインで動き、JSONが壊れているときはやさしい言葉でエラーを知らせます。Webサイトには何も貼り付けません。
できること整形に失敗するとき
整形ツールは、有効なJSONでないものを受け付けません。エラーは、たいてい位置で示されます。line 1, column 3,912 のような形です。ミニファイされたドキュメントは1行なので、手がかりは列です。よくある原因は、末尾のカンマ、シングルクォート、コメント、引用符のない値です。よくあるエラーは、すべてこちらで解説しています。各メッセージの意味も載せています。