CalcTune
🎮
おもしろ · 開発

JSONフォーマッター&バリデーター

JSONを即座に整形・検証・圧縮します。JSONを貼り付けてインデントスタイルを選択すると、バリデーション結果付きの整形出力が表示されます。キー数、ネスト深さ、バイト数などの統計も確認できます。

整形結果

上にJSONを貼り付けて整形・検証

JSONの整形と検証:開発者のためのJSON活用ガイド

JSON(JavaScript Object Notation)は現代のWebにおける主要なデータ交換フォーマットです。元々JavaScriptのオブジェクトリテラル構文から派生したJSONは言語に依存しない形式となり、事実上すべてのプログラミング言語とプラットフォームでネイティブにサポートされています。API、設定ファイル、データベースドキュメント、メッセージキューはすべてJSONを主要なシリアライゼーション形式として利用しています。そのシンプルさにもかかわらず、不正なJSONはWebアプリケーションにおける最も一般的なバグの原因の一つです。位置を間違えたカンマ、欠落したブラケット、エスケープされていない文字列がデータパイプライン全体を静かに壊す可能性があります。

JSONの構文ルール

JSONは6つのデータ型をサポートしています:文字列(ダブルクォート)、数値、ブール値(true/false)、null、配列(角括弧内の順序付きリスト)、オブジェクト(波括弧内の非順序キーバリューペア)。オブジェクトのキーはダブルクォートの文字列でなければなりません。シングルクォート、末尾カンマ、コメントは許可されていません。これらはJavaScriptでは3つとも許可されているため、JavaScriptに慣れた開発者にとって一般的な構文エラーの原因です。

