REST APIのレスポンスをコピペしてJavaScriptに貼り付けたら「SyntaxError: Unexpected token」が出た——そんな経験はないでしょうか。 あるいは設定ファイルのJSONを手で編集したら動かなくなった、末尾カンマを消したら直った、という経験も定番のあるあるです。
JSONはシンプルに見えて、落とし穴がいくつかあります。 この記事ではJSONの構造・文法・JavaScriptでの操作方法・整形と検証のコツを基礎から解説します。
JSONとは
JSON（JavaScript Object Notation）はデータを表現するための軽量なテキスト形式です。 2001年にDouglas Crockfordが提唱し、現在はRFC 8259として標準化されています。 名前にJavaScriptが含まれていますが、言語に依存しないフォーマットであり、Python・Ruby・Go・Javaなどほぼあらゆる言語でパースライブラリが整備されています。
REST APIのレスポンスボディ、設定ファイル（package.json・tsconfig.json）、LocalStorageへのデータ保存、マイクロサービス間のメッセージなど、 現代のWeb開発においてJSONが登場しない場面を探す方が難しいほど普及しています。
XMLに比べて記述量が少なく、人間にも読みやすいことから、2000年代後半に急速に普及しました。
JSONの基本文法
JSONで使えるデータ型は6種類だけです。シンプルな仕様が普及の大きな理由のひとつです。
| 型 | 例 | 備考 |
|---|---|---|
| 文字列（string） | "hello" | 必ずダブルクォートで囲む |
| 数値（number） | 42, 3.14, -1 | NaN・Infinity・先頭ゼロは使えない |
| 真偽値（boolean） | true, false | 小文字のみ。Trueは無効 |
| null | null | 小文字のみ。undefinedは使えない |
| 配列（array） | [1, "a", true] | 異なる型を混在させることもできる |
| オブジェクト（object） | {"key": "value"} | キーは必ずダブルクォートの文字列 |
オブジェクトと配列のネスト例
// ユーザー情報の例
{
"name": "山田太郎",
"age": 28,
"isPremium": true,
"address": null,
"tags": ["developer", "designer"],
"profile": {
"bio": "フロントエンドエンジニア",
"website": "https://example.com"
}
}
よくある文法エラーとその直し方
JSONのパースエラーは、ほとんどが次の3種類のどれかに該当します。
1. 末尾カンマ（Trailing Comma）
// NG: 最後の要素の後ろにカンマがある
{
"name": "太郎",
"age": 28, ← ここが問題
}
// OK: 最後のカンマを削除
{
"name": "太郎",
"age": 28
}
JavaScript・TypeScriptのオブジェクトリテラルでは末尾カンマを許容しますが、JSONは許可していません。 コードからJSONファイルを生成する際にやりがちなミスです。
2. シングルクォートの使用
// NG: シングルクォートは無効
{'name': '太郎'}
// OK: ダブルクォートを使う
{"name": "太郎"}
3. コメントの混入
// NG: JSONにコメントは書けない
{
// ユーザー情報
"name": "太郎"
}
// OK: コメントを削除する
{
"name": "太郎"
}
設定ファイルにコメントを書きたい場合は、.jsonc（JSON with Comments）形式を使うか、YAMLへの変更を検討してください。
JavaScriptでのJSON操作
JavaScriptにはJSONを扱う組み込みオブジェクトJSONがあり、2つのメソッドが頻繁に使われます。
JSON.parse() — JSON文字列をオブジェクトに変換
// APIレスポンスのパース例
const jsonStr = '{"name": "太郎", "age": 28}'
const obj = JSON.parse(jsonStr)
// obj.name === "太郎", obj.age === 28
// パースに失敗した場合のエラーハンドリング
try {
const data = JSON.parse(responseText)
// dataを使う処理
} catch (e) {
console.error("JSONのパースに失敗しました", e)
}
JSON.stringify() — オブジェクトをJSON文字列に変換
// 基本形（インデントなし）
JSON.stringify({ name: "太郎", age: 28 })
// → '{"name":"太郎","age":28}'
// 第3引数でインデントを指定（読みやすい整形）
JSON.stringify({ name: "太郎", age: 28 }, null, 2)
// → '{ "name": "太郎", "age": 28 }'
// 第2引数で出力するキーを絞り込む
JSON.stringify({ name: "太郎", age: 28, secret: "xyz" }, ["name", "age"], 2)
// secretキーは出力されない
// ⚠ undefinedと関数はシリアライズ時に省略される
JSON.stringify({ a: undefined, b: () => {}, c: "ok" })
// → '{"c":"ok"}'
JSON整形・検証ツールの使い方
APIレスポンスをブラウザのデベロッパーツールで見ると1行で表示されて読みにくいことがあります。 そういうときはぱんだツールズのJSON整形ツールにペーストするだけで、インデント整形・文法バリデーション・minifyができます。
- 整形（Prettify） — インデントを付けて可読性の高いJSONに変換。APIレスポンスの確認に
- 圧縮（Minify） — 空白・改行を除去してファイルサイズを最小化。本番環境のAPIレスポンスに
- バリデーション — 文法エラーがあれば該当行を指摘。デバッグ時間を大幅に短縮
また、2つのJSONの差分を確認したいときはJSON差分比較ツールが便利です。APIのバージョン間の変更確認や、設定ファイルのビフォーアフター比較に活用できます。
JSONとその他フォーマットの比較
JSONは万能ではありません。用途に応じてCSV・XML・YAMLと使い分けることが大切です。
| フォーマット | 向いている用途 | 苦手な用途 |
|---|---|---|
| JSON | APIレスポンス、設定ファイル、ネストしたデータ | コメントが必要な設定、大量の表形式データ |
| CSV | 表形式データ（売上・在庫・名簿）、Excelとのやり取り | ネストした構造、型情報が必要なデータ |
| XML | ドキュメント構造（HTML系）、スキーマ検証が必要な用途 | シンプルなデータ交換（冗長すぎる） |
| YAML | CI/CD設定、Docker Compose、Kubernetes、コメント必須の設定ファイル | APIレスポンス、パース速度が重要な場面 |
CSVとJSONを相互変換したいときはCSV↔JSON変換ツールを使うと、ブラウザ上でワンクリックで変換できます。
まとめ
- JSONはRFC 8259で標準化された軽量なテキスト形式。APIレスポンスから設定ファイルまで広く使われる
- 使える型は6種類（文字列・数値・真偽値・null・配列・オブジェクト）。キーはダブルクォート必須
- よくあるエラーは「末尾カンマ」「シングルクォート」「コメント混入」の3つ
JSON.parse()でパース、JSON.stringify(obj, null, 2)で整形出力、エラーはtry-catchで受け取る- 表形式データはCSV、コメント必須の設定ファイルはYAMLが向いている
- 文法エラーが出たらJSON整形ツールに貼ってバリデーションするのが最速