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 までアップロード。サンプル読込、整形、圧縮—インデントでネスト構造を読みやすく。

エラー行・列表示、元に戻す/やり直し、コピー・ダウンロード。すべてブラウザ内で完結。