RevealTheme logo

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

JSONを整形、美化、検証、minify(圧縮)します。すべてお使いのブラウザ内で実行されるため、データがデバイスから外に出ることはありません。

このツールの使い方

  1. 1

    JSONを入力欄に貼り付けます。

  2. 2

    「整形」をクリックしてインデント付きの読みやすい表示にするか、「minify」をクリックして空白を取り除きます。

  3. 3

    エラーは、解析が失敗した正確な行と列を示します。

  4. 4

    結果をクリップボードにコピーします。

JSONとは何か、そしてなぜ整形が重要なのか?

JSON(JavaScript Object Notation)は、最新のWeb API、設定ファイル、構造化されたイベントロギングにおける共通言語です。あらゆるREST APIやGraphQLはJSONを返し、すべてのpackage.json、tsconfig.json、そしてほとんどのCI設定はJSONであり、AWS、GCP、AzureもそれぞれのCLIでJSONを扱います。JSONの強みは、その最小限の文法にあります。6つの構造文字({}、[]、カンマ、コロン、引用符)、4つのプリミティブ型(文字列、数値、真偽値、null)、そして再帰的なネストです。その最小主義は、同時に弱点でもあります。JSONはコメント、末尾のカンマ、引用符のないキー、複数行の文字列をサポートしません。引用符やカンマが1つでも誤った位置にあると、ドキュメント全体が壊れてしまいます。このツールは、入力をRFC 8259(JSONの仕様)に従って検証し、その後、読みやすいように一貫したインデントを付けて表示するか、ネットワーク送信のためにすべての空白を取り除きます。解析と整形は、JavaScriptエンジンのネイティブなJSON.parseおよびJSON.stringify関数を使ってお使いのブラウザ内で完全に実行されます。これはNode.jsサーバーやすべてのブラウザで動作するのと同じコードです。つまり、あなたのデータがネットワークを通って送られることはなく、ここでの検証の挙動が、本番環境であなたのコードが目にするものと完全に一致するということです。

よくある活用例

  • API応答をフォーマッターに貼り付けてデバッグする。minifyされたJSONが隠している構造を一目で可視化できます。

  • 厳格なコンシューマー(AWS CloudFormation、Kubernetesのマニフェストなど)に送信する前にJSONを検証する。

  • JSONを1行で出力する構造化ロギングライブラリ(Pino、Bunyan)のログを美化する。

  • HTMLや環境変数に埋め込む前に設定ファイルをminifyする(解析するバイト数が減ります)。

  • JSON Web Tokenのペイロードをbase64からデコードした後に整形する。

  • 2つのAPI応答を、両方を整形してその差分を観察することで比較する。

よくある質問

私のJSONはブラウザから外に出ますか?
いいえ。すべての解析と整形は、組み込みのJSON.parseおよびJSON.stringify関数を使ってお使いのブラウザ内で行われます。データがサーバーに届いたり、ログに現れたりすることはありません。トークン、顧客データ、その他の機密情報を含むAPI応答にも安全にお使いいただけます。
JSON5やJSONC(コメント付き)を整形できますか?
いいえ。このツールは厳格なJSON仕様(RFC 8259)に従います。コメントや末尾のカンマは構文エラーとなり、パーサーのエラーメッセージが表示されます。柔軟なJSONの派生形には、json5.orgのようなJSON5パーサーを使うか、まずコメントを取り除く前処理を入力に施してください。
インデントの大きさはどれくらいにすべきですか?
2スペースはJavaScriptとWebの慣例であり、最も広く使われています。4スペースはPythonエコシステムのデフォルト(PEP 8のインデントに一致)です。タブはエディタ間で表示が一貫せず、差分ツールを壊すため、チームに厳格なタブの取り決めがない限り避けてください。この選択は純粋に見た目の問題で、パーサーは気にしません。
なぜminifyされたJSONが重要なのですか?
minifyされたJSONはバイト数を節約します。これは大規模になると意味を持ちます(たとえば、100KBのデータを数百万件のリクエストに返す公開API)。小さな設定ファイル(数KB程度)では、その差はごくわずかです。ブラウザの解析時間は、整形済みのJSONとminifyされたJSONで同一なので、minifyする唯一の理由は帯域幅です。
エラーメッセージをどう読み解けばよいですか?
JavaScriptのJSON.parseのエラーメッセージには、解析が失敗した位置(先頭からのオフセット)が含まれています。よくあるエラー:『Unexpected token』はたいてい引用符やカンマの欠落、またはエスケープされていない特殊文字を示します。『Unexpected end of JSON input』はドキュメントが途中で切れていることを意味します。『Unexpected non-whitespace character』はしばしば末尾のカンマを示します。
非常に大きなJSONファイルを整形できますか?
ブラウザのJSON.parseは、性能が問題になり始めるおおよそ100MBまでのファイルを処理できます。それより大きなファイルには、コマンドラインのjqをお使いください。任意の大きさのJSONファイルをストリーミングで処理できます。
JSONとJavaScriptのオブジェクトリテラルの違いは何ですか?
JSONはJavaScriptのオブジェクトリテラル構文の厳格なサブセットです。違いは次のとおりです。JSONのキーは二重引用符で囲まれた文字列でなければなりません(JSはキーを引用符なしや単一引用符にできます)。JSONはコメント、末尾のカンマ、undefinedを禁止します。JSONには式、関数呼び出し、計算された値がありません。JavaScriptはJSONを安全に評価できますが、JSONは任意のJavaScriptを評価できません。

関連ツール