[JSON]【基礎後編】4つのプリミティブ型と2つの構造化型

どうも。つじけ（tsujikenzo）です。このシリーズでは、JSONについて、全3回でお送りします。（2021年11月に大幅にリニューアルしました）

前回のおさらい
1. 今日のアジェンダ
JSONで取り扱う型
1. 型のルール
4つのプリミティブ型
2つの構造化型
まとめ
1. このシリーズの目次

前回のおさらい

前回は、【基礎前編】JSONとは何か、をお届けしました。「JSONはテキストデータなんだ」 ということでしたね。

JSONの概要はこのように書かれていました。

JSONは、JavaScriptのオブジェクトリテラルから派生しています
JSONは、軽量でテキストベースの言語に依存しないデータ交換形式
JSONは、4つのプリミティブ型(文字列、数値、ブール値、ヌル(null))と2つの構造化型(オブジェクトと配列)を表すことができます

今回は、3つ目の、「4つのプリミティブ型と2つの構造化型」をお届けします。

今日のアジェンダ

JSONで取り扱う型
4つのプリミティブ型
2つの構造化型

JSONで取り扱う型

JSONでは、JavaScriptの、下記の6つの型（4つのプリミティブ型と2つの構造化型）を使用できます。

文字列 (“…”)
数値 (123, 12.3, 1.23e4 など)
ヌル値 (null)
ブール値 (true, false)
オブジェクト ({…})
配列 ([…])

逆にいうと、Map型やSet型のような型は使えません。（組み込みオブジェクトのメソッドを使用すると例外が発生する）

型のルール

JSONは、JavaScriptの部分集合です。JSONではあるが、JavaScriptではない、ということがあり得ません。

JavaScriptの4つのプリミティブ型(文字列、数値、ブール値、ヌル(null))には、それぞれ決められたルールがあります。

文字列型・・・UTF-8でエンコードしたUnicode文字列でなければならない（MUST）。サロゲートペア（4バイト文字）も使用可能。
数値型・・・IEEE754に準拠した64ビット倍精度浮動小数点数でなければならない
ブール型・・・true/falseは小文字でなければならない

気を付けなければならないのは、文字列型はダブルクォーテーションで囲まなければならないという点です。

JavaScriptで文字列をリテラルに表記する場合は’シングルクォーテーション、”ダブルクォーテーション、`バックティックという3種類の方法がありましたが、JSON内部で文字列を扱うさいは、ダブルクォーテーションで囲む必要があります。

　//配列の生成は、new演算子でもリテラルでもかまわない
  const array = new Array('["Tom", "Bob", "John"]');
  const arrayLiteral = '["Tom", "Bob", "John"]';

  console.log(JSON.parse(array)); //	[ 'Tom', 'Bob', 'John' ]
  console.log(JSON.parse(arrayLiteral)); // 	[ 'Tom', 'Bob', 'John' ]

  //ダブルクォーテーションでなければならない
  const singleLiteral = "['Tom', 'Bob', 'John']";
  // console.log(JSON.parse(singleLiteral)); //SyntaxError: Unexpected token ' in JSON at position 1


  //オブジェクトの生成は、new演算子でもリテラルでもかまわない
  const object = new Object('{"num1":1, "num2":2, "num3":3}');
  const objectLiteral = '{"num1":1, "num2":2, "num3":3}';

  console.log(JSON.parse(object)); //{ num1: 1, num2: 2, num3: 3 }
  console.log(JSON.parse(objectLiteral)); //{ num1: 1, num2: 2, num3: 3 }

  //ダブルクォーテーションでなければならない
  const singleObject = "{'num1':1, 'num2':2, 'num3':3}";
  console.log(JSON.parse(singleObject)); //SyntaxError: Unexpected token ' in JSON at position 1

4つのプリミティブ型

くどいかもしれませんが、JSONはオブジェクトリテラルから派生した、テキストデータです。

この、オブジェクトリテラルというのは、JavaScriptのオブジェクトリテラルと、配列リテラルを指します。

つまり、JSONはまず、オブジェクトか、配列か、どちらかの構造である必要があります。

　//配列型
　const json = '["Tom", "Bob", "John"]'; //これは文字列です
  const jsonObject = JSON.parse(json);
  console.log(jsonObject[0]); //Tom ←インデックスで値にアクセスできるのは、オブジェクト（配列）になったから

　//オブジェクト型
  const objectLiteral = '{"num1":1, "num2":2, "num3":3}';　//これは文字列です
  const jsonObjectObject = JSON.parse(objectLiteral);
  console.log(jsonObjectObject.num1); //1　←プロパティで値にアクセスできるのは、オブジェクトになったから

そして、この2つの構造のなかで、4つのプリミティブ型（および2つの構造を含む）をあつかえる、というのがJSONの特徴です。

//改行してもいいようにバックティックを使います
  const json = `[
    "Tom",
  24,
  true,
  null,
  ["北海道","札幌市"],
  {"favorite":"Coffee"}
  ]`; //これは文字列です

  const jsonObject = JSON.parse(json);
  console.log(jsonObject[1]); //24
  console.log(jsonObject[4]); //[ '北海道', '札幌市' ]
  console.log(jsonObject[5]); //{ favorite: 'Coffee' }

  //改行してもいいようにバックティックを使います
  const objectLiteral = `{    
    "text":"hoge",    
    "number":100,    
    "bool":false,      
    "null":null,    
    "array":[1,2,3],    
    "object":{"favorite":"Coffee"}    
    }`; //これは文字列です

  const jsonObjectObject = JSON.parse(objectLiteral);
  console.log(jsonObjectObject.text); //hoge
  console.log(jsonObjectObject['array']); //[ 1, 2, 3 ]
  console.log(jsonObjectObject.object); //{ favorite: 'Coffee' }

JSONはテキストデータで、文字列を操作できるからといって、こういうことではないので、まちがえないよう理解しましょう。

const json = "hoge";
console.log(JSON.parse(json)); //SyntaxError: Unexpected token h in JSON at position 0

2つの構造化型

あとは、応用ですが、よく見かけるJSONは、構造化型が入れ子構造になっています。

オブジェクトに、オブジェクトや配列が入れ子になっている、というのはこのような状態です。

{
	"person001": {
      "name": "tsujike",
      "age": 20,
      "favorite": "coffee"
    },
    "person002": {
      "name": "Bob",
      "age": 35,
      "favorite":"apple",
      "address": ["北海道", "札幌市", "北区"],
    },
    "result": true
}

もし、リテラルにJSONを扱うばあいは、JSON文字列に変換して操作すると安心でしょう。（このコードでは、元がオブジェクトなので、意味がありませんが、理解しておきましょう）

  const obj = {
    "person001": {
      "name": "tsujike",
      "age": 20,
      "favorite": "coffee"
    },
    "person002": {
      "name": "Bob",
      "age": 35,
      "favorite":"apple",
      "address": ["北海道", "札幌市", "北区"],
    },
    "result": true
  };

  const json = JSON.stringify(obj);

  const jsonObject = JSON.parse(json);
  console.log(jsonObject['person002']['favorite']); //apple
  console.log(jsonObject.result); //true