ブラウザ内でJSONデータを即座にフォーマット、バリデート、探索します
JSON(JavaScriptオブジェクトノーテーション)は、現代のソフトウェアの共通言語です。APIレスポンスをデバッグする開発者、設定ファイルを検査するデータアナリスト、構造化データを理解しようとする非技術的ユーザーにとって、生のJSONを読むことはフラストレーションの原因となることがあります。1つの欠落したカンマや誤った括弧がアプリケーション全体を壊す可能性があり、フォーマットされていないJSONは視覚的にスキャンすることがほぼ不可能です。
JSONの理解
JSONとは?
JSON(JavaScriptオブジェクトノーテーション)は、RFC 8259で定義された軽量のテキストベースのデータ交換フォーマットです。構造化データを名前/値ペア(オブジェクト)と順序付きリスト(配列)のコレクションとして表現します。JSONは6つのデータ型をサポートしています:文字列(ダブルクオートで囲まれたもの)、数値(整数または浮動小数点)、ブール値(trueまたはfalse)、null、オブジェクト(キーと値のペアを含む波括弧)、および配列(値を含む角括弧)。JSONは言語に依存せず、人間が読みやすいため、REST API、設定ファイル、NoSQLデータベース、ほぼすべてのプログラミング言語やプラットフォーム間のサービス間通信の主要なフォーマットとなっています。
フォーマットはどのように機能しますか?
JSONフォーマットは、ブラウザの組み込みJSON.parse()関数を使用して入力文字列をネイティブJavaScript値にデシリアライズし、選択したインデントレベルを使用してJSON.stringify()で再シリアライズします。JSON.parse()がSyntaxErrorをスローした場合、フォーマッターはそれをキャッチし、エラーメッセージから文字位置を抽出し、その位置を元の入力の行番号と列番号にマッピングし、人間が読みやすいエラーを表示します。ミニファイは同様に機能しますが、JSON.stringify()にインデント引数を渡さず、可能な限りコンパクトな表現を生成します。自動修正は、トレーリングカンマ、シングルクオート、引用符なしのキーなどの一般的な問題を修正するために、パース前に一連のテキスト変換を適用します。
JSONフォーマットが重要な理由は?
フォーマットされていないまたはミニファイされたJSONは、人間にとってほぼ読めません。数千文字にわたる単一行のペイロードは、欠落したフィールド、誤った値、または構造エラーを見つけることをほぼ不可能にします。適切なインデントは、データの階層を即座に明らかにします — どのキーがどのオブジェクトに属しているか、配列がどれほど深くネストされているか、構造がどこで始まりどこで終わるかを一目で見ることができます。APIレスポンスのデバッグ、設定ファイルのレビュー、同僚へのデータ構造の伝達において、適切にフォーマットされたJSONは認知負荷を大幅に軽減します。バリデーションも同様に重要です:JSON設定ファイルの単一の構文エラーがアプリケーションの起動時にクラッシュを引き起こす可能性があり、そのエラーをデプロイ前にキャッチすることで時間を節約し、インシデントを防ぎます。
制限事項と注意事項
フォーマッターは、RFC 8259標準で定義された有効なJSONで動作します。JSONはコメント、トレーリングカンマ、またはシングルクオートの文字列をサポートしていません — これはJavaScriptオブジェクトリテラルやJSONCやJSON5のような設定フォーマットで一般的な機能です。自動修正機能はこれらのケースの多くを処理しますが、これはヒューリスティックプロセスであり、特に深く誤った入力ではすべてのエッジケースを正しく処理できない場合があります。非常に大きなJSONファイル(数メガバイト)は、一時的なUIの遅延を引き起こす可能性があります。処理はすべてクライアントサイドで行われ、データはどこにも送信されません。
このフォーマッターの使い方
JSONを貼り付けるかアップロードしてください
APIレスポンス、設定ファイル、または任意のソースからJSON文字列をコピーし、入力テキストエリアに貼り付けます。あるいは、「ファイルをアップロード」をクリックして、コンピュータから直接.jsonファイルをインポートします。フォーマッターは、入力中に自動的に処理を開始します。
フォーマットオプションを選択してください
お好みのインデントを選択してください(コンパクトな出力には2スペース、読みやすさを重視するには4スペース、伝統的なフォーマットにはタブを使用)。すべてのオブジェクトキーをアルファベット順に並べたい場合は「キーをソート」を有効にしてください — これは2つのJSONオブジェクトを比較したり、決定論的な出力を生成する際に便利です。
結果を確認する
緑のバッジがJSONが有効であることを確認します。構文エラーがある場合は、赤いバッジが正確な行と列の番号、および平易な英語のエラーメッセージを表示します。フォーマットする前に、トレーリングカンマ、シングルクォート、引用されていないキーなどの一般的な問題を自動的に修正するには「自動修正」ボタンを使用してください。
コピー、ダウンロード、または探索
フォーマットされたビュー(構文ハイライトされたコード)、ツリービュー(インタラクティブな折りたたみ可能な階層)、およびCSVタブ(オブジェクトの配列用)を切り替えます。出力をクリップボードにコピーするか、.jsonまたは.csvファイルとしてダウンロードします。サイズ比較バーを確認して、ミニファイがペイロードをどれだけ削減するかを確認してください。
よくある質問
私のJSONデータをここに貼り付けても安全ですか?
はい、完全に安全です。JSONフォーマッターは、クライアントサイドのJavaScriptを使用してブラウザ内で完全に実行されます。あなたのデータはサーバーに送信されることはなく、保存されることも、ログに記録されることもありません。すべてはあなたのデバイス上でローカルに行われます — ページを読み込んだ後にインターネットから切断しても、フォーマッターは動作し続けます。これにより、APIトークン、データベースペイロード、内部設定ファイル、またはネットワークを介して送信したくない機密データを使用する際に安全です。
自動修正ボタンは何をしますか?
自動修正は、パースする前に不正なJSONに対して一連のヒューリスティック修正を適用します。最も一般的な実世界の問題を処理します:トレーリングカンマの削除(JavaScriptオブジェクトリテラルから残ったもの)、シングルクォートをダブルクォートに変換すること、引用されていないオブジェクトキーの周りに欠落しているクォートを追加すること、PythonスタイルのNone/True/FalseをJSONのnull/true/falseに置き換えること、JavaScriptスタイルのコメント(//および/* */)を削除すること、ワードプロセッサから貼り付けたカールまたは「スマート」クォート文字を正規化すること、JSONP関数ラッパーを削除すること、改行区切りのJSON(NDJSON)を有効なJSON配列に変換することです。自動修正は最善の努力をするツールです — 一般的なケースにはうまく機能しますが、深刻に破損したデータを修正することはできません。
フォーマットとミニファイの違いは何ですか?
フォーマット(ビューティファイまたはプリティプリントとも呼ばれる)は、JSONを読みやすくするためにインデントと改行を追加します。これは開発、デバッグ、およびドキュメントに最適です。ミニファイはその逆を行います:すべての不要な空白 — スペース、タブ、改行 — を削除し、同じデータの最もコンパクトな表現を生成します。ミニファイされたJSONはネットワーク上での送信が速く、帯域幅を少なく使用するため、プロダクションのAPIレスポンスにおいて好まれるフォーマットです。2つの表現は正確に同じデータを含んでいます; フォーマットだけが異なります。私たちのサイズ比較バーは、ミニファイされた出力がどれだけ小さいかを数値的に示します。
ツリービューはどのように機能しますか?
ツリービューは、あなたのJSONをインタラクティブな折りたたみ可能な階層としてレンダリングします。各オブジェクトと配列は、子要素を展開または折りたたむトグル矢印と共に表示されます。任意のノードをクリックすると、それが開いたり閉じたりします。デフォルトでは、最初の2レベルが展開されているため、深くネストされたデータに圧倒されることなく、トップレベルの構造をすぐに見ることができます。「すべて展開」と「すべて折りたたむ」ボタンは、ツリー全体を一度に切り替えます。任意のノードにマウスを合わせると、そのノードの値をフォーマットされたJSONとしてコピーできる小さなコピーアイコンが表示されます — 大きなレスポンスから特定のネストされたオブジェクトが必要なときに最適です。
CSVタブはいつ表示されますか?
CSVタブは、あなたのJSONが有効なオブジェクトの配列である場合に自動的に表示されます — これはリソース(ユーザー、製品、注文など)をリストするほぼすべてのREST APIによって返されるパターンです。コンバータは、すべてのオブジェクトにわたってすべてのユニークなキーを列ヘッダーとして抽出し、各オブジェクトの値を対応する列にマッピングします。配列アイテム内のネストされたオブジェクトは、サブカラムにフラット化されるのではなく、JSON文字列としてシリアライズされます。結果として得られるCSVはダウンロードでき、Excel、Google Sheets、または任意のスプレッドシートアプリケーションで直接開くことができます。あなたのJSONが単一のオブジェクトであるか、非オブジェクトの配列要素を含む場合、CSVタブは非表示になります。
どのインデントを選ぶべきですか?
選択はあなたの使用ケースとチームの慣習によります。2スペースはJavaScript、TypeScript、およびJSON設定ファイルで最も人気のある選択肢です — これはファイルをコンパクトに保ちながらも読みやすさを維持します。4スペースはPythonプロジェクトや一部のJava環境で一般的です。タブは、各開発者がエディタを任意の視覚的幅で表示するように設定できるため、一部のチームに好まれています。迷った場合は、プロジェクトの.editorconfigやリンティング設定を確認してください。視覚的な整列がファイルサイズよりも重要なドキュメントやメッセージでJSONを共有する場合、4スペースが最も明確です。プロダクションのAPIレスポンスでは、常にインデントよりもミニファイを使用してください。