JSON チュートリアル
JSON は API や設定ファイルで広く使われる軽量なデータ形式です。基本構文と実践的なパターンを説明します。
JSON とは
JavaScript のオブジェクト記法に基づくテキスト形式で、言語に依存しません。
有効な JSON の最上位は、オブジェクト {...} か配列 [...] のどちらか一方です。
基本ルール
キーと文字列は二重引用符;\ でエスケープ。
カンマ区切り、末尾カンマ不可。コメントや undefined は不可。
数値に先頭ゼロなし;true/false は小文字。
6 つのデータ型
string, number, boolean, null, object, array:
{
"name": "Alice",
"age": 30,
"active": true,
"score": null
}文字列とエスケープ
二重引用符、UTF-8、\n \t \" \\ など。
{
"message": "Hello\nWorld",
"quote": "He said \"Hi\"",
"path": "C:\\Users\\data",
"emoji": "你好 🎉",
"unicode": "\u0041"
}数値・真偽値・null
整数、小数、負数、指数表記。null は空値。
{
"count": 42,
"price": 19.99,
"negative": -1,
"scientific": 1.5e10,
"flag": true,
"disabled": false,
"empty": null
}空の構造
[] 空配列、{} 空オブジェクト、"" 空文字列。
{
"tags": [],
"meta": {},
"note": ""
}オブジェクト
{} 内のキー:値ペア。
{
"user": {
"id": 1001,
"email": "alice@example.com"
}
}配列
[] 内の順序付き要素。最上位の配列も可能:
{
"tags": ["json", "tutorial", "web"],
"scores": [95, 88, 72]
}[
{ "id": 1, "name": "Alice" },
{ "id": 2, "name": "Bob" }
]ネスト構造
多段ネストのオブジェクトと配列。
{
"project": "QyCreate JSON",
"version": 1,
"features": ["format", "validate", "minify"],
"settings": {
"indent": 2,
"theme": "light"
},
"contributors": [
{ "name": "Alice", "role": "author" },
{ "name": "Bob", "role": "reviewer" }
]
}JSON と JavaScript の違い
JSON はデータ形式であり実行コードではありません。コメント・関数・undefined は不可。
JSON.parse() / JSON.stringify()。JSON5 は拡張形式。
よくある間違い
キーの引用符忘れ、単一引用符、末尾カンマ:
{
name: "Alice",
"items": [1, 2, 3,],
}{
"name": "Alice",
"items": [1, 2, 3]
}このツールで練習
JSON を貼り付けまたは 4 MB までアップロード。サンプル読込、整形、圧縮—インデントでネスト構造を読みやすく。
エラー行・列表示、元に戻す/やり直し、コピー・ダウンロード。すべてブラウザ内で完結。