2024.06.20 Node.js

JSON形式とは？基本構造・データ型・書き方の基礎からTypeScriptでの扱い方まで

JSON形式（JSON）は、Web開発で最も広く使われているデータ交換フォーマットです。APIのレスポンスや設定ファイル、データの保存など、現代のアプリケーションのいたるところで登場します。本記事では「JSON形式とは何か」という基礎から、基本構造と書き方のルール、使える6つのデータ型、XMLやCSVとの違い、JavaScriptでの扱い方（JSON.parse／JSON.stringify）、さらにTypeScriptで型安全に扱う方法までを、動作確認済みのコード例つきで体系的に解説します。

JSON形式とは？基礎をわかりやすく解説

JSON（ジェイソン）は「JavaScript Object Notation」の略で、テキストベースの軽量なデータ記述フォーマットです。名前と値（キーとバリュー）のペアを基本単位とし、人間が読み書きしやすく、機械が解析しやすい構造を持っています。元々はJavaScriptのオブジェクト記法をもとに設計されましたが、現在ではテキスト形式という性質上どのプログラミング言語からも扱え、システム間のデータ交換における事実上の標準になっています。

JSONの定義と読み方

JSONは「ジェイソン」と読みます。データを構造化して表現するための表記法であり、それ自体はプログラミング言語ではありません。中身は単なるテキストなので、ファイルとして保存したり、ネットワーク越しに送受信したりするのが容易です。拡張子は「.json」が用いられ、HTTP通信ではMIMEタイプ「application/json」で送られます。

JSONの歴史と標準仕様

JSONは2000年代初頭にDouglas Crockford（ダグラス・クロックフォード）によって広められました。XMLに比べて記述が簡潔で軽量なため、Webアプリケーションのデータ通信を中心に急速に普及しました。現在ではフォーマットとして正式に標準化されており、ECMA International による ECMA-404、および IETF による RFC 8259（STD 90）として規定されています。両者は同じJSONの文法を定義しており、安心して相互運用できます。

なぜJSONが使われるのか

JSONが選ばれる理由は大きく3つあります。第一に「軽量」であること。タグの開閉が必要なXMLと比べて記述量が少なく、転送・解析のコストが小さくて済みます。第二に「言語非依存」であること。JavaScript・Python・Java・PHP・Go・Rustなど主要言語のほとんどがJSONの読み書きを標準またはライブラリでサポートしています。第三に「人間にも読みやすい」こと。構造がそのまま字面に表れるため、デバッグや設定の確認が容易です。これらの特性から、JSONはWeb APIのデータ交換形式として広く採用されています。

JSON形式の基本構造と書き方のルール

JSONの構造は、突き詰めると「オブジェクト」と「配列」という2つの入れ物に、いくつかの基本データ型を入れて表現するだけです。ここでは具体例とともに、書き方の基本ルールと、初心者がつまずきやすい注意点を整理します。

キーと値のペア・オブジェクト・配列

JSONの最小単位は「キー（名前）」と「値」のペアです。全体を波カッコ { } で囲んでオブジェクトを作り、キーと値をコロン : で対応させ、ペアが複数あればカンマ , で区切ります。順序を持つ値の並びは角カッコ [ ] で囲んで配列にします。オブジェクトや配列は入れ子（ネスト）にでき、これにより複雑なデータ構造も表現できます。

{
  "name": "John Doe",
  "age": 30,
  "isStudent": false,
  "courses": ["Math", "Science"],
  "address": {
    "street": "123 Main St",
    "city": "Anytown"
  }
}

上の例では、文字列・数値・真偽値・配列・ネストしたオブジェクトが組み合わさっています。courses は配列、address はオブジェクトのネストです。このように、基本ルールの組み合わせだけで実用的なデータを表現できるのがJSONの特徴です。

JSONで使える6つのデータ型

JSONの値として使えるデータ型は、次の6種類に限られます。シンプルだからこそ、どの言語でも一貫して扱えます。

データ型 例 備考
文字列 (string) “hello” 必ずダブルクォートで囲む
数値 (number) 30 / 3.14 / -1e5 8進数・16進数は不可
真偽値 (boolean) true / false すべて小文字
null null 値が無いことを表す
オブジェクト (object) { “k”: 1 } キーと値の集合
配列 (array) [1, 2, 3] 順序付きの値の並び

逆に、JavaScriptには存在しても JSONでは使えない値 もあります。undefined・関数・Symbol・Date・NaN・Infinity はJSONのデータ型ではありません。これらを含むオブジェクトを文字列化すると、省略されたりnullに変換されたりするため注意が必要です（後述の JSON.stringify() の項で挙動を確認します）。

書き方の注意点とエスケープ

