Programming Lab
SunStripe / Programming Lab / JSON

Programming Lab

JSON について

JSONは、Webやアプリで最もよく使われる「軽量なデータ表現」です。設定ファイル、APIレスポンス、保存データなど、現代の開発のど真ん中にいます。

history rules samples export/import

JSONの歴史

要点：JSONは「JavaScriptのオブジェクト表記」をベースに、言語を超えて使えるデータ形式として普及しました。
  • 1990年代後半〜2000年代初頭：ブラウザ上のJavaScriptとサーバー通信が増え、軽いデータ交換の需要が高まる
  • 2000年代：XMLよりも読み書きしやすい形式としてJSONが広く使われ始める
  • 現在：API、設定、NoSQL、ログ、フロント/バックのやり取りなど、標準的な形式として定着

※ 歴史の細部は時代/コミュニティで語り口が違いますが、開発現場での位置づけとしては「軽くて扱いやすい標準フォーマット」になった点が最大のポイントです。

JSONのルール

基本構造

  • JSONは オブジェクト（{...}）か 配列（[...]）のどちらかから始まる
  • キーは 必ずダブルクォート（"key"）
  • 文字列も 必ずダブルクォート（"text"）

値の型

  • string（"..."）
  • number（123 / 3.14）
  • boolean（true / false）
  • null
  • object（{...}）
  • array（[...]）

よくある落とし穴（超重要）

  • 末尾カンマは禁止：{"a":1,} はNG
  • コメントは禁止：// や /* */ はNG
  • シングルクォートは禁止：{'a':1} はNG
  • NaN / Infinity はJSONに存在しない（文字列にするか別表現へ）
  • 日付型はない：ISO文字列（例："2026-02-08T12:00:00+09:00"）などで表現

サンプル

オブジェクト

{
  "title": "JSON入門",
  "open": true,
  "count": 3,
  "tags": ["data", "web"],
  "meta": {
    "author": "SunStripe",
    "updated": null
  }
}

配列

[
  { "id": 1, "name": "A" },
  { "id": 2, "name": "B" }
]

レッスン用JSON（このサイトで使いやすい形）

[
  {
    "title": "記事タイトル",
    "description": "短い概要",
    "detail": "長文本文（改行OK）",
    "tags": ["入門", "データ"],
    "create": "2026-02-08 12:00:00",
    "update": null,
    "open": true
  }
]

JSONのエクスポート

ここでは、ブラウザ内でJSONを作って「.jsonとしてダウンロード」する流れを体験します（サーバー送信なし）。

初期データが入っています。自由に編集してOK。

JSONのインポート

次は、ローカルの .json を選んで読み込み、内容を表示します（これもブラウザ内のみ）。

読み込んだら下に整形表示します。

現場のコツ

キー命名

  • フロント/バックで揺れないように snake_case か camelCase を統一
  • 日付はISO文字列で統一すると移植性が高い

バージョン運用

  • スキーマ（項目）変更がある場合は schemaVersion を入れると事故が減る
  • 後方互換が必要なら、未定義時のデフォルト値をコード側で用意

このページは ./data/lesson/JSON.json を読み込んで描画しています。本文はHTMLとして格納しているので、必要ならMarkdown運用に切り替えるのも簡単です。

JSON page template (PHP + JSON + JS)