オンラインJSONフォーマッタ＆バリデータ

以下の欄にJSONを貼り付けると、即座にフォーマット、整形、またはミニファイを行うことができます。このツールは、フォーマット処理と同時にJSONの検証を行い、問題がある場合は具体的なエラーを表示します。すべての処理はブラウザ上でローカルに行われるため、データがサーバーにアップロードされることはありません。

使い方

左側の入力ボックスにJSONを貼り付けてください（または「例を読み込む」をクリックして試してみてください）。
2スペースまたは4スペースのインデントを選択してください。
「フォーマット」をクリックして見栄えを良くするか、「ミニファイ」をクリックして1行に圧縮してください。
JSONが無効な場合は、入力欄の下にあるエラーメッセージを確認して、問題の原因を特定してください。
「コピー」をクリックすると、結果がクリップボードにコピーされます。

例

入力

{"name":"CodeKitHub","tools":["json","base64"],"free":true}

出力

{
  "name": "CodeKitHub",
  "tools": [
    "json",
    "base64"
  ],
  "free": true
}

同じデータを、2スペースのインデントでフォーマットしたものです。「ミニファイ」はこれとは逆の処理を行い、すべての空白を削除します。

このツールとは？

JSONフォーマッタは、生のJSONテキストや、ミニファイされたJSONテキスト、あるいは乱雑なJSONテキストを受け取り、一貫したインデントと改行を適用して書き換えることで、読みやすい形式に変換します。JSON（JavaScript Object Notation）は、API、設定ファイル、ログシステムなどで最も一般的に使用されるデータ形式ですが、サーバーは通常、帯域幅を節約するために、これを1行の長い、判読困難なテキストとして送信します。

このツールはJSONバリデータとしても機能します。ブラウザと同じ厳格なルールに基づいて入力を解析するため、JSONにコンマの抜け、引用符で囲まれていないキー、または末尾のコンマがある場合、エラーが黙って発生するのではなく、具体的なエラーメッセージが表示されます。

JSONは、RFC 8259 と ECMA-404 という整合の取れた2つの標準によって正式に定義されています。この仕様は意図的にJavaScript自体よりも厳格に定められており、JSコードとして問題なく動作するスニペットが、ここでの厳密なJSON検証では失敗することがあるのはそのためです。

実用的なヒント

APIのデバッグ中ですか？まずは生のレスポンスを貼り付け、フォーマットはその後で――このバリデータなら、構文エラーのある行と列を正確に特定してくれるので、1行の文字の塊を目を細めて見比べるよりもはるかに便利です。
画面上で読む場合は2スペースのインデントを使用し、JSONをURL、環境変数、またはチャットメッセージに貼り付ける前にミニファイしてください。これらの場面では、空白は単なるバイトの無駄になります。
JSON5形式のコメントと末尾のコンマは、手動で記述した設定が「一見問題ないように見える」にもかかわらず、検証に失敗する最も一般的な2つの原因です。厳格なJSONでは、どちらも許可されていません。
非常に大きなファイル（ログやデータベースのダンプなど）の場合は、必要な部分のみをフォーマットするようにしましょう。そうすれば、エディタの応答性が保たれ、構造も把握しやすくなります。

実際のワークフローにおける位置づけ

よく見られる流れとしては、APIがトークンやWebhookのペイロード内に、Base64エンコードされた、あるいはミニファイされたJSONを返すというものです。まずBase64をデコードし、次にJSONを整形し、環境間で変更があった場合は3番目に2つのレスポンスを比較します。各ステップには専用のツールが用意されており、どのステップにおいてもペイロードがブラウザの外に出ることはありません。

フロントエンド開発者は、フォーマット処理と同じくらい頻繁にミニファイ処理を行います。大規模な静的JSONファイルを配信する場合、gzip圧縮を行う前にミニファイ処理を行うだけで、通常20～30％の容量削減が可能です。

→ Base64 エンコーダー／デコーダー · テキストの差分

よくあるJSONエラーとその直し方

「JSONが無効です」という報告のほとんどは、決まった顔ぶれの原因に行き着きます。以下の表は、設定ファイルを手作業で編集したり、コピー&ペーストしたAPIの出力をデバッグしたりする際に特によく見かけるものをまとめたものです。

