WebToolBox

JSON入門【初心者向け】データ形式の基本と使い方を解説

公開日: 2026-04-27

Web開発を始めると必ず登場するのがJSON(JavaScript Object Notation)です。APIのレスポンス、設定ファイル、ログの出力など、エンジニアの日常はJSONであふれています。にもかかわらず、「なんとなく見たことはあるけれど、ちゃんと書こうとするとカンマやクォートで詰まる」という方は意外と多いものです。

本記事では、JSONをまったく触ったことがない初心者の方に向けて、書き方の基本ルール、データ型、配列とオブジェクトの違い、API連携での使われ方まで、現場でよく見るパターンを交えながら解説します。読み終わるころには、自分でJSONを書いて検証できるレベルまで到達できるはずです。

JSONとは何か

JSONは「データを文字列として表現するための形式」です。もともとはJavaScriptのオブジェクト記法から派生したものですが、現在では言語を問わず使えるデータ交換フォーマットとして広く普及しています。Python、Ruby、Go、PHPなど、ほとんどの言語にJSONを読み書きする標準ライブラリが用意されています。

ファイル拡張子は.jsonで、テキストエディタで開けば中身を直接読めます。XMLと比べて記述量が少なく、人間にも読みやすいのが特徴。Webアプリのフロントエンドとサーバーの間でデータをやり取りする際の標準形式となっており、REST APIのレスポンスはほぼ100%JSONと言っても過言ではありません。

基本的な書き方

JSONの構造はとてもシンプルで、「キーと値のペアを波括弧でくくる」のが基本です。最小のJSONはこのような形になります。

{
  "name": "山田太郎",
  "age": 30,
  "isActive": true
}

ここでのポイントは3つ。(1) キーは必ずダブルクォート(")で囲む(2) キーと値はコロン(:)で区切る(3) 各ペアはカンマ(,)で区切る。シングルクォート(')は使えません。JavaScriptのオブジェクトリテラルとよく似ていますが、JSONはより厳格なので注意が必要です。

また、最後の要素の後ろにカンマを付けてはいけません(trailing comma禁止)。ここを間違えるとパースエラーになります。改行やインデントは可読性のためのもので、JSON自体の意味には影響しません。1行に詰めて書いても有効です。

JSONで使えるデータ型

JSONで使えるデータ型は、たった6種類しかありません。シンプルさこそがJSONの最大の強みです。

  • 文字列(string):ダブルクォートで囲んだテキスト。例:"hello"
  • 数値(number):整数・小数。クォート不要。例:423.14
  • 真偽値(boolean)true または false(小文字)
  • null:値が存在しないことを示す。null(小文字)
  • 配列(array):角括弧 [ ] でくくった値のリスト
  • オブジェクト(object):波括弧 でくくったキーと値のペア

注意したいのは、JavaScriptにあるundefinedや関数、日付型はJSONでは使えないということです。日付を扱う場合は"2026-04-27"のようなISO 8601形式の文字列で表現するのが一般的です。

配列とオブジェクトの違い

初心者がもっとも混乱するのが「配列」と「オブジェクト」の使い分けです。役割を理解すれば自然に使い分けられます。

配列:順序のあるリスト

配列は同じ種類のデータを並べるときに使います。順番に意味があり、インデックス(0から始まる番号)でアクセスします。

{
  "tags": ["JavaScript", "TypeScript", "React"]
}

オブジェクト:名前付きの構造

オブジェクトは「ある一つのモノ」を構造的に表現するときに使います。順序ではなく、キー名で値にアクセスします。

{
  "user": {
    "id": 101,
    "name": "佐藤花子",
    "email": "sato@example.com"
  }
}

実際のAPIでは、配列とオブジェクトをネスト(入れ子)して使うのが普通です。たとえば「ユーザー一覧」を返すAPIは、「オブジェクトの配列」として表現されます。

{
  "users": [
    { "id": 1, "name": "田中" },
    { "id": 2, "name": "鈴木" },
    { "id": 3, "name": "高橋" }
  ],
  "total": 3
}

JSONがよく使われる場面

実際の開発現場でJSONが活躍するシーンをいくつか紹介します。

1. REST APIのデータ形式

フロントエンドとバックエンドの通信ではJSONが定番です。fetch()で取得したレスポンスをresponse.json()でパースして、画面に反映するのが基本パターンです。

2. 設定ファイル

package.jsontsconfig.json.eslintrc.jsonなど、Node.js系プロジェクトの設定はほぼJSONで書かれています。プロジェクトに参加すれば毎日触ることになります。

3. ログ・データの保存

構造化ログをJSON形式で出力すると、後で機械的に解析できるため運用が楽になります。1行1JSONで書くJSON Lines(JSONL)形式もよく使われます。

よくあるミスと対策

JSONはルールがシンプルな分、些細なミスでパースエラーが出ます。よくある原因と対処法をまとめます。

ミス対策
シングルクォート使用{'name':'太郎'}ダブルクォートに変更
末尾カンマ{"a":1,}最後のカンマを削除
キーをクォートで囲まない{name:"太郎"}キー名もダブルクォートで囲む
コメントを書く// これは名前JSONはコメント非対応。削除
文字列内の改行を生で含む改行を直接埋める\n でエスケープ

手書きで複雑なJSONを書くときは、必ずバリデーターでチェックする習慣をつけましょう。エラー位置をピンポイントで教えてくれるので、デバッグ時間が大幅に短縮できます。整形(フォーマット)機能を使えば、ぎっしり詰まった1行のJSONも読みやすい形に展開できて便利です。

まとめ

JSONは「キーと値をクォートで囲んで波括弧でまとめる」というシンプルなルールでできています。データ型はわずか6種類、構造は配列とオブジェクトの組み合わせだけ。覚えることは少ないですが、現代のWeb開発では避けて通れない共通言語と言える存在です。

最初はpackage.jsonのような身近なファイルを眺めながら、少しずつ書き換えてみることから始めましょう。書いたら必ずバリデーターでチェック、というサイクルを回せば、JSONはあっという間に手になじみます。仕組みを理解して書くのと、コピペで動かしているのとでは、エラーが出たときの対応スピードがまったく違います。今日からJSONをきちんと使いこなせるエンジニアを目指しましょう。

他のおすすめツール