JSONフォーマッター＆ビューアー
JSONを貼り付けるとすぐにその場で整形；任意のフィールドをクリックすると右側で完全な値とパスを確認。構文エラーは行と列で表示、すべてブラウザ内で完了。
- インデント
- 2/4スペース・Tab
- 追加機能
- クリック表示・ソート・統計
- プライバシー
- 内容はアップロードされません
- 利用制限
- 無料・登録不要
なぜこれが必要なのか？
毎日JSONを読む人のための実用ツール
APIレスポンス、設定ファイル、ログペイロード——生のJSONはしばしば途切れのない1行になります。それを読みやすくしたり、間違ったカンマを見つけたり、必要な形式に戻したりできます。
整形と圧縮をワンクリックで切り替え
人間が読めるツリー構造とマシンが送信する1行の間をワンクリックで切り替え、2スペース、4スペース、Tabの3種類のインデントから自分のコードベースのスタイルに合わせて選べます。
エラーを行と列で位置特定
構文エラーを「L12:C34」のような行と列の座標で直接示し、難解なパーサーのエラーメッセージではなく、どのカンマや引用符が不足しているか一目瞭然です。
キー名を再帰的にソート
オブジェクトのキーを各階層でアルファベット順に再帰的にソートし、配列の要素は元の順序を保持します。設定の比較やテストフィクスチャの固定に最も実用的です。
文字列のエスケープ/アンエスケープ
JSON全体を文字列リテラルにエスケープしてコードや環境変数に埋め込みやすくします。またログ内の{"a":1}のようなリテラルを元のJSONに復元することもできます。
フィールドをクリックして完全な内容を表示
編集領域内の任意のフィールドをクリックすると、右側のドロワーにその完全な値、型、JSON パスが表示されます。ネストされたオブジェクトや配列も完全に確認でき、括弧の数を数えて内容を確認する必要はありません。
完全にローカルで実行
JSON はブラウザから出ることなく、ツールはオフラインで利用可能で、入力が空の場合にはリクエストが一切送信されません。
使用方法
インデントは 2 文字、4 文字、タブの間で切り替え可能です。機械に渡す必要がある場合はワンクリックで 1 行に圧縮し、安定した順序が必要な場合はオブジェクトのキー名を再帰的にソートできます。また、JSON 全体を文字列リテラルにエスケープしたり、ログ内のエスケープされたリテラルを元に戻すこともできます。
任意のフィールドをクリックすると、右側のドロワーでその完全な内容を確認できます。キーの数、配列の要素、ネストの深さは入力に応じてリアルタイムで集計されます。同じページに複数の JSON を並べて比較表示でき、各々の内容は相互に影響しません。すべての処理はブラウザのローカルで行われ、内容がアップロードされることはありません。
その他のJSONツール
用途別に選定したサードパーティ製ツールです。当サイトでは同機能を実装していませんので、必要に応じてご利用ください。
| ツール | 用途 | 主な機能 |
|---|---|---|
| JSON Editor Online | 編集・検証 | テキスト形式とツリー形式の2画面が連動し、ドラッグで構造を調整可能です。Diff機能、Schema検証、検索機能を内蔵しています。 |
| JSON Crack | 可視化 | JSONをインタラクティブなノード図に変換し、複雑な入れ子構造の理解やプレゼンテーションに適しています。 |
| JSON Visio | 可視化 | 別のグラフィカルビューアーで、より軽量なインターフェースが特徴です。お好みに合わせてJSON Crackと使い分けられます。 |
| Diffchecker | 比較 | 2つのテキストを並べて表示または統合ビューで比較し、追加・削除・変更された行を素早く特定できます。 |
| JSONPath | 検索 | JSONPath式をオンラインで実行し、JSONから目的のフィールドをパス指定で取得できます。 |
| JSONata | 検索・変換 | JSON の式言語を検索・変換でき、オンラインプレイグラウンドとサンプルも参照可能です。 |
| quicktype | 型生成 | JSON を TypeScript、Swift、Go などの言語の型定義に変換します。 |
| JSON Generator | データ生成 | テンプレートを使用して構造化されたモックデータを生成し、インターフェーステスト用のサンプル作成に適しています。 |
JSON フォーマットの詳細について
JSON は単純に見えますが、実際にはいくつかの厳格なルールがあります。これらを理解すると、パーサーがペイロードを拒否した場合に手間が省けます。
どのような JSON が適法と見なされますか？
JSON はオブジェクト、配列、文字列、数値、真偽値、null の 6 種類の値のみを定義します。キーはダブルクォーテーションで囲まれた文字列でなければならず、余分なカンマやコメントは許可されません。
JavaScript のシングルクォーテーション、undefined、NaN、Infinity、末尾のカンマは厳密なパーサーでエラーとなりますが、当ツールではこれらの問題を指摘します。
「表示」と「フォーマット」の違いは何ですか？
フォーマットはインデント、改行、圧縮などテキストのレイアウトを変更します。一方「表示」は原文を変更せず、フィールドをクリックした際に右のドロワーに完全な値、型、JSON パスを表示するだけです。
入れ子の深いオブジェクトは編集領域では括弧だらけになることが多いですが、クリックしての表示で特定のフィールドの実際の内容を直接確認でき、インターフェースのレスポンスやログペイロードを読む際に特に便利です。
フォーマット後にキーの順番が変わるのはなぜですか？
JSON 仕様ではオブジェクトは順序付きではないキーと値のペアと見なされ、パーサーは自由に並べ替えることができます。実際のところ V8（Chrome / Node）は文字列キーについては挿入順を保持しますが、数値形式のキー（"1"、"42"）は常に数値順で先頭に来ます。
すべてのパーサーで一貫した順序が必要な場合は、「オブジェクトキーをソート」をオンにしてください。これによりアルファベット順に再帰的にソートされ、設定ファイルを比較する際に特に役立ちます。
JSON はどのくらい大きな数値を表現できますか？
JSON 自体に上限はありませんが、JavaScript はすべての数値を IEEE-754 倍精度浮動小数点数として解析します。±2^53（約 9000 兆）を超える整数は精度が失われます：9007199254740993 は 9007199254740992 に変わります。
ペイロードに 64 ビット ID やナノ秒レベルのタイムスタンプが含まれる場合は、文字列のままにしてください。本ツールはそれらを破損させませんが、JS コードに貼り付けると破損します。
「整形」ではなく「圧縮」を使うべきタイミングは？
人が読む用途では整形：コードレビュー、デバッグ、ドキュメント作成。機器が伝送する用途では圧縮：API リクエストボディ、URL パラメータ、環境変数、.env ファイル。
典型的な API ペイロードは圧縮で 15–30% のバイト数を削減でき、構造は全く変わらない——これが最も安価な圧縮方法です。
エスケープは何のために使うの？
エスケープは JSON を文字列リテラルとしてパッケージ化する処理です：引用符を \" に、改行を \n に変換することで、別の JSON 値、シェルコマンド、環境変数に安全に埋め込めるようになります。
アンエスケープはその逆の処理です。ログから {"a":1} のような形式をコピーしたことがあるなら、それがエスケープ後の形式です——貼り付けた後「アンエスケープ」をクリックすれば元に戻ります。
よくある質問
私の JSON はアップロードまたは保存されますか？
いいえ。すべての処理はブラウザ内で JavaScript を使用して行われ、JSON が外部に送信されることは一切ありません。オフラインでも使用可能で、ローカルストレージへの書き込みも行われません。ページをリロードすると入力内容はすべてクリアされます。
なぜ設定ファイルのフォーマットに失敗するの？
厳密なJSONではない可能性が高いです：JSONC/JSON5はコメントや末尾のカンマを許可し、YAMLはインデントで階層を表現し、.envはkey=value形式です。まずコメントと末尾のカンマを削除するか、対応する形式のパーサーを使用してください。
キー名のソートは配列に影響しますか？
影響しません。配列の順序自体に意味（1番目、2番目…）があるため常にそのまま保持され、オブジェクト（配列内にネストされたオブジェクトを含む）のキーのみが再帰的にアルファベット順でソートされます。
「エラー位置 L12 : C34」は何を意味しますか？
パーサーが処理を中止した位置を示しています：12行目34列目（1から始まる）です。実際のエラーは通常その位置または直前にあります——前の行のカンマが欠けている、引用符のエスケープがされていない、または閉じ括弧の前に不要な末尾のカンマがあるなどです。
サイズ制限はありますか？スマホで使用できますか？
明確な上限はありません——数MBのログ出力でもフォーマット可能です。ただし、数十MBの特別に大きな入力はローエンドデバイスではやや処理が重くなる場合があります。これはキー入力のたびに再パースと再フォーマットを行うためです。ページはレスポンシブデザインで、エディタは画面幅に合わせて自動的に調整されます。