JSONフォーマッター

はじめに

JSONフォーマッターは、JSONデータを扱うすべての人（開発者、APIテスター、データアナリスト、テクニカルライター）にとって不可欠なツールです。APIや設定ファイルからの生のJSONは、しばしば圧縮されていたりインデントが乱れていたりして、読み取りやデバッグが困難です。JSONフォーマッターは、乱雑なJSON入力を、適切なインデント、改行、構文検証を備えた、きれいで構造化された出力に瞬時に変換します。

インストールが必要なコマンドラインツールやブラウザ拡張機能とは異なり、Toollect JSONフォーマッターはブラウザ内で完全に動作します。貼り付けやファイルドロップのたびに即座に解析され、JSONの有効性と構造に関するフィードバックが即座に得られます。外部サーバーにデータが送信されることはないため、クラウドベースの検証サービスにはない速度とプライバシーの両方を提供します。

REST APIレスポンスのデバッグ、デプロイ用の設定ファイルの準備、JSON構文の教育、プロダクションペイロード用のJSONミニファイなど、このツールは必要な精度と即時性を提供します。

使用例

JSONの整形と検証は、多くの実世界のワークフローで登場します。これらのシナリオを理解することで、このツールがいつ自分のニーズに合うかを判断できます。

APIレスポンスのデバッグ

REST APIでの開発時、生のレスポンスはしばしば1行に圧縮された状態で届きます。レスポンスをフォーマッターに貼り付けると、ネストされた構造が即座に明らかになり、データが期待するスキーマと一致しているかの確認や特定の値の検索が容易になります。

設定ファイルの準備

多くのツールやプラットフォームはJSONを設定に使用しています — VS Code設定、TypeScript tsconfig、npm package.json、Docker Compose拡張機能。これらのファイルを整形することで、一貫したインデントを確保し、実行時エラーの原因になる前に構文エラーを検出し、プルリクエストでの設定レビューが容易になります。

JSONの学習と教育

生の入力と整形された出力を並べて比較することは、強力な教育ツールです。学生はサンプルJSONを貼り付け、適切なインデントで階層を確認し、ネスト、配列、オブジェクトの関係を即座に理解できます。

コードレビューとデータ検査

コードレビュー中、整形されたJSONは構造上の違いを可視化します。APIレスポンスサンプル、モックデータ、フィクスチャファイルをフォーマッターに貼り付けて、コミット前にその構造を検証できます。

仕組み

JSONフォーマッターは、JavaScriptのネイティブメソッドである JSON.parse() と JSON.stringify() によって動作します。これらは、すべてのモダンブラウザとNode.jsでJSONを処理するのと同じエンジンです。

パース

JSONを貼り付けるかファイルをドロップすると、ツールは入力内容を JSON.parse() に渡します。このメソッドは文字列を読み取り、メモリ内にJavaScriptオブジェクトまたは配列を構築します。パーサーはECMA-404 JSON仕様に正確に従い、有効なJSON構文から逸脱するものはすべて拒否します。

検証

JSON.parse() が成功すれば、入力は有効なJSONで、ツールはそれを直接整形します — 整形された出力がフィードバックとなるため、ステータスメッセージは表示されません。失敗した場合、メソッドは説明メッセージ付きの SyntaxError をスローします。ツールはエラーの種類、メッセージ、文字位置を抽出し、入力のスニペットと問題箇所を示す ^ マーカーを、入力テキストエリアの下にある赤いコールアウトで表示します。この段階でよく検出されるエラーには、予期しないトークン、欠落したプロパティ名、切り詰められた入力などがあります。

整形

有効なJSONの場合、ツールはパースされたオブジェクトを space パラメータを選択したインデント（2または4スペース）に設定して JSON.stringify() に渡します。これにより、各 {、}、[、] およびカンマの後に改行を挿入してオブジェクトがJSON文字列として再シリアル化されます。データ型は保持されます — 数値は数値のまま、文字列は文字列のまま、ブール値はブール値のままです。

