JavaScript

レシピ

JSON

JSONの基礎

JSON形式のデータについての基礎についてと、JavaScriptにおける基本的な取り扱い方法について解説します。

この記事のポイント

  • JSONは「データの書き方の決まり事」で、中身は通常の文字列(String)データ
  • JavaScriptから他のプログラミング言語へ送信するときはJSON形式の文字列(String)に変換する
  • 反対にJSON形式のデータを受け取ったときはJavaScriptのオブジェクト(Object)に変換する

目次

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の書き方に準拠しています。
まず、もっともシンプルな場合をみていきましょう。

JavaScript コード例

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

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

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

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

値にはオブジェクト(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メソッドを使います。

JavaScript コード例

// 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メソッドを使います。

JavaScript コード例

// 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 公式サイト

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

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

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