【JavaScript】JSON

概要

JavaScriptを学習、理解を深めるため「JavaScript Primer 迷わないための入門書」を読み、
理解した内容等を記載していく。

「【JavaScript】JavaScript入門一覧」に他の記事をまとめています。

この記事で理解できること

• JSONとは
• JSONで扱える値と型
• JSONオブジェクトの関連メソッド等の使用方法

JSON(JavaScript Object Notation)とは

• JavaScriptのオブジェクトリテラルをベースに作られた軽量なデータフォーマット。
• 多くのプログラミング言語がJSONを扱う機能を備えている。
• JSONでは、オブジェクトリテラルのキーを必ずダブルクォートで囲む必要がある。

JSONで値として扱える型

型	例	備考
文字列	文字列
数値	1、1.234	小数点から始まる or 0から始まるリテラルは× NGな例:「.1」「01234」
null	null
真偽値	true、false
オブジェクト	{ }
配列	[ ]

{
  "string": "文字列",
  "number": 123,
  "null": null,
  "bool": true,
  "obj": { "sub":
            { "sub_obj":
              { "key": "value" }
            }
          },
  "array": ["A", "B", "C"]
}

JSONオブジェクト

• JavaScriptでJSONを扱うには、ビルトインオブジェクトであるJSONオブジェクトを利用する。
• JSON形式の文字列とJavaScriptのオブジェクトを相互に変換するためのparseメソッドとstringifyメソッドが存在する。

parseメソッド

• JSON.parseメソッドは引数に与えられた文字列をJSONとしてパースし、結果をJavaScriptのオブジェクトとして返す。
• JSON形式でパースできない場合は、例外が投げられるためtry...catch構文で例外を処理することが推奨される。

// JSONはダブルクォートのみを許容するため、シングルクォートでJSON文字列を記述
const json = '{ "id": 1, "name": "taro" }';
const obj = JSON.parse(json);

console.log(obj);       // => { id: 1, name: 'taro' }
console.log(obj.id);    // => 1
console.log(obj.name);  // => taro

stringifyメソッド

• JSON.stringifyメソッドは、第一引数に与えられたオブジェクトをJSON形式の文字列に変換して返す関数。
• HTTP通信でサーバーにデータを送信する時や、 アプリケーションが保持している状態を外部に保存する時などに有用。
• stringifyメソッドにはオプショナルな引数が存在し、第二引数はreplacer引数、第三引数はspace引数とも呼ばれる。

const obj = { id: 1, name: "taro", hobby: null };
console.log(JSON.stringify(obj)); // => {"id":1,"name":"taro","hobby":null}

replacer引数

• 関数あるいは配列を渡すことができる。

関数を渡した場合

• 関数の引数にプロパティのキーと値に渡され、その返り値によって文字列に変換される際の挙動をコントロールできる。
• replacer引数の関数で値にundefinedが返されたプロパティは、変換後のJSONに含まれなくなる。

// プロパティ「hobby」の値が"baseball"の場合は除外する関数をreplacer引数として渡した例
const obj = { id: 1, name: "Taro", hobby: "baseball" };

const replacer = (key, value) => {
  if (value === "baseball") {
    // valueが"baseball"の場合はundefinedを返す
    return undefined;
  }
  
  return value;
};

const json = JSON.stringify(obj, replacer);
console.log(json); // => {"id":1,"name":"Taro"}

配列を渡した場合

• プロパティのホワイトリストとして使われ、 その配列に含まれる名前のプロパティだけが変換される。

// 配列(ホワイトリスト)にプロパティ「id」「name」を指定し、replacer引数として渡した例
const obj = { id: 1, name: "Taro", hobby: "baseball" };

const replacer = ["id", "name"];
const json = JSON.stringify(obj, replacer);
console.log(json); // => {"id":1,"name":"Taro"}

space引数

• 変換後のJSON形式の文字列を読みやすくフォーマットする際のインデントを設定できる。

const obj = { id: 1, name: "Taro", hobby: "baseball" };
const replacer = ["id", "name"];

// インデント6つでフォーマット
const json_indent6 = JSON.stringify(obj, replacer, 6);
console.log(json_indent6);
// {
//       "id": 1,
//       "name": "Taro"
// }

// 第二引数(replacer)は無しでインデント2つでフォーマット
const json_indent2 = JSON.stringify(obj, null, 2);
console.log(json_indent2);
// {
//   "id": 1,
//   "name": "Taro",
//   "hobby": "baseball"
// }

// 第二引数(replacer)は無しでタブでフォーマット
const json_tab = JSON.stringify(obj, null, "\t");
console.log(json_tab);
// {
// 	 "id": 1,
// 	 "name": "Taro",
// 	 "hobby": "baseball"
// }

toJSONメソッドを使ったシリアライズ

• あるオブジェクトがtoJSONメソッドを持っている場合、JSON.stringifyメソッドは既定の文字列変換ではなくtoJSONメソッドの返り値を使用する。
• 引数に直接渡されたときだけでなく引数のプロパティとして登場したときにも再帰的に処理される。
• 自作のクラスを特殊な形式でシリアライズする目的などに使われる。

// toJSONメソッドを保有しないオブジェクト
const obj = { 
  id: 1,
  name: "Taro",
  hobby: "baseball",
};

// toJSONメソッドを保有するオブジェクト
const hasToJsonMethodObj = { 
  id: 1,
  name: "Taro",
  hobby: "baseball",
  toJSON() {
    return "has toJSON method!!"
  }
};

console.log(JSON.stringify(obj));                // => {"id":1,"name":"Taro","hobby":"baseball"}
console.log(JSON.stringify(hasToJsonMethodObj)); // => "has toJSON method!!"

// オブジェクトリテラルでtoJSONメソッドを持つオブジェクトを表現し、引数として渡してみる
console.log(JSON.stringify({ name: "Taro", toJSON() { return "has toJSON method!!" }}));
// => "has toJSON method!!"