ミニファイ

「出力を最小化」チェックボックスがオンになっている場合、同じ JSON.stringify() が space=0 で呼び出され、不必要な空白のないコンパクトな文字列を生成します。最初に同じ検証が実行されるため、ミニファイされた出力は常に有効です。

出力

整形またはミニファイされた結果が出力テキストエリアに表示されます。誤編集を防ぐため読み取り専用です。そこからクリップボードにコピーするか、.jsonファイルとしてダウンロードできます。出力エリアは独立してスクロールするため、長い入力を整形結果と並べて比較できます。

よくあるJSONエラー

JSONの厳格な構文は多くの開発者を驚かせます。以下は最も一般的なエラーとその修正方法です。

末尾のカンマ

JSONではオブジェクトの最後のプロパティや配列の最後の要素の後にカンマを置くことはできません。これは群を抜いて最も一般的なJSON構文エラーです。

// ❌ 無効 — "email"の後の末尾カンマ
{ "name": "Alice", "email": "[email protected]", }

// ✅ 有効 — 末尾カンマを削除
{ "name": "Alice", "email": "[email protected]" }

引用符なしのキー

すべてのオブジェクトキーは二重引用符で囲む必要があります。引用符なしのキーは有効なJavaScriptですが、無効なJSONです。

// ❌ 無効 — 引用符なしのキー "name"
{ name: "Alice" }

// ✅ 有効 — 二重引用符で囲まれたキー
{ "name": "Alice" }

一重引用符

JSONではキーと文字列値の両方に二重引用符が必要です。一重引用符はJSONでは無効です。

// ❌ 無効 — 一重引用符
{ 'name': 'Alice' }

// ✅ 有効 — 二重引用符
{ "name": "Alice" }

カンマ欠落

プロパティと要素はカンマで区切る必要があります。カンマが欠落すると、2つの値が1つとしてパースされたり、予期しないトークンエラーが発生します。

// ❌ 無効 — プロパティ間のカンマ欠落
{ "name": "Alice" "email": "[email protected]" }

// ✅ 有効 — プロパティ間のカンマ
{ "name": "Alice", "email": "[email protected]" }

切り詰められたJSON

ログやAPIレスポンスからJSONをコピーする際、テキストが途中で切れることがあります。閉じられていないオブジェクトや配列は「Unexpected end of JSON input」エラーを生成します。