文字列はダブルクォートを使用し、Unicodeエスケープシーケンス(\u0041は「A」)を含むことができます。文字列内の特殊文字はエスケープする必要があります:バックスラッシュ(\\)、ダブルクォート(\")、スラッシュ(\/)、バックスペース(\b)、フォームフィード(\f)、改行(\n)、キャリッジリターン(\r)、タブ(\t)。数値はJavaScriptと同じルールに従います:整数または浮動小数点で、オプションの負符号とオプションの指数表記(1.5e10)があります。8進数と16進数のリテラルは有効なJSONではありません。

トークン間の空白(スペース、タブ、改行)はJSONでは意味を持ちません。空白なしの圧縮ファイルと一貫したインデントの美しく整形されたファイルは同一のデータを含みます。これが整形ツールが意味を変更せずにJSONを安全に変換できる理由です。構造的トークン間の空白のみを変更します。

なぜJSONを整形するのか

APIレスポンス、ログエントリ、設定ファイルには、1行に圧縮されると読みにくい深くネストされたJSON構造が含まれることがよくあります。整形(プリティプリントとも呼ばれる)は改行とインデントを追加して、階層構造を一目で把握できるようにします。整形されたJSONドキュメントはスキーマを明らかにします。どのキーが存在し、オブジェクトがどの程度深くネストされ、配列がどこで始まりどこで終わるかを即座に確認できます。

一貫した整形はバージョン管理にとっても重要です。チームが整形されたJSONファイルをGitにコミットすると、各キーバリューペアが独自の行を占めます。つまり、単一のフィールドの追加、削除、変更がクリーンで最小限のdiffを生成します。ファイル全体ではなく1行の変更です。バージョン管理されたファイル内の圧縮JSONは、実際に何が変わったかを不明瞭にする読めないdiffを生成します。

圧縮:サイズが重要な場合

整形がJSONを読みやすくする一方、圧縮(ミニファイ)はコンパクトにします。圧縮されたJSONは不要な空白がすべて除去され、可能な限り最小の表現になります。これはネットワーク転送で重要で、特に毎秒数百万のリクエストを処理する高スループットAPIでは1バイトが重要です。

典型的なJSON APIレスポンスは2スペース整形と比較して圧縮すると30-50%小さくなる場合があります。10KBのレスポンスの場合、リクエストあたり3-5KBの節約になります。大規模に—毎秒数千のリクエスト—この帯域幅の節約は重要です。ほとんどのWebフレームワークとAPIゲートウェイはJSONレスポンスを自動的に圧縮しますが、可読性とサイズのトレードオフを理解することは開発者が自身のツールと設定で情報に基づいた選択をするのに役立ちます。

一般的なJSONエラーとその修正方法

末尾カンマはJSONの最も頻繁な構文エラーです。JavaScriptは{"a": 1, "b": 2,}のように最後の要素の後にカンマを許可しますが、JSONは許可しません。閉じ波括弧や角括弧の前の末尾カンマを削除してください。

シングルクォートの文字列はJavaScriptでは有効ですがJSONでは無効です。すべての文字列とキーはダブルクォートを使用する必要があります。ドキュメント全体で'value'を"value"に置換してください。キーのクォートの欠落—{"name": "value"}の代わりに{name: "value"}—もよくある間違いです。

文字列内のエスケープされていない特殊文字は解析失敗の原因です。文字列値内の改行、タブ、バックスラッシュはそれぞれ\n、\t、\\としてエスケープする必要があります。このフォーマッターはJSONパーサーからの正確なエラーメッセージを表示し、通常は解析が失敗した文字位置を含んでいます。大きなドキュメントで問題を特定するのに便利です。

設定ファイルにおけるJSON

多くのツールが設定にJSONを使用しています:Node.jsのpackage.json、TypeScriptのtsconfig.json、ESLintの.eslintrc.json、VS Codeのsettings.jsonなどです。これらのファイルは手動で編集されマシンが読み取るため、人間の可読性と厳密な構文準拠の間に緊張が生じます。

JSON5やJSONC(JSON with Comments)などの設定フォーマットはJSONを拡張してコメント、末尾カンマ、シングルクォート文字列を許可しています。TypeScriptのtsconfig.jsonは実際にはJSONCを使用しており、そのためpackage.jsonではなくtsconfig.jsonにコメントを追加できます。厳密なJSONファイルを扱う場合、このフォーマッターはコミットする前に手動編集した設定が構文的に有効かどうかを確認するのに役立ちます。

大きなJSONドキュメントの処理

このフォーマッターはJavaScriptのネイティブJSON.parseとJSON.stringify関数を使用してブラウザ内でJSONを処理します。一般的なドキュメント(数メガバイトまで)では高速かつ効率的です。非常に大きなドキュメント—データベースダンプ、分析エクスポート、数千のレコードを含むAPIレスポンス—の場合、メモリの制約によりブラウザベースのツールは遅くなる場合があります。

大規模なJSON処理にはjqのようなコマンドラインツールが、ファイル全体をメモリにロードせずに数ギガバイトのファイルを処理できるストリーミングパーサーを提供します。Pythonのjson.toolモジュール(python -m json.tool)やNode.jsスクリプトも大きなファイルを効率的に処理できます。日常の開発タスク—APIレスポンスの検証、設定ファイルの整形、Webhookペイロードのデバッグ—には、このブラウザベースのツールが最速のフィードバックループを提供します。

よくある質問

なぜ私のJSONが無効なのですか?

無効なJSONの最も一般的な原因は:配列やオブジェクトの最後の要素の後の末尾カンマ、ダブルクォートの代わりにシングルクォートの文字列、クォートされていないキー、文字列内のエスケープされていない特殊文字(改行、タブ、バックスラッシュ)、コメント(JSONはコメントをサポートしていません)です。このツールが表示するエラーメッセージには解析が失敗した文字位置が含まれており、正確な問題箇所の特定に役立ちます。

2スペースインデントと4スペースインデントの違いは何ですか?

どちらも有効で同一のJSONデータを生成し、変わるのは空白のみです。2スペースインデントはよりコンパクトで、ほとんどのJavaScriptおよびWebプロジェクト(npm、Prettier、ESLint)のデフォルトです。4スペースインデントはより視覚的な分離を提供し、PythonやJavaプロジェクトで一般的です。選択はチームやプロジェクトの慣習であり、機能的な違いはありません。

JSONの圧縮でデータは変わりますか?

いいえ。圧縮はJSONトークン間の空白(スペース、タブ、改行)のみを除去します。データ値、キー、構造、順序はすべて正確に保持されます。同一の内容を持つ圧縮JSON文字列と整形JSON文字列は、任意のJSONパーサーで解析したときに同じ結果を生成します。

JSONにコメントを入れることはできますか?

標準JSON(RFC 8259)はコメントをサポートしていません。これはフォーマットをシンプルで曖昧さのないものに保つための意図的な設計決定です。一部のツールはJSONC(JSON with Comments)やJSON5をサポートしており、コメント、末尾カンマなどの機能でJSONを拡張しています。TypeScriptのtsconfig.jsonはJSONCを使用しています。設定ファイルにコメントが必要な場合は、使用するツールがこれらの拡張フォーマットをサポートしているか確認してください。

このツールはどのくらい大きなJSONファイルを処理できますか?

このツールは高度に最適化されたネイティブJSON.parseとJSON.stringifyを使用してブラウザ内でJSONを処理します。数メガバイトまでのドキュメントは快適に処理できます。非常に大きなファイル(数十メガバイト以上)ではブラウザのメモリ制限により遅くなる場合があります。大規模な処理にはjqやPythonのjson.toolなどのコマンドラインツールの方が適しています。