JSONフォーマッターの使い方

使用手順

左側の入力ボックスにJSONデータを貼り付けます。
「フォーマット」ボタンをクリックして、JSONデータを読みやすい形式にフォーマットします。
「圧縮」ボタンをクリックして、JSONデータを1行に圧縮します。
「自動修正」ボタンをクリックして、一般的なJSON構文エラーを自動的に修正します。
「コピー」ボタンをクリックして、結果をクリップボードにコピーします。
「クリア」ボタンをクリックして、入力と出力の両方をクリアします。
「エスケープ出力」トグルを使用して、プログラムコードに埋め込むための出力をエスケープします。
「ダークモード」トグルを使用して、表示テーマを切り替えます。

エスケープ出力例

エスケープ出力が有効な場合、JSON文字列はプログラムコードに直接埋め込むためにエスケープされます。例えば：

通常の出力：:

{
  "message": "Hello \"World\"",
  "newline": "Line 1\nLine 2"
}

エスケープ出力：:

{\n \"message\": \"Hello \\\"World\\\"\",\n \"newline\": \"Line 1\\nLine 2\"\n}

機能

自動フォーマット：JSONデータを適切なインデントと改行で美しく整形します。
構文検証：JSONデータの構文エラーをチェックし、エラーメッセージを提供します。
構文強調表示：JSONのキーと値のペアとデータ型を異なる色でマークします。
圧縮機能：フォーマットされたJSONをコンパクトな1行形式に変換して、データサイズを削減します。
自動修正：引用符のないキーや末尾のコンマなど、一般的なJSON構文エラーを自動的に修正します。
エスケープ出力：JSON文字列をエスケープして、プログラムコードに直接埋め込めるようにします。
ローカル処理：すべてのデータ処理はブラウザ内で行われ、サーバーにアップロードされることはありません。
リアルタイム処理：入力の変更は自動的に処理され、結果が更新されます。

JSONとは？

JSON（JavaScript Object Notation）は、人間が読み書きしやすく、機械が解析・生成しやすい軽量データ交換フォーマットです。JSONはJavaScript言語のサブセットに基づいていますが、プログラミング言語から完全に独立したテキスト形式で、ほとんどのプログラミング言語で解析と生成がサポートされています。JSONは2000年代初頭にDouglas Crockfordによって提案され、ECMA-404およびRFC 8259で標準化されました。

JSON構文規則

データはキー/値ペアとして表現されます
データはカンマで区切られます
中括弧{}はオブジェクトを保持します
角括弧[]は配列を保持します
キーは二重引用符で囲まれた文字列である必要があります
値は文字列、数値、オブジェクト、配列、真偽値、nullのいずれかです

JSONデータ型

型	説明	例
文字列	二重引用符で囲まれたUnicode文字のシーケンス	`"Hello World"`
数値	整数または浮動小数点数、非数値はサポートされません	`42`, `3.14`
オブジェクト	順序付けされていないキー/値ペアのコレクション	`{"name": "John"}`
配列	順序付けされた値のコレクション	`[1, 2, 3]`
真偽値	trueまたはfalse	`true`
null	空の値	`null`

JSONフォーマットアルゴリズム

JSONフォーマット処理は主に解析と再生成の2つのステップを含みます。まず、パーサーがJSON文字列を読み取ってメモリ表現を構築し、次にフォーマッタが特定のインデントと改行で文字列を再生成します。以下は簡略化されたフォーマット処理です：

// Simplified JSON formatting implementation
function formatJSON(jsonStr, indentSize = 2) {
  try {
    // Step 1: Parse JSON string to JavaScript object
    const obj = JSON.parse(jsonStr);
    
    // Step 2: Convert object back to string with indentation
    return JSON.stringify(obj, null, indentSize);
  } catch (e) {
    // Handle invalid JSON
    throw new Error("Invalid JSON: " + e.message);
  }
}

// Usage example
const uglyJson = '{"name":"John","age":30,"city":"New York"}';
const prettyJson = formatJSON(uglyJson);
console.log(prettyJson);
/*
Output:
{
  "name": "John",
  "age": 30,
  "city": "New York"
}
*/

JSONとXMLの比較

特徴	JSON	XML
構文	簡潔、中括弧と角括弧を使用	より複雑、タグと属性を使用
ファイルサイズ	通常XMLより小さい	通常JSONより大きい
解析速度	より速い	より遅い
データ型	基本的なデータ型をサポート	すべてのデータはテキスト
名前空間	サポートなし	サポートあり
コメント	サポートなし	サポートあり
使いやすさ	開発者にとってより親しみやすい	より構造化され厳格

一般的な問題と解決策

問題：JSON解析エラー - カンマまたは括弧の欠落

解決策：オブジェクトと配列の閉じ括弧をすべてチェックし、各キー/値ペアの後にカンマがあることを確認してください（最後のものを除く）。

問題：JSON解析エラー - 無効なキー値

解決策：すべてのキーが二重引用符で囲まれていることを確認してください。単一引用符や引用符なしのキー名はサポートされていません。

問題：JSONデータサイズの問題

解決策：大きなJSONデータの場合、転送用に圧縮バージョンを使用し、クライアント側で表示用にフォーマットすることを検討してください。

JSONに関する詳細な公式情報については、次のリソースを参照してください：JSON.org | RFC 8259 | Wikipedia: JSON

JSONフォーマッター

JSON入力

フォーマット結果