HOME > Learning Place >  No.4 オブジェクトとJSON

No.4 オブジェクトとJSON

前回は、「No.3 論理値と関数の基本」を学びました。

オブジェクト – プロパティ

JavaScriptで非常に重要な要素の1つであるオブジェクトを生成する方法はいくつかありますが、まずは一番基本的な new演算子 を利用して生成する場合は下記のコードのようになります。

1
var obj = new Object();

オブジェクトの一番の特徴は、自分が保持しておきたいデータを自由に付与することが出来、付与したデータは付与元となるオブジェクトのプロパティと呼ばれます。

実際に上記の説明をコードにおこしてみると次のようになります。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 変数名objに、新しく生成したオブジェクトを入れる
var obj = new Object();
 
// objに自分の名前データを付与する
//(nameという名前のプロパティを新たに付与している)
obj.name = '山田 太郎';
 
// objに自分の年齢データを付与する
//(ageという名前のプロパティを新たに付与している)
obj.age = 26;
 
// 設定した各プロパティにアクセスしてみる
console.log(obj.name);  // '山田 太郎'
console.log(obj.age);   // 26
img_slp_no4_01 img_slp_no4_02

JavaScriptではオブジェクトに対して . を利用し、名前を付与することでプロパティを簡単に定義することができるのです。

オブジェクトのプロパティはJavaScriptにおける変数とほぼ同じ振る舞いをしますので、変数同様にプロパティの中に入れるデータは任意のデータ型を格納することが出来ます。

1
2
3
4
obj.func = function() {}; // 関数
obj.num = 10; // 数値
obj.bool = true; // 真偽値
obj.obj = new Object(); // オブジェクトのプロパティにオブジェクトを入れることも可能
img_slp_no4_03

オブジェクト – メソッド

上記の例の一番最初に、オブジェクトのプロパティに関数を入れています。
JavaScriptではオブジェクトのプロパティに関数を付与した場合、その関数は付与元となるオブジェクトのメソッドというような呼ばれ方をします。

呼び出し方は、プロパティとほぼ同じ形式で オブジェクト名.メソッド名() というような形式になります。

例として今まで何回か利用してきたと思いますが、console.log()が上記の説明の例になります。
この場合は、consoleオブジェクトに設定されているlogメソッドを利用していることになりますね。

1
2
3
4
5
6
typeof console // "object"
typeof console.log // "function"
 
// イメージ的には下記のような感じです
var console = new Object();
console.log = function() {};

オブジェクト – 連想配列

オブジェクトは、連想配列にような使い方もできます。
通常の配列は次のような形ですが

1
2
3
4
5
var arr = new Array('a', 'b', 'c', 'd');
console.log(arr[0]); // 'a'
console.log(arr[1]); // 'b'
console.log(arr[2]); // 'c'
console.log(arr[3]); // 'd'
img_slp_no4_05

オブジェクトであれば

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var arr = new Object();
 
// 次のように単純な数値ではなく、文字列を添え字として付与することが出来る
arr['a'] = 0;
arr['b'] = 1;
arr['c'] = 2;
arr['d'] = 3;
 
// 参照する際も同様に文字列でアクセスすることが可能です
console.log(arr['a']); // 0
console.log(arr['b']); // 1
console.log(arr['c']); // 2
console.log(arr['d']); // 3
 
// なので下記のような記述の仕方も可能
console['log']('HOGE'); // 'HOGE'

この機構は様々な用途に利用でき、非常に便利なので是非覚えておいてください。

img_slp_no4_06

オブジェクトリテラル

これまでやってきたオブジェクトの生成方法は次のようなやり方でした

1
2
3
4
5
// 生成
var obj = new Object();
// プロパティ設定
obj.name = 'Yamada Tarou';
obj.age = 23;

JavaScriptではオブジェクトの定義を簡単に行うことが出来る「オブジェクトリテラル」という記述方法を利用することが出来ます。実際にどのような記述方法かというと…

1
2
3
4
var obj = {
    プロパティ名:,
    プロパティ名:};

というような定義方法になります。

今まで使っていた new演算子 を用いた定義と見比べてみると

1
2
3
4
5
6
7
8
9
10
// new演算子を利用した定義
var obj = new Object();
obj.name = 'Yamada Tarou';
obj.age = 23;
 
// オブジェクトリテラルを利用した定義
var obj = {
    name: 'Yamada Tarou',
    age: 23
};

コードが短すぎてイマイチ分かりづらいかもしれませんが、このようにオブジェクトの定義を簡潔に記述することが可能になります。 また、オブジェクト内でさらにオブジェクトがネストするといった場合も

1
2
3
4
5
6
7
8
9
10
11
var obj = {
    name: 'Yamada Tarou',
    age: 23,
    status: {
        weight: 55
    },
    // メソッドの定義も一緒に出来る!
    speak: function() {
        console.log('Hi!!');
    }
};

といった具合に記述することが出来ます。

img_slp_no4_07

ひとまずオブジェクトの説明はここまでになります。
次はこのオブジェクトの作りに非常に似ている JSON というデータ記述言語について見ていきます。

JSON(JavaScript Object Notation)

もう名前からしてオブジェクト臭がプンプンしてきますね。

JSONとは

JavaScriptオブジェクトの記述法をベースとした軽量なデータ記述言語です。
名称に JavaScript Object などと入っておりますが、JSON自体はJavaScriptに限らず様々なソフトウェア・プログラム言語間におけるデータの受け渡しに使用できるよう設計されています。

今回は意外と見落としがちなオブジェクトJSONの違いについて少し触れていきます。
まずそれぞれの記述例が次になります。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// オブジェクト
{
    name: 'Yamada Tarou',
    sample: true,
    id: 100,
    product: 'ABCD-001',
    price: function() {
        return 200 * 1.05;
    }
}
// JSON
{
    "name": "Yamada Tarou",
    "sample": true,
    "id": 100,
    "product": "ABCD-001",
    "price": function() {
        return 200 * 1.05;
    }
}

似ておりますね 🙁
ただJSONには記述方法にいくつか決まりがあります。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// まずプロパティ名は原則ダブルコーテーションで括る必要があります
{
    "プロパティ名": 
}
// 文字列などについてもプロパティ名同様にダブルコーテーションで括る
{
    "プロパティ名": "値(文字列)"
}
// 関数定義についてはそもそもJSONでは不可能
{
    "プロパティ名": function() {
        return 200 * 1.05;
    }
}

なので、上記の例にあるJSONをルールに沿って直すとすると

1
2
3
4
5
6
7
8
// JSON
// 関数定義は行えないので"price"を削除
{
    "name": "Yamada Tarou",
    "sample": true,
    "id": 100,
    "product": "ABCD-001"
}

のようになります 🙂

img_slp_no4_08

また、実際にサーバーからJSONを取得した後のJavaScript側でのデータの扱い方については、もちろんオブジェクト操作時と同じ形でデータを取り扱うことが可能なため、JavaScriptとJSONの相性は非常に良いです。

今回はここまでです!
次回は配列についてやっていこうと思います!

Learning Placeトップに戻る

PAGETOP