JSON
エンジニアのためのWebチートシート

JSON（JavaScript Object Notation）は、軽量なデータ交換フォーマットです。基本的な構文、データ型、バリデーション、JavaScriptでの操作方法をチートシートにまとめました。

基本構文

JSONの基本

JSONはキーと値のペアでデータを記述する軽量なデータ交換フォーマットです。

{
  "name": "Taro",
  "age": 25,
  "isStudent": false,
  "hobbies": ["reading", "coding"],
  "address": {
    "city": "Tokyo",
    "country": "Japan"
  }
}

JSONのルール

JSONの構文ルールです。

// ✅ 正しい
{ "name": "value" }

// ❌ キーはダブルクォート必須
{ name: "value" }

// ❌ シングルクォート不可
{ 'name': 'value' }

// ❌ 末尾カンマ不可
{ "a": 1, "b": 2, }

// ❌ コメント不可（標準JSON）
{ "a": 1 /* comment */ }

データ型

文字列

ダブルクォートで囲みます。シングルクォートは不可です。

{
  "name": "Hello World",
  "escaped": "Line1\nLine2",
  "unicode": "\u3053\u3093\u306b\u3061\u306f",
  "path": "C:\\Users\\name",
  "quote": "He said \"hello\""
}

数値

整数・小数を表します。

{
  "integer": 42,
  "negative": -10,
  "float": 3.14,
  "exponent": 1.5e10,
  "zero": 0
}

boolean / null

true, false, null が使えます（すべて小文字）。

{
  "active": true,
  "deleted": false,
  "middleName": null
}

オブジェクト

オブジェクトの基本

波括弧 {} でキーと値のペアを定義します。

{
  "id": 1,
  "name": "Taro",
  "email": "taro@example.com"
}

ネストしたオブジェクト

オブジェクトの中にオブジェクトを入れることができます。

{
  "user": {
    "name": "Taro",
    "address": {
      "city": "Tokyo",
      "zip": "100-0001"
    }
  }
}

配列

配列の基本

角括弧 [] で値のリストを定義します。

{
  "numbers": [1, 2, 3, 4, 5],
  "strings": ["apple", "banana", "cherry"],
  "mixed": [1, "two", true, null],
  "nested": [[1, 2], [3, 4]],
  "empty": []
}

オブジェクトの配列

配列の中にオブジェクトを入れるパターンです。

{
  "users": [
    { "id": 1, "name": "Taro" },
    { "id": 2, "name": "Hanako" },
    { "id": 3, "name": "Jiro" }
  ]
}

ネスト & 実用例

package.json

Node.jsプロジェクトの設定ファイルです。

{
  "name": "my-app",
  "version": "1.0.0",
  "scripts": {
    "dev": "next dev",
    "build": "next build"
  },
  "dependencies": {
    "react": "^19.0.0",
    "next": "^15.0.0"
  },
  "devDependencies": {
    "typescript": "^5.0.0"
  }
}

tsconfig.json

TypeScriptの設定ファイルです。

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ESNext",
    "strict": true,
    "jsx": "react-jsx",
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

JSON Schema & 操作

JavaScriptでの操作

JavaScriptでJSONを扱う方法です。

// 文字列 → オブジェクト
const obj = JSON.parse('{"name": "Taro"}')

// オブジェクト → 文字列
const str = JSON.stringify({ name: "Taro" })

// 整形して出力
const pretty = JSON.stringify(obj, null, 2)

// fetch API
const res = await fetch('/api/data')
const data = await res.json()

引用・参考リンク

JSON | MDN web docs

Related Cheatsheets

Related Goods

ケーブルに取り付け可能なTypeCとLightningの変換アダプタです。スタイリッシュなデザインで、Apple製品との相性抜群です。
詳細をみる
お気に入りのサウンドデバイスをすぐ取り出せる位置にディスプレイさせておくことができます。
詳細をみる

WebTerm - Recommended tools

WebTermは、ブラウザでLinuxコマンド・Gitコマンドを安全に実行でき、チュートリアル式で学べるターミナルサンドボックスです。
AIコーディングツールの普及に伴い、CLIの基礎知識を身につける重要性は増しています。実際のターミナルを操作するのに抵抗がある方でも、WebTermはローカル環境を壊す心配がありません。「会員登録不要・無料」で利用でき、学習環境として最適です。

WebTerm

Browser Terminal Sandbox for Learning CLI

開く

All Cheatsheets

エンジニア・プログラマー向けの便利なチートシートを多数まとめています(SP/Tablet/PC対応)

すべてのチートシートを見る

JSONエンジニアのためのWebチートシート