メインコンテンツにスキップ

JSONデータ形式を理解する 📦

APIを学んでいると、JSONという言葉をよく耳にします。JSONはプログラム同士がデータをやり取りする際に使用する形式です。とても簡単に説明します!

JSONを日常生活で例えると?​

JSONを宅配便の荷物ラベルで例えてみましょうか?

📦 宅配便の箱
┌──────────────────┐
│ 受取人: 山田太郎     │
│ 住所: 東京都渋谷区   │
│ 電話番号: 090-1234-5678 │
│ 商品: 本           │
└──────────────────┘

この情報をJSONで書くと:

{
  "受取人": "山田太郎",
  "住所": "東京都渋谷区",
  "電話番号": "090-1234-5678",
  "商品": "本"
}

JSONの正式名称​

JSON = JavaScript Object Notation

「JavaScriptオブジェクト表記法」という意味ですが、すべてのプログラミング言語で使用できます!

JSONの基本ルール​

1. 中括弧 で囲む​

{
  "名前": "値"
}

2. ダブルクォート " "を使う​

{
  "名前": "山田太郎"
}

3. コロン : で名前と値を繋ぐ​

{
  "年齢": 25
}

4. カンマ , で複数の情報を区切る​

{
  "名前": "山田太郎",
  "年齢": 25,
  "職業": "開発者"
}

JSONデータタイプ​

JSONで使用できる値:

1. 文字列 (String) ""​

{
  "名前": "山田太郎",
  "都市": "東京"
}

2. 数値 (Number)​

{
  "年齢": 25,
  "身長": 175.5,
  "気温": -5
}

3. 真偽値 (Boolean)​

{
  "会員登録完了": true,
  "メール認証": false
}

4. 配列 (Array) [ ]​

複数を格納する際に使用:

{
  "趣味": ["読書", "映画", "コーディング"],
  "点数": [90, 85, 95]
}

5. オブジェクト (Object) ​

情報をグループにまとめる際:

{
  "ユーザー": {
    "名前": "山田太郎",
    "年齢": 25
  }
}

6. null​

値がない場合:

{
  "ミドルネーム": null
}

実際の例で理解する​

例1: ユーザー情報 👤​

{
  "名前": "山田太郎",
  "年齢": 25,
  "メール": "yamada@example.com",
  "会員": true,
  "住所": {
    "都市": "東京",
    "区": "渋谷区"
  },
  "趣味": ["読書", "映画鑑賞", "コーディング"]
}

例2: ショッピングモール商品 🛍️​

{
  "商品名": "ノートパソコン",
  "価格": 150000,
  "在庫": 5,
  "セール中": true,
  "色": ["シルバー", "グレー", "ブラック"],
  "仕様": {
    "CPU": "i7",
    "RAM": "16GB",
    "ストレージ": "512GB SSD"
  }
}

例3: 天気情報 ☀️​

{
  "都市": "東京",
  "気温": 23,
  "天気": "晴れ",
  "湿度": 60,
  "降水確率": 0,
  "週間予報": [
    {"曜日": "月", "気温": 22},
    {"曜日": "火", "気温": 24},
    {"曜日": "水", "気温": 25}
  ]
}

JSON配列を理解する​

複数のデータを格納する際は角括弧 [ ]を使用します:

単純な配列​

["りんご", "バナナ", "オレンジ"]

オブジェクトの配列​

[
  {
    "名前": "山田太郎",
    "年齢": 25
  },
  {
    "名前": "佐藤次郎",
    "年齢": 30
  },
  {
    "名前": "鈴木花子",
    "年齢": 28
  }
]

JSONの読み方​

{
  "学生": {
    "名前": "山田太郎",
    "点数": [90, 85, 95],
    "合格": true
  }
}

このように読みます:

  • 「学生という情報があって」
  • 「その中に名前は山田太郎で」
  • 「点数は90、85、95点で」
  • 「合格はtrue(真)だ」

JSON vs 他の形式​

JSON vs CSV​

CSV (Excelのような表形式):

名前,年齢,都市
山田太郎,25,東京
佐藤次郎,30,大阪

JSON:

[
  {"名前": "山田太郎", "年齢": 25, "都市": "東京"},
  {"名前": "佐藤次郎", "年齢": 30, "都市": "大阪"}
]

JSONの利点:

  • 複雑な構造を表現可能
  • ネストされたデータを簡単に表現
  • APIで標準として使用

実戦活用例​

API応答例​

GitHub APIでユーザー情報を要求すると:

