2022年3月14日 JSON (JavaScript Primer) - ６時だョ!!全員集合!!

JSON

JavaScript Object Notationの略です。
JSONは、データ送信に用いる文字列フォーマットです。
JavaScriptのオブジェクトリテラルをベースに作られた軽量なデータフォーマットです。
Notation(ノーテーション)は表記という意味です。
オブジェクトリテラルのキーをダブルクォートで囲う必要があります。
JavaScriptのオブジェクトリテラル、配列リテラル、各種プリミティブ型の値を組み合わせたものです。
人間にとって読み書きが容易でマシンにとってパースや生成が容易です。
多くのプログラミング言語にJSONを扱う機能があります。

以下がJSONの例です。

{
    "object": {
        "number": 1,
        "string": "js-primer",
        "boolean": true,
        "null": null,
        "array": [1, 2, 3]
    }
}

JSON文字列をオブジェクトに変換する

const json = '{ "id": 1, "name": "yano" }';
const obj = JSON.parse(json);
console.log(obj.name); // => "yano"

JSON.parseメソッドに配列のJSONを渡すことで配列を返しています。

const json = "[1, 2, 3]";
console.log(JSON.parse(json)); // => [1, 2, 3]

オブジェクトリテラルの中をダブルクォーテーションを使用した場合、オブジェクトリテラルを囲うのはシングルクォーテーションにしないとエラーになります。もし外側もダブルクォーテーションで囲うなら以下の例のようにエスケープしなければいけません。

// エスケープした記述例
const json = "{\"id\": 1, \"name\": \"js-primer\" }";

// シングルクォートで解決
const json = '{ "id": 1, "name": "js-primer" }';

このような記述を避けるためにシングルクォーテーションを使用すると良いです。

JSON.parseメソッドは基本的にtry...catch構文を使用する

実際のアプリケーションJSONの主な用途として、外部のプログラムとデータを交換する用途がほとんどです。外部から送信されたデータが正しいJSONフォーマットあるとは限りません。そのため、例外をキャッチする処理を用意しておくことが好ましいでしょう。

const userInput = "not json value";
try {
    const json = JSON.parse(userInput);
} catch (error) {
    console.log("パースできませんでした");
}

オブジェクトをJSON文字列に変換する

JSON.stringifyメソッドは第一引数に与えられたオブジェクトをJSON形式の文字列に変換して返す関数です。
parseメソッドの逆の挙動をします。

const obj = { id: 1, name: "js-primer", bio: null };
console.log(JSON.stringify(obj)); // => '{"id":1,"name":"js-primer","bio":null}'

JSON.stringifyメソッドの第二引数(関数を渡す場合)

JSON.stringifyメソッドには第二引数を指定することができます。以下の例ではvalueがnullのプロパティを除外してJSONを返しています。

const obj = { id: 1, name: "js-primer", bio: null };
const replacer = (key, value) => {
    if (value === null) {
        return undefined;
    }
    return value;
};
console.log(JSON.stringify(obj, replacer)); // => '{"id":1,"name":"js-primer"}'

関数を渡した場合は引数にプロパティのキーと値が渡され、その返り値によって文字列に変換される際の挙動をコントロールできます。
replacer関数でnullを除外する操作をした上でのobjをJSON形式にしたものが返り値になります。
第二引数の関数であるreplacerでは繰り返し処理が行われます。

JSON.stringifyメソッドの第二引数(配列を渡す場合)

ホワイトリストとして扱われます。以下の例では配列の要素に、JSONとして渡したいオブジェクトのキーを指定しています。

const obj = { id: 1, name: "js-primer", bio: null };
const replacer = ["id", "name"];
console.log(JSON.stringify(obj, replacer)); // => '{"id":1,"name":"js-primer"}'

JSON.stringifyメソッドの第三引数(space引数)

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

const obj = { id: 1, name: "js-primer" };
// replacer引数を使わない場合はnullを渡して省略するのが一般的です
console.log(JSON.stringify(obj, null, 2));
/*
{
   "id": 1,
   "name": "js-primer"
}
*/

タブ文字でインデントした例

const obj = { id: 1, name: "js-primer" };
console.log(JSON.stringify(obj, null, "\t"));
/*
{
   "id": 1,
   "name": "js-primer"
}
*/

ダブルクォーテーションとシングルクォーションを使用する際のルール

const yui = "\"1\" + \"2\""

console.log(yui);

const yui2 = '"1" + "2"'
console.log(yui);

"1" + "2"
"1" + "2"

この例を頭に入れておくと良いです。

ダブルクォーテーションの中でダブルクォーテーションは使えません。
エスケープをすれば使えます。
外側をシングルクォーテーションにすれば問題ありません。

参考

JSON (JavaScript Primer)