# JavaScript 基礎編11(学習日:9/25)(JSON) ## JSON ### JSONとは JSON(JavaScript Object Notation)とは、JavaScriptのオブジェクトリテラルをベースとした軽量データフォーマットである。 ECMA-404で標準化されている。 人間による読み書きが容易でマシンも簡単にパースや生成が行える。 多くのプログラミング言語内でJSONが利用できる。 基本仕様はJavaScriptに準じるが、一部の構文に違いがある。 (例)オブジェクトリテラルのキーは必ず""で囲む、小数点やゼロから始まる数値が使えない、等 ### JavaScriptでのJSON JavaScript内でのJSON利用には、JSONオブジェクトを利用する。 #### パース(解析) JSON→JavaScript JSONをJavaScript内で利用できるよう解析することをパースという。 JSON.parse(jsonコード)を用いて、JSONからJavaScriptへと変換する。 変換不可能の場合は例外が投げられる。 ```javascript= const json = '{"id":1, "name":"Midosuji"}' const obj = JSON.parse(json); console.log(obj.id);//=>1 console.log(obj.name);//=>"Midosuji" //パース不可能な場合 const notJson = "not json value"; try{ const json2 = JSON.parse(notJson); }catch(error){ console.log("パースできませんでした。") } ``` #### stringify JavaScript→JSON JavaScriptからJSONへ変換するときは、JSON.stringify(JavaScriptコード)を用いる。 * 第一引数(必須) 第一引数は変換したいJavaScriptコードを記述する。 * 第二引数(オプション・replacer引数) 第二引数はreplacer引数と呼ばれる関数・配列を入力できる。 replacer引数に関数を渡すと、プロパティのキーと値が引数に入る。 その値によって関数の戻り値を変化させることができる。 ```javascript= const obj = { id: 1, name: "Midosuji", bio: null }; const replacer = (key, value) => { if (value === null) { return undefined; } return value; }; console.log(JSON.stringify(obj, replacer)); // => '{"id":1,"name":"Midosuji"}' ``` * 第三引数(オプション・space引数) 第三引数はspace引数と呼ばれるインデント設定が入力できる。 インデントするスペース数あるいはタブ文字(t)が入力できる。 第三引数設定ありで第二引数設定なしの場合、第二引数にはnullを入力する。 ```javascript= const obj = { id: 1, name: "Midosuji" }; // replacer引数を使わない場合はnullを渡して省略するのが一般的です console.log(JSON.stringify(obj, null, 2)); /* { "id": 1, "name": "Midosuji" } */ ``` stringfyで変換できないものもある。 * 関数、undefined、Symbol→変換されない(配列の場合はnull) * RegExp、Map、Set→{}(空オブジェクト) ※toJSONメソッドは、既定の文字列変換ではなく、toJSONメソッドの返り値を用いる。 ###### tags: `JavaScript`