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):整数・小数。クォート不要。例:
42、3.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.json、tsconfig.json、.eslintrc.jsonなど、Node.js系プロジェクトの設定はほぼJSONで書かれています。プロジェクトに参加すれば毎日触ることになります。
3. ログ・データの保存
構造化ログをJSON形式で出力すると、後で機械的に解析できるため運用が楽になります。1行1JSONで書くJSON Lines(JSONL)形式もよく使われます。
よくあるミスと対策
JSONはルールがシンプルな分、些細なミスでパースエラーが出ます。よくある原因と対処法をまとめます。
| ミス | 例 | 対策 |
|---|---|---|
| シングルクォート使用 | {'name':'太郎'} | ダブルクォートに変更 |
| 末尾カンマ | {"a":1,} | 最後のカンマを削除 |
| キーをクォートで囲まない | {name:"太郎"} | キー名もダブルクォートで囲む |
| コメントを書く | // これは名前 | JSONはコメント非対応。削除 |
| 文字列内の改行を生で含む | 改行を直接埋める | \n でエスケープ |
手書きで複雑なJSONを書くときは、必ずバリデーターでチェックする習慣をつけましょう。エラー位置をピンポイントで教えてくれるので、デバッグ時間が大幅に短縮できます。整形(フォーマット)機能を使えば、ぎっしり詰まった1行のJSONも読みやすい形に展開できて便利です。
関連ツール
JSONフォーマッター を使う →まとめ
JSONは「キーと値をクォートで囲んで波括弧でまとめる」というシンプルなルールでできています。データ型はわずか6種類、構造は配列とオブジェクトの組み合わせだけ。覚えることは少ないですが、現代のWeb開発では避けて通れない共通言語と言える存在です。
最初はpackage.jsonのような身近なファイルを眺めながら、少しずつ書き換えてみることから始めましょう。書いたら必ずバリデーターでチェック、というサイクルを回せば、JSONはあっという間に手になじみます。仕組みを理解して書くのと、コピペで動かしているのとでは、エラーが出たときの対応スピードがまったく違います。今日からJSONをきちんと使いこなせるエンジニアを目指しましょう。