JSONを使ったオブジェクト(情報)の受け渡し

投稿日: 2016年8月28日 作成者: 関口郁夫

何かのアプリケーションを複数のプログラムで実現しようとすると、何かしら情報の受け渡しが必要になります。一番単純なのはテキスト形式のファイルですし、何かの構造を持たせようとするとカンマ区切りのテキストファイルが使われます。
カンマ区切りのテキストファイルはExcel同士であればお互いに情報をファイルに書いたり、ファイルから情報を読み込んだりすることが出来ます。しかし、一方がExcel以外のソフトウェアであればカンマ区切りの情報を読み書きする機能を新規に作らなければなりません。
これと同じようなことがサーバーサイドアプリケーションを開発する場合には多発します。サーバーサイドアプリケーションの大筋はクライアント(Webブラウザ側のJavascript）からのリクエストを元に、サーバー(PHPやJava)側でデータベースに接続し、その結果をクライアントに返す、という処理だからです。こうなると各言語がサポートしているJSON(Java Script Object Notation)書式の利用が効果的です。実際にはJSON形式で記述したテキスト形式のオブジェクト情報をevalという各言語がサポートしている関数で評価し、オブジェクト変数に代入すれば、オブジェクトが相手のソフトウェア上に生成できるわけです。
var オブジェクト変数名=eval(“(“+JSON情報+”)”);
※JSON書式の情報文字列をeval関数に渡す場合には文字括弧で囲みます。

JSON書式
オブジェクト指向的な言語では、さまざまなオブジェクトを生成し、そのプロパティに値を代入していきます。そのような時にJSONを使用することで、いろいろなプロパティを持ったオブジェクトを非常に簡単なコードで生成することができます。

【JSONの書式】
var 変数名 = {プロパティ名：プロパティの値，プロパティ名：プロパティの値，…｝
var employee = {name:"山田",age:30};の表記は
var employee = new Object();
employee.name = “山田”;
employee.age = “30”;

と同じであり、オブジェクト配列などになると、JSONを使用した方が、すっきりとした
記述になります。

var employees = [{name:"山田",age:30},{name:"鈴木",age:28}];

eval関数
eval関数とは、文字列をコードとして解釈して実行する関数です。eval関数に文字列を渡すと、その文字列がソースコードとしてそのまま実行されます。プログラムの中でeval関数を利用することで、実行するコードを動的に切り替えることができるようになります。

【eval関数】
eval( 文字列 )

つまり先ほどの例は、

var json1 = '{name:"山田",age:30}';
var employee = eval("("+json1+")");

と等価です。

JSON書式の文字列を使って各種オブジェクトを作成するサンプルプログラム

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<html>
<head><title>JSON書式の利用</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript">
function simpleJson(){
    var employee = {name:"山田",age:30};
    alert(employee.name + " : " + employee.age);
}
function varByJson(){
    debugWriteClear();
    debug("JSONで単体オブジェクトを作成");
 
    var employee = {name:"山田",age:30};
    debug(employee.name + " : " + employee.age);
}
 
function ArrayByJson(){
    debugWriteClear();
    debug("オブジェクト配列を作成");
    var employees = [{name:"山田",age:30},{name:"鈴木",age:28}];
    debug(employees[0].name + " : " + employees[0].age
    + "<br>" + employees[1].name + " : " + employees[1].age);
}
 
function objectCreateByEval(){
    debugWriteClear();
    debug("eval関数でJSON文字列を評価");
 
    debug("単体オブジェクトを作成");
    var json1 = '{name:"山田",age:30}';
    var employee = eval("("+json1+")");
    debug(employee.name + " : " + employee.age);
     
    debug("オブジェクト配列を作成");
    var json2 = '[{name:"山田",age:30},{name:"鈴木",age:28}]';
    var employees = eval("("+json2+")");
    debug(employees[0].name + " : " + employees[0].age
    + "<br>" + employees[1].name + " : " + employees[1].age);
}
 
function debug(str){
    document.getElementById("debug").innerHTML += "<br/>" + str;
}
 
function debugWriteClear(){
    document.getElementById("debug").innerHTML = "";
}
 
</script>
</head>
<body>
<input type="button" value="JSON書式" onclick="simpleJson()"/><br/>
<input type="button" value="単体オブジェクトを作成" onclick="varByJson()"/><br/>
<input type="button" value="オブジェクト配列を作成" onclick="ArrayByJson()"/><br/>
<input type="button" value="eval関数でJSON文字列を評価" onclick="objectCreateByEval()"/><br/>
<div id="debug"></div>
</body>
</html>
カテゴリー: Javascript パーマリンク