オブジェクトとは？オブジェクトについて説明します。

2020-07-21

JavaScriptの世界ではオブジェクトが王様です。この世界では、ほぼすべてがオブジェクトそのものか、もしくはオブジェクトのように振る舞います。オブジェクトを制するものはJavaScriptを制すると言って過言ではありません。

ここではオブジェクトの基本について説明してます。オブジェクトと聞いて難しく考える人がいるかと思います。しかし、実際のオブジェクトは「名前と値をもつプロパティを格納する入れ物」にすぎません。

オブジェクトとは
プロパティとは
オブジェクトからプロパティを取り出す
オブジェクトには関数もセットできる
結局、オブジェクトとは何か？

オブジェクトとは

オブジェクトを学ぶうえで次の一文を心に刻み込んでください。

「オブジェクトとは、名前と値をもつプロパティを格納する入れ物にすぎない」

オブジェクトとは「関連のあるデータと機能の集合」です。単純にデータの入れ物だと考えてください。また、オブジェクトは「連想配列」と呼ばれることもあります。

オブジェクトを使うことでデータをまとめて扱えうことができるようになります。

object.js

{}

オブジェクトを宣言するときは{ }で宣言します。オブジェクトの宣言方法はたったこれだけです。ちなみにオブジェクトは変数に格納することもできます。

オブジェクトを宣言したあとは末尾にセミコロンをつけ忘れないようにご注意ください。

プロパティとは

プロパティとはオブジェクトが持つ名前付きデータのことです。オブジェクトには「プロパティ」をセットできます。プロパティという名前はよく覚えておいてください。ここの理解は非常に重要ですので、しっかり覚えてください。

object.js

var obj = { name: "高橋大輔" }; // プロパティの key はname、value は高橋大輔
obj.name;　// これもプロパティ(`obj`オブジェクトのプロパティ)

プロパティの name の部分は「key」と呼ばれ、高橋大輔は「value」にあたります。それぞれの名称を覚えてください。

プロパティですが、変数とは異な概念なので、気をつけてください。性質は非常に似てますが一緒くたにしないでください。

また、オブジェクトにプロパティを追加する方法はいくつかあります。追加する方法はいくつかあるのでご紹介します。

プロパティの追加方法その１

object.js

// プロパティの追加方法１
var obj = { name: "takahashi daisuke", age: 35 };
obj; // {name: "takahashi daisuke", age: 35}

この追加方法はシンプルでオブジェクトの中にプロパティを指定することで値を追加できます。

プロパティの追加方法その２

object.js

// プロパティの追加方法２
var obj = {};
obj.name = "takahashi daisuke";
obj.age = 35;
obj; // {name: "takahashi daisuke", age: 35}

こちらの追加方法はそれぞれのプロパティの中に値をセットし、オブジェクトにアクセスして値を追加してます。

プロパティの追加方法その３

object.js

// プロパティの追加方法３
var name = "takahashi daisuke";
var age = 35;
var obj = { name, age };
obj; // {name: "takahashi daisuke", age: 35}

こちらの追加方法ではまず、変数にそれぞれの値を代入し、オブジェクトの中にkeyを宣言しプロパティの値にアクセスして追加してます。

JavaScriptは、自身に関連付けられたプロパティを持ちます。オブジェクトのプロパティはオブジェクトに関連付けられている変数と捉えることができます。

オブジェクトのプロパティは、オブジェクトに属するものという点を除けば、基本的に通常のJavaScript変数と同じようなものです。

オブジェクトからプロパティを取り出す

オブジェクトのプロパティを取り出す時は、. (ドット) を使います。

object.js

var obj = { 
  name: "高橋大輔", 
  age: 35, 
  company_name: "カブシキガイシャテスト"
};
console.log(obj.name); // 高橋大輔
console.log(obj.age); // 35
console.log(obj.company_name); // カブシキガイシャテスト

プロパティの中身をプログラム内で使用することを「取り出す」「アクセスする」「参照する」などと表現しますが意味はだいたい同じです。今は「同じ」だと思ってて問題ないです。

object.js

var obj = { 
  name: "深田恭子", 
  age: 39
};  
console.log(obj['name']); // 深田恭子
console.log(obj['age']); // 39

連想配列のkeyを指定して取り出す方法もあります。

object.js

var obj = { name: "高橋大輔" };
console.log(name); // undefined
console.log(obj.name); // 高橋大輔
var obj1 = { name: "高橋大輔" };
var obj2 = { name: "武田信玄" };
console.log(obj1.name); // 高橋大輔
console.log(obj2.name); // 武田信玄

プロパティの中身にアクセスするには、どのオブジェクトが持つプロパティかを指定する必要があります。

オブジェクトには関数もセットできる

オブジェクトには関数もセットできます。そして関数もオブジェクトです。オブジェクトのプロパティに関数(正確には関数オブジェクト)を追加できると覚えておいてください。

object.js

// obj が sayHello という プロパティ を持つ
var obj = { 
  sayHello: ...
};

// sayHello という key に対応する value が functionオブジェクト
var obj = { 
  sayHello: function() {
    console.log("こんにちは");
  }
};

// 関数を「参照」する
obj.sayHello;
// 関数を「実行」する
obj.sayHello();

追加した関数オブジェクトの中身を参照したり、関数そのものを実行することが可能です。「参照」と「実行」は言葉の意味としては同じように聞こえますが、プログラムの世界では違う挙動になるのでご注意ください。

結局、オブジェクトとは何か？

現時点では便利さが実感できないため、何に使うのか分からないと思います。使い道が分からない道具の使い方は人間は覚えられないものなので、まずは「オブジェクト」というデータをまとめるものがあるんだなくらいに考えておいてください。

あとはオブジェクトとプロパティという名前に慣れてください。JavaScriptを学習するうえでオブジェクトとプロパティの名前はよく出てきますのしっかりと覚えてください。