{
  "login": "github",
  "id": 1,
  "name": "GitHub",
  "location": "San Francisco",
  "public_repos": 344,
  "followers": 1000000,
  "following": 0
}

設定ファイル例​

プログラム設定をJSONで:

{
  "アプリ名": "私のウェブサイト",
  "バージョン": "1.0.0",
  "データベース": {
    "ホスト": "localhost",
    "ポート": 3306,
    "ユーザー": "admin"
  },
  "機能": {
    "ダークモード": true,
    "通知": true,
    "自動保存": false
  }
}

JSONツールを使う​

当サイトのツールでJSONを扱ってみましょう!

1. JSONを整形する​

JSON Formatter - 複雑なJSONを見やすく!

2. JSONデータを探索する​

JSON Path Tester - JSONから必要なデータを検索

3. JSONを他の形式に変換​

よくある間違いと解決法​

❌ 間違い1: カンマを忘れる​

{
  "名前": "山田太郎"
  "年齢": 25
}

✅ 正しい方法:​

{
  "名前": "山田太郎",
  "年齢": 25
}

❌ 間違い2: 最後にカンマを追加​

{
  "名前": "山田太郎",
  "年齢": 25,
}

✅ 正しい方法:​

{
  "名前": "山田太郎",
  "年齢": 25
}

❌ 間違い3: シングルクォートを使用​

{
  '名前': '山田太郎'
}

✅ 正しい方法:​

{
  "名前": "山田太郎"
}

❌ 間違い4: コメントを書く​

{
  // これはコメントです
  "名前": "山田太郎"
}

JSONではコメントは書けません! ❌

JSONが使われる場所​

1. API通信 🌐​

ほとんどのWeb APIはJSONでデータをやり取りします。

// APIリクエスト
fetch('https://api.example.com/users')
  .then(response => response.json())
  .then(data => console.log(data))

2. 設定ファイル ⚙️​

  • package.json (Node.js)
  • tsconfig.json (TypeScript)
  • settings.json (VS Code)

3. データ保存 💾​

NoSQLデータベース (MongoDBなど)はJSON形式でデータを保存します。

4. データ交換 📤📥​

サーバーとクライアントがデータをやり取りする際。

よくある質問 (FAQ)​

Q1: JSONはプログラミング言語ですか?​

A: いいえ! JSONはデータ形式です。データを表現する方法に過ぎません。

Q2: JSONはJavaScriptでのみ使用しますか?​

A: いいえ! ほぼすべてのプログラミング言語で使用できます。

  • Python
  • Java
  • C++
  • PHP
  • Ruby などなど!

Q3: JSONとXMLの違いは?​

A: XMLは以前よく使われていた形式です。JSONの方がシンプルで読みやすいため、最近はJSONをより多く使います。

XML:

<user>
  <name>山田太郎</name>
  <age>25</age>
</user>

JSON:

{
  "name": "山田太郎",
  "age": 25
}

Q4: JSONファイルの拡張子は?​

A: .json です。

data.json
config.json
users.json

JSON妥当性検証​

JSONが正しい形式かどうかを確認するには:

  1. JSON Formatter を使用
  2. オンラインJSON検証ツールを使用
  3. ブラウザの開発者ツールで確認

実習: 直接JSONを作ってみる​

自分の情報をJSONで作ってみましょう:

{
  "名前": "あなたの名前",
  "年齢": あなたの年齢,
  "居住地": "あなたの都市",
  "趣味": [
    "趣味1",
    "趣味2",
    "趣味3"
  ],
  "学生": true,
  "紹介": {
    "好きな食べ物": "...",
    "好きな色": "..."
  }
}
ヒント

JSON Formatterに貼り付けて「Format」ボタンを押してみてください! きれいに整理され、文法エラーも確認できます。

次のステップ 🚀​

JSONを理解したら:

  1. ✅ JSON Formatter - JSONを整形する
  2. ✅ JSON Path Tester - JSONデータを検索する
  3. ✅ API Tester - JSONを使用するAPIをテスト
  4. ✅ JSON to TypeScript - JSONをコードに変換

まとめ​

JSONは難しくありません! データを整理する方法の一つです。

覚えるポイント:

  • { } 中括弧で始まり終わる
  • " " ダブルクォートを使用
  • : コロンで名前と値を繋ぐ
  • , カンマで項目を区切る
  • 最後の項目の後にカンマはなし

これでJSONを読み書きできるようになりましたか? 🎉

APIを学び、Web開発をするならJSONは必須です。頻繁に見ていくうちにすぐに慣れますよ!