エラー	例	直し方
末尾のカンマ	{"a": 1, "b": 2,}	オブジェクトや配列の最後の要素の後ろのカンマを削除します。
シングルクォート	{'a': 1}	JSONではキーと文字列値の両方にダブルクォートが必要です。
クォートなしキー	{a: 1}	すべてのキーをダブルクォートで囲みます: {"a": 1}。
コメント	{ // メモ\n "a": 1 }	厳格なJSONにはコメント構文がありません。検証前に // や /* */ を削除してください。
カンマの抜け	{"a": 1 "b": 2}	各キーと値のペアの間にカンマを挿入します。
NaN / undefined / Infinity	{"a": NaN}	JavaScriptとしては有効ですがJSONとしては無効です。代わりにnullや文字列を使ってください。

一般的な利用例

デバッグ中に、1行の判読不能な文字列として返されたミニファイ化されたAPIレスポンスを読み取り、その構造を把握する。
アプリケーションによって何らかの理由で正しく読み込まれていない設定ファイル（package.json や JSON 形式の設定ファイルなど）の検証を行う。
バグ報告、コードレビュー、またはドキュメントにおいて、読みやすく整形されたJSONのスニペットを共有する。
JSONペイロードを、URLパラメータに埋め込んだり、サイズ制限のあるデータベースのカラムに格納したりする前に、最小の形式に圧縮すること。

なぜこれを使うのか？

本番APIが500エラーのレスポンスを改行なしの1行で返してきた——ここに貼り付ければ、どのネストされたフィールドがnullになっているか数秒で分かります。

同僚がコミットしたsettings.jsonにカンマの抜けがあり、ビルドが「Unexpected token」で止まった——エラー箇所を1文字ずつ目で追う代わりに、正確な行と列がすぐ表示されます。

Chrome拡張機能を開発中で、保存後に読み込まれなくなったmanifest.jsonを調べる必要がある——原因は大抵、末尾のカンマで、エラーメッセージがその場で指摘してくれます。

社内APIのログに顧客情報やアクセストークンが含まれていて、外部のオンラインツールには絶対に貼り付けられない——このツールはブラウザ内で完結するので、サーバーへのアップロードは一切発生しません。

コードレビュー前に、ミニファイされたJSONフィクスチャが手元にあり、誰も読める状態ではない——先にここで整形すれば、プルリクエストの差分が意味を持つようになります。

オンコール対応中でスマートフォンしか手元にない——ログイン不要でモバイル画面でも同じように動作します。

よくある質問

私のJSONデータはサーバーにアップロードされていますか？

いいえ。このツールはJavaScriptを使用して、すべてブラウザ上で動作します。JSONデータは端末の外に出ることは一切ないため、機密情報や社内データでも安心してご利用いただけます。

なぜ私のJSONは無効なのですか？

最もよくある原因としては、コンマの抜けや余分なコンマ、ダブルクォートがないキー、ダブルクォートの代わりにシングルクォートが使われている場合、最後の項目の後に余分なコンマがある場合、およびコメント（JSONではコメントは許可されていません）などが挙げられます。入力ボックスの下にあるエラーメッセージには、パーサーが検出した問題が表示されます。

「フォーマット」と「ミニファイ」の違いは何ですか？

「フォーマット」は、JSONを人間が読みやすいように、インデントや改行を追加します。「ミニファイ」は、不要な空白をすべて削除してJSONを可能な限り小さくします。これは、JSONを送信したり埋め込んだりする前に役立ちます。

サイズの制限はありますか？

このツール自体に厳格な制限は設けられていません。ただし、すべての処理がブラウザ上でローカルに行われるため、ファイルサイズが非常に大きい場合（数十メガバイト）、お使いの端末によっては処理に時間がかかることがあります。

これで、破損したJSONを自動的に修復できますか？

いいえ――このツールは、JSONのどの部分が不正であるかを正確に指摘してくれるので、修正することができますが、データを推測したり変更したりすることはありません。これは意図的な仕様です。データを黙って「修正」してしまうと、本来のバグが見えなくなってしまう可能性があるからです。

JSON5やJSONC（コメント、末尾のカンマ、クォートなしキー）には対応していますか？

対応していません。これは意図的な仕様です。このツールはAPIやJSON.parse()が実際に要求する厳格なRFC 8259準拠のJSONとして検証を行います。tsconfig.jsonやVS Codeの設定ファイルのようなJSONC形式を整形したい場合は、先にコメントを削除してください。そうしないとパーサーがエラーとして扱います。

ブラウザのコンソールでJSON.stringifyを実行するのと何が違いますか？

JSON.stringify(JSON.parse(x), null, 2) でも同じ整形結果は得られますが、コンソールを開く必要があり、入力が不正な場合は行と列を示さない不親切な汎用エラーしか出ません。このツールはその点を正確に指摘します。

GraphQLのレスポンスのような、深くネストされたJSONにも対応していますか？

はい。人為的なネスト階層の制限はなく、実質的な上限はブラウザのメモリとスクロールの手間だけです。1行表示では3〜4階層を超えるとほぼ読めなくなるため、深いネスト構造こそ整形の効果が最も大きい場面です。

インターネット接続がない状態でも使えますか？

はい。ページの読み込みが完了すれば、解析と整形のロジックはすべてJavaScriptでローカルに実行されます。ネットワークを切断した状態でもJSONの整形を続けられます。

会社の名刺情報や個人情報を含むJSONを扱っても情報漏えいの心配はありませんか？

データはブラウザの外に一切送信されず、サーバーログも生成されないため、外部への情報流出リスクはありません。個人情報を含むAPIレスポンスのデバッグにもそのままご利用いただけます。

使い方

例