JSONは文法が厳格です。次の点を外すと解析エラーになります。

  • キーは必ずダブルクォートで囲む。シングルクォートやクォート無しのキーは不可です。
  • 末尾カンマは禁止。最後の要素のあとにカンマを置くとエラーになります。
  • コメントは書けない。// や /* */ はJSONでは無効です。
  • 文字列内の特殊文字はエスケープする。バックスラッシュを前置して表記します。

主なエスケープシーケンスは次のとおりです。\"（ダブルクォート）、\\（バックスラッシュ）、\/（スラッシュ）、\n（改行）、\r（復帰）、\t（タブ）、\b（バックスペース）、\uXXXX（Unicodeコードポイントの16進表記）。日本語などはそのまま記述してもUTF-8で問題なく扱えますが、制御文字は必ずエスケープが必要です。

JSON形式と他のデータ形式の比較（XML・CSV・YAML）

JSONは万能ではなく、用途によって他の形式が向く場面もあります。代表的なデータ形式との違いを押さえておくと、設計時の判断がしやすくなります。

形式 構造 可読性 主な用途
JSON 階層・配列 高い API・設定・データ交換
XML 階層・属性 やや低い 文書・複雑な仕様
CSV 表形式 高い 表データ・一括処理
YAML 階層 高い 設定ファイル

XMLはタグと属性で表現力が高い反面、記述が冗長で解析も重くなりがちです。CSVは表形式データに最適ですが、階層構造を表せません。YAMLはインデントで階層を表し人間に読みやすい一方、空白の扱いに敏感で解析が崩れやすい面があります。JSONはこれらの中間で、階層を扱えて軽量・厳格という扱いやすいバランスを持つため、データ交換の標準的な選択肢になっています。

JSON形式の主な用途と実例

JSONが実際にどこで使われているのかを知ると、学ぶ意義がはっきりします。代表的な用途は次のとおりです。

JavaScriptでJSONを扱う：JSON.parse()とJSON.stringify()

JavaScript（およびTypeScript）には、JSONを扱う2つの標準メソッドが用意されています。JSON.parse() はJSON文字列をオブジェクトに変換（パース／デシリアライズ）し、JSON.stringify() はオブジェクトをJSON文字列に変換（シリアライズ）します。この往復がデータ送受信や保存の基本になります。

JSON.parse()：文字列をオブジェクトに変換

外部から受け取ったJSON文字列を、プログラムで扱えるオブジェクトに変換します。

const jsonString = '{"name":"Bob","age":32,"isStudent":false}';
const user = JSON.parse(jsonString);

console.log(user.name);      // Bob
console.log(user.age);       // 32
console.log(user.isStudent); // false

JSON.stringify()：オブジェクトを文字列に変換

逆に、オブジェクトをJSON文字列に変換します。APIへの送信やローカルストレージへの保存に使います。

const user = { name: "Alice", age: 28, hobbies: ["reading", "gaming"] };

const jsonString = JSON.stringify(user);
console.log(jsonString);
// {"name":"Alice","age":28,"hobbies":["reading","gaming"]}

ここで先述の「JSONで使えない値」の挙動を確認しておきましょう。次のように undefined と関数は出力から省略され、NaN と Infinity は null に変換されます。

console.log(JSON.stringify({ a: undefined, b: function () {}, c: NaN, d: Infinity, e: 1 }));
// {"c":null,"d":null,"e":1}

エラーハンドリング（try-catch）

JSON.parse() は、渡された文字列が正しいJSONでない場合に例外（SyntaxError）を投げます。外部から受け取るデータは壊れている可能性があるため、必ず try-catch で囲むのが安全です。

const invalid = '{"name":"Dave", age:25}'; // キーがクォートされておらず不正

try {
  const user = JSON.parse(invalid);
  console.log(user);
} catch (error) {
  console.error("JSONの解析に失敗しました:", error.name); // SyntaxError
}

意外と知られていないJSON.stringify()の便利機能（replacer・space）

JSON.stringify() は第2引数（リプレイサー）と第3引数（スペース）を取れます。これらを使うと、出力するプロパティを絞り込んだり、人間に読みやすい形に整形したりできます。基本だけ覚えてここまで使いこなしていないケースが多い、実用性の高い機能です。

リプレイサー関数（第2引数）でプロパティを除外・変換

第2引数に関数を渡すと、各プロパティに対して呼び出され、戻り値が出力に反映されます。undefined を返したプロパティは出力から除外されます。パスワードなど出力したくない項目のフィルタリングに便利です。

const user = { name: "Bob", age: 35, password: "secret" };

const jsonString = JSON.stringify(user, (key, value) => {
  if (key === "password") {
    return undefined; // passwordを除外
  }
  return value;
});

console.log(jsonString); // {"name":"Bob","age":35}

第2引数には配列を渡すこともでき、その場合は「出力を許可するキーの一覧（ホワイトリスト）」として機能します。

