---
title: "JSONとは何か｜データ形式の基本・整形方法・よくあるエラーを解説"
description: "JSONの基本構造・書き方・よくあるパースエラーの原因を解説します。APIレスポンスやconfig設定ファイルなど、Webで広く使われるデータ形式の読み方・整形方法をまとめました。"
date: 2026-06-08
category: Web制作
tags: [JSON]
related_tools: [json-formatter]
draft: false
---

**JSON（JavaScript Object Notation）** は、データをテキストで表現するための軽量なフォーマットです。APIのレスポンス、設定ファイル、ログデータなど、あらゆる場所で使われており、Webに関わる仕事をする上でほぼ必ず目にします。

## JSONの基本構造

JSONは2種類のデータ構造で構成されています。

### オブジェクト（`{}`）

キーと値のペアを `{}` で囲みます。

```json
{
  "name": "田中太郎",
  "age": 30,
  "email": "tanaka@example.com"
}
```

### 配列（`[]`）

複数の値を順番に並べたリストです。

```json
["東京", "大阪", "福岡"]
```

オブジェクトと配列は入れ子にできます。

```json
{
  "company": "例株式会社",
  "members": [
    { "name": "田中", "role": "営業" },
    { "name": "鈴木", "role": "開発" }
  ]
}
```

## 使える値の種類

JSONで使える値の型は6種類です。

| 型 | 書き方の例 | 注意点 |
|---|---|---|
| 文字列 | `"こんにちは"` | 必ずダブルクォート |
| 数値 | `42` / `3.14` | クォート不要 |
| 真偽値 | `true` / `false` | 小文字のみ |
| null | `null` | 小文字のみ |
| オブジェクト | `{ "key": "value" }` | — |
| 配列 | `[1, 2, 3]` | — |

## よくあるエラーと原因

### シングルクォートを使っている

```json
// ❌ エラー
{ 'name': '田中' }

// ✅ 正しい
{ "name": "田中" }
```

JSONの文字列は**ダブルクォートのみ**です。シングルクォートはJavaScriptでは有効ですが、JSONでは無効です。

### 末尾のカンマ（トレイリングカンマ）

```json
// ❌ エラー
{
  "name": "田中",
  "age": 30,   ← 最後の要素にカンマ
}

// ✅ 正しい
{
  "name": "田中",
  "age": 30
}
```

### コメントを書いている

```json
// ❌ エラー（JSONはコメントを許容しない）
{
  // ユーザー情報
  "name": "田中"
}
```

JSONはコメントをサポートしていません。設定ファイルとして使う場合、コメントが書けるJSONCやTOML形式が代替として使われることがあります。

### キーがクォートされていない

```json
// ❌ エラー
{ name: "田中" }

// ✅ 正しい
{ "name": "田中" }
```

JavaScriptのオブジェクトリテラルとは異なり、JSONのキーは必ずダブルクォートで囲む必要があります。

## JSONの整形と圧縮

受け取ったJSONが1行にまとまっていて読みにくい場合は**整形（Pretty Print）**、逆にスペースや改行を取り除いてデータを小さくしたい場合は**圧縮（Minify）**を行います。

```json
// 圧縮（Minified）
{"name":"田中","age":30,"city":"東京"}

// 整形（Pretty Print）
{
  "name": "田中",
  "age": 30,
  "city": "東京"
}
```

通信帯域を節約したい本番環境では圧縮形式が使われ、人が確認する際は整形形式にするのが一般的です。

## APIレスポンスでの読み方

REST APIはほとんどの場合、JSONでデータを返します。

```json
{
  "status": "success",
  "data": {
    "id": 1001,
    "title": "記事タイトル",
    "published_at": "2026-06-08T09:00:00Z",
    "tags": ["SEO", "Web制作"]
  },
  "meta": {
    "total": 150,
    "page": 1
  }
}
```

確認したい値は「キー」を辿ってアクセスします。`data.tags[0]` であれば `"SEO"` が取得できます。

## JSONとXMLの比較

以前はXMLがデータ交換の主流でしたが、現在はJSONが主に使われています。

| 項目 | JSON | XML |
|---|---|---|
| 記述量 | 少ない | 多い（開始・終了タグが必要） |
| 読みやすさ | 高い | タグが多く読みにくい |
| ブラウザとの親和性 | 高い（JS標準） | 低い |
| コメント | 不可 | 可 |
| 属性表現 | 不可 | 可 |

Google Analytics 4やFacebook広告のAPIなど、マーケティングツールのAPIもほぼすべてJSONで通信しています。