CheatSheet
日本語 icon日本語English iconEnglish
チートシートとはカンニングペーパーのことです。それが転じて、本来覚えることをまとめておいたものです。
要点をすぐに参照できるようにまとめてみました。

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()