第 11 回 JSON

本日の内容


このドキュメントは http://edu.net.c.dendai.ac.jp/ 上で公開されています。

11-1. JavaScript のデータ構造

JavaScript のデータの種類には主に次のものがあります。

  1. undefined, null
  2. false, true(論理値)
  3. 文字列
  4. 配列
  5. オブジェクト
  6. 関数

これらのデータのタイプをチェックするには、typeof 演算子を使うか、 Object.prototype.toString.call を使います。この他、配列に関しては Array.isArray が使えます。


var obj = [undefined, false,1,"a",null,[3,"b"],
	   {"t1":true, "t2":5, "t3":"c", "t4": [7,8],
	    "t5": {"t6":false, "t7":9, "t8":"d"}},()=>{}]; 
var test=[(x)=>x, (x)=> (typeof x),
	  (x)=>Object.prototype.toString.call(x),
	  Array.isArray, JSON.stringify];
for(var t of test){
    console.log(t.name);
    for(var i of  obj){
	console.log(t(i));
    }
    console.log('------');
}
実行例

undefined
false
1
a
null
[ 3, 'b' ]
{ t1: true,
  t2: 5,
  t3: 'c',
  t4: [ 7, 8 ],
  t5: { t6: false, t7: 9, t8: 'd' } }
[Function]
------

undefined
boolean
number
string
object
object
object
function
------

[object Undefined]
[object Boolean]
[object Number]
[object String]
[object Null]
[object Array]
[object Object]
[object Function]
------
isArray
false
false
false
false
false
true
false
false
------
stringify
undefined
false
1
"a"
null
[3,"b"]
{"t1":true,"t2":5,"t3":"c","t4":[7,8],"t5":{"t6":false,"t7":9,"t8":"d"}}
undefined
------

11-2. JSON

従来の手法

JavaScript には eval 関数という、文字列に対して、それをプログラム として解釈、実行する関数があります。 さらに、JavaScript は、関数を含め、様々なリテラルがあり、宣言文などの 文法に依存せずに、様々なデータ構造を式の中で定義できます。 そのため、複雑なデータ構造を定義する式を文字列で表現できれば、その 文字列を eval 関数で解釈してデータを取り出すことができます。 元々の JavaScript Object Notation(JSON)は、このようなアイディアで利用 されました。

例11-1


var s='{name: "a", value: 3}';      
eval("var obj = "+s);    

しかし、eval 関数はリテラルの解釈だけでなく、JavaScript のあらゆる 機能を実行してしまうため、通信で使用する場合、情報のすり替えにより 任意のコードを実行されてしまう危険性があります。

JSON

JSON という単語には JavaScript という名前が含まれていますが、今や 多くのプログラミング言語で使用できるデータ構造になっています。 そのため、 RFC 8259 と ECMA-404 で規格化されました。

規格として、扱うデータ構造として以下のものを指します。

そして、この定義で示されるものだけを表す文字列が JSON となります。

例11-2

null
10  
"abc"    
[3,"b",true]
{"name": "TDU", "value": 100 }

JavaScript ではこれらを扱うのに、2つのメソッドが用意されています。

JSON.parse
JSON文字列をオブジェクト化する
JSON.stringify
オブジェクトをJSON文字列化する

11-3. JSON演習

演習11-1

授業など、意味のあるデータ構造に関して、JSON の構造を設計しなさい

演習11-2

設計したデータ構造について、JSON のデータ例を複数作成しなさい

演習11-3

設計したデータ構造について、JSON のデータ例を複数作成しなさい

演習11-4

JSON の文字列を受け取り、それをデータ構造として解釈し、整形して出 力するJavaScript のプログラムを作りなさい

演習11-5

データ構造を入力させ、それをJSON 文字列として出力するWebアプリケー ションを作成しなさい

11-4. JSON演習解答

11-5. 参考文献

  1. ECMA-262 ECMAScript
  2. ECMA-404 JSON
  3. RFC 8259 The JavaScript Object Notation(JSON) Data Interchange Format

坂本直志 <[email protected]>
東京電機大学工学部情報通信工学科