// ❌ 無効 — 閉じ括弧欠落
{ "name": "Alice", "email": "[email protected]"

// ✅ 有効 — 正しく閉じられている
{ "name": "Alice", "email": "[email protected]" }

余分な後続データ

一部の形式では、区切り文字なしで複数のJSONオブジェクトが連結されて出力されます（JSON Lines、NDJSON）。標準のJSONパーサーは最初の完全な値で停止し、残りを余分なデータとして扱います。

// ❌ 無効 — 区切りなしの2つのオブジェクト
{ "id": 1 }{ "id": 2 }

// ✅ 一度に1つ
{ "id": 1 }

使用方法

Toollect JSONフォーマッターの使用には設定や登録は不要です。以下の手順に従ってください：

1. ツールを開く — JSONフォーマッターページに移動します。インターフェースには、ファイルアップロードゾーン、入力テキストエリア、設定パネル、出力テキストエリア、アクションボタンが表示されます。

2. JSONを入力する — JSONテキストを入力テキストエリアに直接貼り付けるか（Ctrl+V / MacはCmd+V）、.jsonファイルをアップロードゾーンにドラッグします。アップロードゾーンをクリックしてファイルダイアログを開くこともできます。

3. 設定を調整する — ツールはデフォルトで2スペースインデントで整形します。「インデントサイズ」ドロップダウンを使用して4スペースに切り替えます。整形出力の代わりにコンパクトな文字列が必要な場合は、「出力を最小化」をオンにします。

4. エラーを確認する — ステータスエリアは入力テキストエリアの直下にあります：パーサーエラーと ^ 位置マーカー付きの赤いコールアウトは、入力が無効な場合にのみ表示されます。有効なJSONではステータスメッセージは表示されません — 整形された出力が確認になります。

5. コピーまたはダウンロード — 「コピー」をクリックして出力をクリップボードにコピーするか、「JSONをダウンロード」をクリックして.jsonファイルとして保存します。

6. クリアして繰り返す — 「クリア」をクリックして両方のテキストエリアを空にし、ステータスインジケーターをリセットします。

ミニファイ

「出力を最小化」チェックボックスは、整形されたJSONとコンパクトな1行バージョンを切り替えます。

ミニファイの機能

ミニファイは、有効なJSONからすべての空白、改行、インデントを削除します。結果は、同じデータを含む可能な限り最小の表現の1行テキストになります。

整形されたJSON：

{
  "name": "Alice",
  "age": 30,
  "roles": ["admin", "editor"]
}

ミニファイ後：

{"name":"Alice","age":30,"roles":["admin","editor"]}

ミニファイJSONを使用するタイミング

ミニファイJSONは、ファイルサイズや帯域幅が重要な場合に役立ちます：APIリクエスト・レスポンスペイロード、データベースやキーバリューストアへのJSON保存、ソースコードや設定ファイルへのJSON埋め込み、WebSocket接続を介したJSON送信、コンパクトさがログアグリゲーターでの可読性を向上させるJSONロギング。

トレードオフ

ミニファイJSONはスペースを節約しますが、人間が読んだり編集したりするのは困難です。開発とデバッグ用には常に整形済みのコピーを保持してください。フォーマッターを使用すれば、両方の形式を簡単に切り替えられます — ミニファイJSONを貼り付けて整形し、必要に応じて編集し、ミニファイを再度オンにして圧縮します。

チュートリアル

このチュートリアルでは、ツールを開いてから整形結果を実際のプロジェクトで使用するまでの完全なワークフローを説明します。

シナリオ：ユーザー管理エンドポイントからのREST APIレスポンスをデバッグし、返されたJSON構造を検査する必要があります。

1. ブラウザでJSONフォーマッターを開きます。ツールインターフェースがすぐに利用可能です。

2. 生のAPIレスポンスをコピーします。以下はエンドポイントから返されたミニファイされたJSON文字列です：

{"status":"success","data":{"users":[{"id":1,"name":"Alice","email":"[email protected]","active":true},{"id":2,"name":"Bob","email":"[email protected]","active":false}],"total":2,"page":1},"timestamp":"2026-07-11T10:30:00Z"}

3. 貼り付けて検査 — 文字列を入力エリアに貼り付けます。ツールが即座にJSONを検証して整形します：

{
  "status": "success",
  "data": {
    "users": [
      {
        "id": 1,
        "name": "Alice",
        "email": "[email protected]",
        "active": true
      },
      {
        "id": 2,
        "name": "Bob",
        "email": "[email protected]",
        "active": false
      }
    ],
    "total": 2,
    "page": 1
  },
  "timestamp": "2026-07-11T10:30:00Z"
}

4. 構造を読む — 適切なインデントにより、ネスト階層が明確になります：トップレベルのオブジェクトには status、data、timestamp があります；data には users 配列とページネーションメタデータが含まれています；各ユーザーオブジェクトには id、name、email、active があります。

5. 構文エラーを導入する — users 配列の後のカンマを削除し、壊れたJSONを貼り付けます。ツールは問題箇所を示す ^ マーカー付きの赤いエラーメッセージを表示します。

6. ミニファイを試す — 「出力を最小化」チェックボックスをオンにします。整形された出力が1行のコンパクトな形式に折りたたまれます — APIペイロードやストレージに便利です。

7. 結果をダウンロード — 「JSONをダウンロード」をクリックして、整形された出力を.jsonファイルとして保存します。

8. コピーして使用 — 「コピー」をクリックして出力をクリップボードにコピーします。

上級者向けヒント

これらのテクニックをマスターして、Toollect JSONフォーマッターを最大限に活用しましょう：

• 末尾カンマに注意：これは最も一般的なJSON構文エラーです。JSONではオブジェクトや配列の最後の項目の後にカンマを置くことはできません。フォーマッターが即座に検出し、正確な位置を表示します

• 保存前にミニファイ：データベース、キャッシュ、ログファイルにJSONを保存する際は、ミニファイをオンにしてストレージサイズを削減します。後でフォーマッターに貼り戻して読み取ります

• 差分前に整形：2つのJSONファイルをdiffツールで比較する前に、両方を同じインデントで整形します。一貫した整形によりノイズが排除され、意味のある構造上の違いのみが表示されます

• ファイルを直接ドラッグ：エディタでJSONファイルを開いて内容をコピーする代わりに、.jsonファイルをアップロードゾーンにドラッグします。ツールがファイルを読み取って即座に整形します

• 一重引用符を診断に使用：JSON文字列がパースできない場合、一重引用符を使用していないか確認します。エラーメッセージが問題を確認します — JSONではどこでも二重引用符が必要です

• 他のツールと組み合わせる：ここでJSONを整形し、出力をJSONパスファインダー、スキーマバリデーター、データ変換ツールにコピーしてさらに処理します

代替ツール

Toollect JSONフォーマッターはゼロデータアップロードのブラウザベースJSON整形に優れていますが、さまざまなユースケース向けにいくつかの代替手段が存在します。

ブラウザを離れずに、即時・プライベート・包括的なJSON整形を必要とするほとんどのユーザーは、Toollect JSONフォーマッターが機能・パフォーマンス・利便性の最良のバランスを提供することを実感するでしょう。

データプライバシー

Toollect JSONフォーマッターは、すべてのデータをブラウザ内でローカルに処理します。JSONコンテンツがサーバーに送信されたり、データベースに保存されたり、システムに記録されることは一切ありません。

すべてのファイル読み取りはブラウザのFileReader APIを介して行われ、ファイルはデバイスのメモリに読み込まれます。生成された出力は、明示的にクリップボードにコピーするかファイルとしてダウンロードするまでブラウザに留まります。バックグラウンドネットワークリクエスト、ツールページ上の分析スクリプト、Cookieやローカルストレージの使用はありません。

このゼロ送信アーキテクチャにより、このツールは機密データ、プロプライエタリなAPIレスポンス、内部設定ファイル、データローカライゼーションやプライバシーコンプライアンスが重要なあらゆるシナリオに適しています。初回ページ読み込み後はツールは完全にオフラインで動作します — インターネットから切断しても使用を継続できます。

トラブルシューティング

技術仕様

Toollect JSONフォーマッターは、パフォーマンス、プライバシー、幅広い互換性のために設計されています。

パフォーマンス

技術詳細

• 検証エンジン：ネイティブ JSON.parse()（ECMAScript仕様）
• 整形エンジン：ネイティブ JSON.stringify()、構成可能な space パラメータ
• エラー処理：SyntaxError をキャッチし、エラータイプ、メッセージ、位置を抽出；^ マーカー付きテキストスニペットを表示
• ミニファイ：同じ JSON.stringify() を space=0 で使用、不要な空白をすべて削除
• ファイル処理：FileReader API、10MBサイズ制限、ドラッグ＆ドロップ対応
• クリップボード：navigator.clipboard.writeText()、2秒間の成功インジケーター表示
• ダウンロード：showSaveFilePicker API、Blobフォールバック

ブラウザ互換性

機能

• カスタマイズ可能なインデント（2または4スペース）によるJSON即時整形
• 詳細なエラーメッセージと位置マーカー付きリアルタイム検証
• プロダクションとストレージ向けのJSON圧縮ミニファイ機能
• .jsonファイルのアップロードとドラッグ＆ドロップ対応
• ワンクリックでクリップボードにコピー、ネイティブ名前を付けて保存ダイアログでダウンロード
• 完全ブラウザベース — データアップロードゼロ、オフライン動作可能

よくある質問