オブジェクトの代入

今までに登場している物で言えば、連想配列や JSON 形式のデータがオブジェクトと呼ばれる。 データのひとかたまりをそう呼ぶんだなーと思ってもらえると良いかもしれない。

ちなみに細かいことを言うと、配列もオブジェクトの一種なんだって。

基本的な考え方

「キー」と「バリュー」の関係を抑えておこう。

「キー」は表札、「バリュー」は中身。プログラムの例でも key と value で表現されていることも多かったりする。

オブジェクトを作る

オブジェクトの代入の基本は {} を利用する方法。

const example = {
    "key": "value"
};

これで、example の key という名の下に value という文字列が入る。 キーについてはクォートを省略できるので、

const example = {
    key: "value"
};

でも同じ事。

複数を入れていきたい場合には、

const example = {
    key1: "value1",
    key2: "value2"
};

というような感じになる。

ちなみにキーに使えるのは変数と同じ条件の文字列。気をつけてね。

オブジェクトを参照する

オブジェクトの中身を扱うときには二つの記法がある。

ドット記法

const example = {
    key1: "value1",
    key2: "value2"
};

console.log( example.key2 );
// 出力内容: value2

ブラケット記法

const example = {
    key1: "value1",
    key2: "value2"
};

console.log( example["key2"] );
// 出力内容: value2

変数を使ってみるとどうなるか

一つ例を見て考えてみよう。

const name = "お名前";

const example = {
    name: name
};

console.log( example.name );
// 出力内容は...？

整理するとこんな処理になる。

1. name に「お名前が入る」

2. オブジェクトを example に代入する

3. オブジェクトの中身は name: name

4. キーは文字列表現として扱われるので name のまま

5. バリューはクォートされていないため変数扱い。つまりは「お名前」

という事で、 example.name を出力すると お名前 が出てくる事になるわけ。

今度は、インデックスに変数を使いたい場合。今回の例ではメリットを感じないかも知れないけど、時によって使える。

const index = "key3";

const example = {
    key1: "value1",
    key2: "value2",
    key3: "value3"
};

// どうしたらindexを利用してexampleから値を取り出せるだろうか？

答えは至って簡単。ブラケット記法を利用しよう。

console.log(example[index]);
// 出力内容: value3

変数の中身を添字に利用したいというシーンはよくあるけど、このやり方なら扱えそうだね。

複雑なオブジェクト

オブジェクトの中身は階層にすることができる。 今更だけど配列も二次元・三次元と組んでいくことができる。

const staff = {
    yamada: {
        name: "山田さん",
        gender: "male",
        age: 28
    },
    suzuki: {
        name: "鈴木さん",
        gender: "female",
        age: 26
    }
};

console.log( staff.yamada.name );
// 出力内容: 山田さん

配列の例だと

const example = [
    [ 1, 0 ],
    [ 2, 4 ],
    [ 5, 9 ]
];

console.log( example[2][1] );
// 出力内容: 9

こんな感じ。自分で書くことはあまりないと思うけど、受け取るデータがこうなってることはよくあるので憶えておこう。