入力

出力

JSONフォーマッターとは？

JSONファイルを開いたら、果てしなく続く1行のコードを前にして固まってしまった経験はありませんか？APIレスポンスやデータベースエクスポートの圧縮されたJSONを読み解こうとして、誰もが一度は通る道です。JSONフォーマッターは、その絡まった塊を、実際に読めるきれいに字下げされたコードに変えてくれます。

このツールを作ったのは、JSONを手作業で整形したり、データ構造が正しいか確認するためだけに開発者ツールを開いたりするのに疲れたからです。深夜2時にAPIをデバッグしているときも、設定ファイルを確認しているときも、JSON構文を学んでいるときも、このツールが面倒な作業を引き受けます。左側にJSONを貼り付ければ、右側で美しく整形されたコードに変わります。JSON標準について詳しく知りたい場合は、JSON公式仕様やRFC 8259の技術ドキュメントをご覧ください。

JSONフォーマッターの使い方

JSONを貼り付けるかアップロード – JSONをコピーして入力パネルに貼り付けるか、「Upload」ボタンをクリックしてコンピューターから.jsonファイルを読み込みます。
自動整形 – 貼り付けた瞬間にツールがJSONを自動で整形・検証します。何もクリックする必要はなく、そのまま動作します。
結果を確認 – 出力パネルで、きれいな字下げと構文ハイライト付きで整形されたJSONを確認できます。
コピーまたはダウンロード – 「Copy」をクリックすると整形済みJSONをクリップボードにコピーでき、「Download」をクリックすると.jsonファイルとして保存できます。
必要に応じて圧縮 – 「Minify」ボタンを使うとJSONを1行に圧縮できます。本番環境やファイルサイズが重要な場合に最適です。

ヒント： Ctrl+V（MacではCmd+V）でエディターに直接貼り付けられます。整形は瞬時に行われます。

例

典型的なAPIレスポンスです。左側は窮屈な1行のJSON、右側は同じデータをきれいに整形したものです。

圧縮 → 整形済み整形

response.jsonJSON · 1行

{"id":42,"name":"Ada Lovelace","active":true,"skills":["math","engines"],"address":{"city":"London","zip":"NW1"}}

response.jsonJSON · 13行

{
  "id": 42,
  "name": "Ada Lovelace",
  "active": true,
  "skills": [
    "math",
    "engines"
  ],
  "address": {
    "city": "London",
    "zip": "NW1"
  }
}

よくある利用シーン

APIレスポンスのデバッグ

APIが圧縮されたJSONを返すと、ほとんど読めません。特定のフィールドを探したり、データ構造を理解しようとしたりしても、すべてが1行に詰め込まれています。ここで瞬時に整形すれば、オブジェクトの始まりと終わりが見え、欠けているフィールドを見つけたり、データ型の問題を特定したりできます。

設定ファイルの検証

アプリケーションのJSON設定ファイルを扱っていますか？デプロイして問題を起こすリスクを冒す前に、ここに設定を貼り付けてください。構文エラー（カンマの欠落、閉じられていない括弧）があれば、整形された出力ですぐに気づきます。古い設定と新しい設定を同じように整形すれば、テキストの並列比較で、リリース前にどのキーが実際に変わったかが簡単にわかります。

JSONの学習と指導

JSONを学び始めたばかりの方や、誰かに教えている方にとって、適切な整形は大きな違いを生みます。このツールを使って、正しく構造化されたJSONがどのようなものかを示したり、配列・オブジェクト・ネストされたデータをどう整理すべきかを理解したりできます。詳しいチュートリアルについては、MDNのJSONガイドやW3SchoolsのJSON入門チュートリアルをご覧ください。

よくある質問

このツールを使うとき、JSONデータは安全ですか？

もちろんです。すべての整形と検証はJavaScriptを使ってブラウザ内で完結します。JSONがサーバーにアップロードされたり、どこかに保存されたりすることは一切ありません。データはお使いのデバイスにとどまり、完全なプライバシーが保たれます。

JSONにエラーがある場合はどうなりますか？

ツールは構文エラーを即座に検出します。出力パネルに「Invalid JSON」というメッセージが表示されます。よくある原因は、引用符の不足、余分なカンマ、閉じられていない括弧などです。それらを修正すると整形が機能します。行き詰まったときは、Stack OverflowのJSONコミュニティに何千もの一般的なJSON問題への答えがあります。

大きなJSONファイルを整形できますか？

はい。数千行、数万件のデータポイントを含むJSONファイルでこのツールをテストしています。非常に大きなファイル（10MB以上）の場合、最初の整形に1～2秒かかることがありますが、問題なく処理します。

整形（beautify）と圧縮（minify）の違いは何ですか？

整形は字下げと改行を追加して、JSONを人間が読みやすくします。圧縮はすべての不要な空白を取り除いてファイルを可能な限り小さくします。本番環境、API、ファイルサイズを減らす必要がある場合に便利です。

モバイル端末でも動作しますか？

はい。このツールは完全にレスポンシブで、スマートフォンやタブレットでも動作します。レイアウトは小さな画面に合わせて調整されるため、外出先でもJSONを整形できます。

JSONフォーマッター

入力

出力