JSONとは？初心者にもわかる書き方・使い方を徹底解説

Web開発やプログラミングを学び始めると、必ず目にするのが「JSON」という言葉です。APIのレスポンス、設定ファイル、データのやり取りなど、あらゆる場面で使われています。この記事では、JSONの基本概念から書き方、よくあるエラーまで、初心者の方にもわかりやすく解説します。

JSONとは何か

JSON（ジェイソン）は「JavaScript Object Notation」の略で、データを記述するためのテキストフォーマットです。もともとJavaScriptのオブジェクト表記から派生しましたが、現在ではほぼすべてのプログラミング言語で利用できる汎用的なデータ形式となっています。

JSONが広く使われている理由は主に3つあります。

人間が読みやすい - テキスト形式なので、目で見て内容を理解できる
機械が処理しやすい - パース（解析）が高速で、どの言語でも簡単に扱える
軽量 - XMLと比べてデータ量が少なく、通信の効率が良い

JSONの基本構文ルール

JSONにはいくつかの重要なルールがあります。これらを覚えておけば、JSONの読み書きで困ることはありません。

ルール1: キーと値のペアで記述する

JSONの基本形は「キー: 値」のペアです。キーは必ずダブルクォーテーションで囲みます。

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

ルール2: シングルクォーテーションは使えない

JavaScriptではシングルクォーテーションも使えますが、JSONではダブルクォーテーションのみが有効です。

// NG（JSONとして無効）
{ 'name': '田中太郎' }

// OK（正しいJSON）
{ "name": "田中太郎" }

ルール3: 末尾カンマは禁止

配列やオブジェクトの最後の要素の後にカンマを付けるとエラーになります。

// NG
{ "name": "田中太郎", "age": 30, }

// OK
{ "name": "田中太郎", "age": 30 }

JSONで使えるデータ型

JSONで使用できるデータ型は以下の6種類です。

データ型	説明	例
文字列	ダブルクォーテーションで囲んだテキスト	`"Hello"`
数値	整数または小数	`42`, `3.14`
真偽値	trueまたはfalse	`true`
null	値がないことを示す	`null`
配列	値の順序付きリスト	`[1, 2, 3]`
オブジェクト	キーと値のペアの集合	`{"key": "value"}`

これらを組み合わせることで、複雑なデータ構造も表現できます。

{
  "user": {
    "name": "田中太郎",
    "age": 30,
    "isPremium": true,
    "address": null,
    "hobbies": ["読書", "プログラミング", "映画鑑賞"],
    "scores": {
      "math": 85,
      "english": 72
    }
  }
}

実際の使用例

Web APIのレスポンス

Web APIからのレスポンスデータは、ほとんどがJSON形式です。例えば天気APIのレスポンスは以下のようになります。

{
  "city": "東京",
  "temperature": 22.5,
  "humidity": 60,
  "weather": "晴れ",
  "forecast": [
    { "date": "2024-01-16", "weather": "曇り", "high": 18 },
    { "date": "2024-01-17", "weather": "雨", "high": 12 }
  ]
}

設定ファイル（package.json）

Node.jsプロジェクトではpackage.jsonという設定ファイルが使われます。

{
  "name": "my-project",
  "version": "1.0.0",
  "description": "サンプルプロジェクト",
  "scripts": {
    "start": "node index.js",
    "test": "jest"
  },
  "dependencies": {
    "express": "^4.18.0"
  }
}

JavaScriptでのJSON操作

JavaScriptではJSON.parse()とJSON.stringify()でJSONを扱います。

// JSON文字列 → オブジェクトに変換
const data = JSON.parse('{"name": "田中", "age": 30}');
console.log(data.name); // "田中"

// オブジェクト → JSON文字列に変換
const json = JSON.stringify({ name: "田中", age: 30 });
console.log(json); // '{"name":"田中","age":30}'

// 整形して出力（インデント2スペース）
const pretty = JSON.stringify(data, null, 2);
console.log(pretty);

よくあるエラーと対処法

JSONを扱う際によく発生するエラーとその解決方法をまとめました。

SyntaxError: Unexpected token

最も多いエラーです。以下の原因が考えられます。

シングルクォーテーションを使っている
末尾にカンマがある（トレーリングカンマ）
コメントが含まれている（JSONはコメント非対応）
キーがダブルクォーテーションで囲まれていない

文字化けする

ファイルの文字コードがUTF-8になっていない場合に発生します。JSONファイルは必ずUTF-8で保存しましょう。

ネストが深すぎて読みにくい

APIから返ってきたJSONが一行に圧縮されていて読みにくい場合は、JSON整形ツールを使うと一発で見やすくなります。

実際にJSONを整形してみましょう

JSON整形ツールを使ってみる

まとめ

JSONはWeb開発において最も重要なデータ形式の一つです。基本ルールはシンプルで、ダブルクォーテーションの使用、末尾カンマの禁止、コメント非対応の3点を押さえておけば、ほとんどのケースに対応できます。

実際にJSONを書いたり整形したりしながら慣れていくのが上達への近道です。当サイトのJSON整形ツールを活用して、ぜひ実践してみてください。