const product = { id: 1, name: "Laptop", price: 1000, secret: "x" };

console.log(JSON.stringify(product, ["id", "name", "price"]));
// {"id":1,"name":"Laptop","price":1000}

スペース引数（第3引数）で見やすく整形

第3引数にインデント幅（数値）またはインデント文字（文字列）を渡すと、改行とインデントが入った読みやすい形式で出力されます。デバッグやログ、設定ファイルの書き出しに役立ちます。

const user = { name: "Eve", age: 22, hobbies: ["reading", "traveling"] };

console.log(JSON.stringify(user, null, 2));
/*
{
  "name": "Eve",
  "age": 22,
  "hobbies": [
    "reading",
    "traveling"
  ]
}
*/

リプレイサーとスペースを組み合わせる

2つの引数は同時に使えます。不要なプロパティを除外しつつ、整形した状態で出力できます。

const user = { name: "Frank", age: 29, password: "supersecret" };

const jsonString = JSON.stringify(user, (key, value) => {
  return key === "password" ? undefined : value;
}, 2);

console.log(jsonString);
/*
{
  "name": "Frank",
  "age": 29
}
*/

TypeScriptでJSONを型安全に扱う

APIから取得したJSONをそのまま使うと、プロパティ名のタイプミスや想定外の構造に気づけず、実行時エラーの原因になります。TypeScriptで「JSONがどんな形か」を型として定義しておくと、エディタ補完やコンパイル時チェックの恩恵を受けられ、安全性と開発効率が大きく向上します。TypeScript自体の基礎は TypeScriptの基本的な特徴とJavaScriptとの違いについての徹底解説 もあわせてご覧ください。

interfaceと型エイリアスでJSONの型を定義する

JSONの構造は、interface または型エイリアス（type）で表現します。ネストした構造は型を分けて定義すると見通しが良くなります。型注釈や型推論の基礎は TypeScriptの基本的な型と型推論、型注釈について で解説しています。

interface Address {
  street: string;
  city: string;
}

interface User {
  name: string;
  age: number;
  address: Address;
}

const user: User = {
  name: "John Doe",
  age: 30,
  address: { street: "123 Main St", city: "Anytown" },
};

取得したJSONに型をつける

外部APIから受け取ったデータに型を当てることで、後続の処理が型安全になります。fetch の戻り値に型を指定する例です。

interface User {
  id: number;
  name: string;
  email: string;
}

const getUser = async (id: number): Promise => {
  const response = await fetch(`https://api.example.com/users/${id}`);
  const user: User = await response.json();
  return user;
};

getUser(1).then((user) => {
  console.log(user.name);  // 補完が効き、タイプミスはコンパイル時に検出される
  console.log(user.email);
});

なお response.json() の戻り値は本来 any（厳密には実行時の値は検証されない）であるため、外部データを信頼しきらず、重要な処理の前にはバリデーションライブラリ等で実データの形を検証すると、より堅牢になります。

まとめ

JSON形式は、キーと値のペアを基本に、6つのデータ型（文字列・数値・真偽値・null・オブジェクト・配列）だけで構成される、軽量で言語に依存しないデータ交換フォーマットです。書き方のルール（キーはダブルクォート必須、末尾カンマ・コメント不可）を押さえ、JavaScriptでは JSON.parse() と JSON.stringify() で文字列とオブジェクトを相互変換できます。さらにリプレイサー・スペース引数で出力を制御し、TypeScriptで型を定義すれば、安全で読みやすいデータ処理が実現できます。まずは基本構造を手元で書いてみることが、JSONを使いこなす近道です。

よくある質問（FAQ）

JSONの読み方は？

「ジェイソン」と読みます。JavaScript Object Notation の頭文字を取った名称です。

JSONとXMLの違いは何ですか？

どちらも構造化データを表現できますが、JSONは波カッコと角カッコによる簡潔な記法で軽量なのに対し、XMLは開閉タグと属性を使うため表現力は高い反面、記述が冗長になりがちです。Web APIのデータ交換では軽量なJSONが主流です。

JSONにコメントは書けますか？

標準のJSONではコメントを書けません。設定ファイルなどでコメントを使いたい場合は、コメントを許容する拡張仕様（JSON5やJSONCなど）や、別途YAMLの利用を検討します。

JSONファイルの拡張子は何ですか？

「.json」です。中身はテキストなので、テキストエディタやVisual Studio Codeなどで編集できます。

JSONで日付はどう扱いますか？

JSONに日付型はありません。一般的にはISO 8601形式の文字列（例："2026-06-17T09:00:00Z"）として保持し、読み込んだ側で日付オブジェクトに変換します。

関連記事

資料請求

RELATED POSTS 関連記事

一覧へ戻る