JSON整形ツール

1. テキストエリアにJSONデータを貼り付けるか、.jsonファイルをドラッグ＆ドロップで読み込みます。
2. 「インデント」「キーのソート」「Unicodeの扱い」などのオプションを必要に応じて選択します。
3. 「整形」ボタンをクリックすると、読みやすい形式に整形されたJSONが出力欄に表示されます。圧縮したい場合は「圧縮」ボタンをクリックします。
4. JSONに構文エラーがある場合、入力欄の下に行番号・列番号付きで日本語のエラーメッセージが表示されます。
5. 「ツリー表示」ボタンをクリックすると、JSONの構造を折りたたみ可能なツリー形式で確認できます。
6. 「変換」セクションでJSON to CSV・YAML・XMLの変換結果を確認し、コピーまたはダウンロードできます。

このツールでできること

このツールは、入力したJSONを見やすく整えたり、逆に1行へ圧縮したりできます。加えて、入力したJSONが正しいかを自動でチェックし、エラーがあれば日本語で理由を表示します。さらに、ツリー表示、文字検索、CSV・YAML・XMLへの変換、コピー、ダウンロードにも対応しています。

画面の見方

画面は大きく分けると次の流れです。

• 上部にファイル読み込みエリア
• その下にオプション設定
• 次に操作ボタン
• 中央に入力JSONと出力JSON
• 下部にツリー表示
• さらに検索
• 最後に変換結果

この順番で使うと迷いません。

使い方の基本手順

1. JSONを入力する

まず、左側の入力 JSON欄にJSONを貼り付けます。直接貼り付けてもよいですし、上部のエリアに .json ファイルをドラッグ＆ドロップして読み込むこともできます。クリックしてファイル選択も可能です。入力欄の右上には、クリップボードから貼り付けるボタンもあります。

2. 自動チェックを確認する

JSONを入力すると、下の検証バーがリアルタイムで反応します。

• 正しいJSONなら有効なJSON
• 間違っていればJSONエラー

このツールでは、エラー時に英語の生エラーではなく、日本語で意味を出すようになっています。行番号と列番号も補足され、よくあるミスにはヒントも出ます。たとえば、末尾カンマやシングルクォート、キー名のダブルクォート漏れなどです。

3. 整形する

JSONが正しければ、整形ボタンを押すと右側の出力 JSONに見やすく整った結果が表示されます。ショートカットとして Ctrl+Enter でも整形できます。実装上もそのように設定されています。

4. 必要ならコピーまたは保存する

整形後の結果は、右側のヘッダーにあるボタンからコピーとダウンロードができます。ダウンロード時のファイル名は output.json です。

各オプションの意味

インデント

整形後の字下げ幅を選びます。

• スペース2
• スペース4
• タブ

一般的にはスペース2か4を使えば十分です。チームのコーディング規約に合わせて選びます。

キーのソート

オブジェクトのキーをアルファベット順に並べ替える設定です。しない と アルファベット順（再帰） があり、再帰を選ぶと入れ子の内部までソートされます。差分比較やレビュー時に便利です。

Unicode

文字の出力方法を選びます。

• そのまま保持
• \uXXXX 形式にエスケープ

日本語をそのまま見たいなら前者、文字コード表現に統一したいなら後者を使います。

自動整形

ONにすると、入力後 0.6秒 で自動的に整形処理が走ります。こまめに確認したいときは便利ですが、長いJSONを少しずつ編集する場合はOFFのほうが落ち着いて使えます。

ボタンごとの使い方

整形

JSONを読みやすい形に整えます。最も基本のボタンです。

圧縮

改行や空白を除いて1行にまとめます。API送信前やデータ量を小さく見たいときに使います。

キーソート

キー名を並び替えたJSONを出力します。設定欄の「キーのソート」と近い役割ですが、こちらはボタン操作で明示的に整列したいときに使えます。

ツリー表示

