JSONの基礎

JSONとは

JSON（ジェイソン）は「JavaScript Object Notation」の略で、テキスト形式のデータフォーマットの1種です。
JSON自体はデータの書き方の決め事を指すため、内容としては通常のテキストです。

具体的には、以下のようなフォーマットで書かれたデータをJSON形式のデータと呼びます。
他にも同じようなテキスト形式のデータフォーマットにはXMLがありますが、JSONは通常のテキストとXMLの中間に位置するイメージです。

JSON データの記述例

[
	{
		"title": "K331",
		"category": "Classic",
		"release_date": "2019-11-25"
	},
	{
		"title": "Paradise",
		"category": "Rock",
		"release_date": "2019-12-18"
	}
]

上記のデータは3種類のデータ「title」、「category」、「release_date」を持つデータが2つ記述されています。

ではなぜデータをJSON形式にするかというと、異なるプログラミング言語間でデータのやりとりを行う際に、共通のデータフォーマットがあると便利だからです。
例えばJavaScriptはブラウザで実行されることが多いですが、APIを呼び出して結果（レスポンス）のデータをJSON形式で受け取るようなケースが多くあります。

通信先のサーバーにあるシステムはJavaScript以外のプログラミング言語（Python、C、C++、PHP、Rubyなど）で構築されていることが多いです（サーバーサイドもJavaScriptで構築されているケースもあります）。
このとき、通信先がどんなプログラミング言語だろうとやり取りするデータフォーマットが決まっていれば、お互いにデータフォーマットを気にせずに処理を実行することができるというわけです。

JSONの書き方

JSON形式のデータの書き方は、JavaScriptnのObjectの書き方に準拠しています。
まず、もっともシンプルな場合をみていきましょう。

JS コード例

const data = {
	"title": "Paradise",
	"category": "Rock",
	"release_date": "2019-12-18"
};

// データのアクセス方法1
console.log(data.title); // Paradise

// データのアクセス方法2
console.log(data['title']); // Paradise

上記のように、JavaScriptのオブジェクトと作成するときと同様に「プロパティ名:値」をセットで指定します。
値のアクセス方法もオブジェクトと同じで２パターンあります。

値にはオブジェクト（Object）、配列（Array）、文字列（String）、数値（Integer）、真偽値（Boolean）、NULLを指定することができます。
例として、以下のように異なる種類のデータを混在させることも可能です。

JavaScript コード例

const data = {
  "title": "文字列",
  "object": {
    "int": 1520,
    "str": "Country",
    "null": null,
    "array": ["v1","v2","v3"]
  }
};

console.log(data.object.array[1]); // v2

複数のデータを記述するときは、オブジェクト（{、}）を配列（[、]）で囲む形で記述します。

JSON データの記述例

const data = [
  {
    "title": "K331",
    "category": {
      "category1": "Classic",
      "category2": "Country",
      "category3": "Pops"
    },
    "release_date": "2019-11-25"
  },
  {
    "title": "Paradise",
    "category": "Rock",
    "release_date": "2019-12-18"
  },
  {
    "title": "Baby",
    "category": "Pops",
    "release_date": "2020-01-07"
  }
];

console.log(data[0].title); // K331
console.log(data[1].title); // Paradise
console.log(data[0].category.category2); // Country

JSON形式のデータをJavaScriptで扱う

ここまでJSON形式のデータの書き方をみてきましたが、JavaScriptでオブジェクト（Object）形式のデータの扱い方と同じことをしてきました。
しかし、実際に送信＆受信でやり取りするJSON形式のデータは文字列（String）にする必要があります。

JavaScriptから他のプログラミング言語へ送信するときは「オブジェクト（Object）をJSON形式の文字列（String）に変換」が必要になり、反対にデータを受け取るときは「JSON形式の文字列（String）をオブジェクト（Object）に変換」する必要があります。

JavaScriptのオブジェクトをJSON形式データに変換する

JavaScriptでオブジェクト（Object）形式のデータをJSON形式のデータに変換するときは、JSON.stringifyメソッドを使います。

JS コード例

// JSON形式に変換するデータ
const data = [
  {
    "title": "K331",
    "category": {
      "category1": "Classic",
      "category2": "Country",
      "category3": "Pops"
    },
    "release_date": "2019-11-25"
  },
  {
    "title": "Paradise",
    "category": "Rock",
    "release_date": "2019-12-18"
  },
  {
    "title": "Baby",
    "category": "Pops",
    "release_date": "2020-01-07"
  }
];

// JavaScriptのオブジェクトをJSON形式のデータに変換する
let json_data = JSON.stringify(data);

JSON.parseメソッドに変換したいJavaScriptnのオブジェクト（Object）を渡すと、JSON形式の文字列（String）を取得することができます。
変数json_dataにはJSON形式のデータが入るので、Ajaxのメソッドにこの変数の値をセットして送信すればJSON形式のデータを送信することができます。

JSON形式データをJavaScriptのオブジェクトに変換する

JSON形式のデータをJavaScriptでオブジェクト（Object）形式のデータに変換するときは、JSON.parseメソッドを使います。

JS コード例

// JSON形式のデータをJavaScriptのオブジェクトに変換する
let data = JSON.parse(json_data);

// コンソールに出力
console.log(data);
// 0: {title: "K331", category: "Classic", release_date: "2019-11-25"}
// 1: {title: "Paradise", category: "Rock", release_date: "2019-12-18"}
// 2: {title: "Baby", category: "Pops", release_date: "2020-01-07"}

JSON.parseメソッドに変換したいJSON形式のデータを渡すと、JavaScriptのオブジェクト（Object）を取得することができます。

以上、JSONについてと基本的な扱い方についてでした。
JSONについて、より詳しく知りたい方は下記の公式サイトをご覧ください。
JSON 公式サイト

こちらの記事は役に立ちましたか？

コメントありがとうございます！
運営の参考にさせていただきます。