JSONフォーマッター
JSONデータを読みやすく、デバッグしやすくするためにフォーマットして検証します。圧縮、整形、構文強調表示をサポートします。
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