JSONを階層構造で見られるように切り替えます。ネストが深いJSONでは、通常のテキスト表示よりかなり見やすくなります。配列件数やキー数も表示され、ノードの折りたたみも可能です。パスバッジをクリックすると、その場所のパスをコピーできます。

サンプル

試しに動作を確認したいときのボタンです。日本語キーや配列、オブジェクト、真偽値、nullを含む見本JSONが入力されます。すぐに整形結果も出るので、初回確認に向いています。

クリア

入力欄、出力欄、ツリー表示、変換結果をまとめて空にします。最初からやり直したいときに使います。

バリデーションの見方

このツールは、JSONを入力するとその場で検証します。実装では JSON.parse を使って判定し、失敗時はメッセージを日本語化しています。

よくあるエラー例

末尾カンマ

最後のカンマはJSONでは使えません。

シングルクォート

JSONでは文字列もキーもダブルクォートが必要です。

キーのクォート漏れ

JavaScriptオブジェクト風ですが、JSONとしては無効です。

括弧やクォートの閉じ忘れ

閉じ括弧 } が必要です。

このツールは、こうしたミスに対してヒントを出す作りになっています。

統計情報の見方

入力欄の下には次の情報が出ます。

• バイト数
• 行数
• 最大深度

バイト数はファイルサイズ感の確認、行数は整形後の見やすさの確認、最大深度は入れ子の複雑さの確認に使えます。深いJSONほどツリー表示が有効です。

検索の使い方

下部の検索欄では、出力JSONのテキスト内検索ができます。検索語を入れると件数が表示され、前 と 次 で順番に移動できます。Enterでも移動でき、Shift+Enterで逆方向へ進みます。実装上、テキストエリア内の完全な装飾ハイライトではなく、該当位置を選択してスクロールする方式です。

使いどころ

• 特定キーを探したい
• エラーフィールドを探したい
• 長いレスポンスの中から値を探したい

ツリー表示の使い方

JSONが深く入れ子になっているときは、整形テキストよりツリー表示が便利です。ツリー表示をONにすると、配列やオブジェクトごとに折りたためます。各ノードの横にあるパス表示をクリックすると、その場所のパスをコピーできます。APIレスポンスの確認や、どの階層に目的の値があるか調べたいときに便利です。

変換機能の使い方

このツールには整形だけでなく変換機能もあります。

• JSON → CSV
• JSON → YAML
• JSON → XML

タブを切り替えると、下の出力欄に変換結果が表示されます。変換結果もコピーとダウンロードが可能です。

JSON → CSV

配列やオブジェクトを表形式っぽく扱いたいときに使います。CSVは表計算ソフトに持っていきやすい形式です。

JSON → YAML

設定ファイル風に読みやすくしたいときに便利です。

JSON → XML

XML系のシステムへ受け渡す前の確認用として使えます。

おすすめの使い方

1. APIレスポンスを見やすくしたい

レスポンスを貼り付けて整形します。長い場合はツリー表示に切り替え、必要なら検索でキーを探します。

2. JSONが壊れているか確認したい

貼り付けるだけでリアルタイム検証されるので、まず左欄に入れます。エラーが出たら、表示された行・列とヒントを見て修正します。

3. 比較やレビューをしやすくしたい

キーソートを使うと並びが安定するため、差分確認がしやすくなります。

4. 表計算や別形式に流したい

整形後にCSVやYAMLへ変換すると次工程に使いやすくなります。

初めて使う人向けの最短手順

1. JSONを貼り付ける
2. エラー表示がないか確認する
3. 整形を押す
4. 必要に応じてツリー表示にする
5. コピーまたはダウンロードする

注意点

この実装では、整形や変換の前提として有効なJSONである必要があります。見た目がJavaScriptオブジェクトに近くても、JSONとしては無効な場合があります。特に次のような書き方はJSONでは通りません。

• シングルクォート
• コメント
• 末尾カンマ
• キー名のクォート省略

このツールは無料でご利用いただけます。