JS のオブジェクト

1. JavaScriptのオブジェクトとは？

オブジェクト（Objects）とは、値（Values）と関数（Functions）の両方を格納できる変数です。

• 値は、キー:値（key:value）のペアとして格納され、これをプロパティ（Properties）と呼びます。
• 関数は、キー:関数（key:function()）のペアとして格納され、これをメソッド（Methods）と呼びます。

2. 現実世界の例え

現実世界では、対象物（Subjects）をオブジェクトとして説明することができます（車、人、家など）。

2.1 車（Car）オブジェクト

車種が違っても、持っているプロパティは共通していますが、プロパティの値は車ごとに異なります。
また、車種が違っても持っているメソッドは共通していますが、メソッドが実行されるタイミングは異なります。

3. オブジェクトの具体例

以下のコード例では、car という名前のオブジェクトに、多くの値（フィアット, 500, ホワイト）を代入しています。

3.1 コード例

const car = {
  type: "フィアット",
  model: "500",
  color: "ホワイト"
};

• type、model、color はプロパティです。
• "フィアット"、"500"、"ホワイト" はプロパティの値です。

4. オブジェクトリテラル

オブジェクトリテラル（Object Literal）とは、波括弧（{}）の中に、ゼロ個以上のキー:値（key:value）ペアを記述してオブジェクトのプロパティを定義する、簡潔な構文のことです。

{firstName:"ジョン", lastName:"ドウ", age:50, eyeColor:"ブルー"}

5. JavaScriptオブジェクトの作成方法

オブジェクトリテラルは、JavaScriptオブジェクトを定義するための最もシンプルで一般的な方法です。
以下の例はすべて、同じJavaScriptオブジェクトを作成しています。

5.1 例 1

// オブジェクトの作成
const person = {firstName:"ジョン", lastName:"ドウ", age:50, eyeColor:"ブルー"};

スペースや改行は重要ではありません。オブジェクトリテラルは複数行にわたって記述することも可能です。

5.2 例 2

// オブジェクトの作成
const person = {
  firstName: "ジョン",
  lastName: "ドウ",
  age: 50,
  eyeColor: "ブルー"
};

また、空のオブジェクトを作成してから、後でプロパティを追加することもできます。

5.3 例 3

// オブジェクトの作成
const person = {};

// プロパティの追加
person.firstName = "ジョン";
person.lastName = "ドウ";
person.age = 50;
person.eyeColor = "ブルー";

オブジェクトを宣言する際は、const キーワードを使用することを推奨します。

6. new キーワードの使用

6.1 例 4

new Object() を使用して新しいJavaScriptオブジェクトを作成します。

// オブジェクトの作成
const person = new Object({
  firstName: "ジョン",
  lastName: "ドウ",
  age: 50,
  eyeColor: "ブルー"
});

実際には new Object() を使用する必要はありません。
可読性、シンプルさ、そして実行速度の観点から、オブジェクトリテラルを使用してください。

7. オブジェクトプロパティ

オブジェクトのプロパティには、2つの方法でアクセスできます。

• ドット記法 (Dot notation)
• ブラケット記法 (Bracket notation)

7.1 ドット記法

objectName.propertyName

person.firstName;

7.2 ブラケット記法

objectName["propertyName"]

person["firstName"];

8. JavaScriptオブジェクトのメソッド

オブジェクトはメソッドを持つこともできます。
オブジェクトメソッドとは、オブジェクトに対して実行できるアクションのことです。
これらは、プロパティの値として格納された関数定義です。

8.1 コード例

const person = {
  firstName: "ジョン",
  lastName : "ドウ",
  age      : 50,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

オブジェクトメソッド内では、this はそのオブジェクトを参照します。
上記の例では、this は person オブジェクトを参照しています。

9. まとめ

• オブジェクトは、プロパティとメソッドのためのコンテナである。
• プロパティとは、キー:値（key:value）のペアとして格納された、名前付きの値である。
• メソッドとは、キー:関数（key:function()）のペアとして格納された関数である。

10. JavaScriptにおいてオブジェクトは「王」である

JavaScriptにおいて、オブジェクトを理解することは、JavaScriptそのものを理解することと同義です。
JavaScriptでは、ほとんど「すべて」がオブジェクトです。

• オブジェクトはオブジェクトです
• Math（数学関数）はオブジェクトです
• Date（日付）はオブジェクトです
• Array（配列）はオブジェクトです
• Map（マップ）はオブジェクトです
• Set（セット）はオブジェクトです
• RegExp（正規表現）はオブジェクトです
• Error（エラー）はオブジェクトです

JavaScriptにおけるすべての値は、プリミティブを除き、すべてオブジェクトです。

11. JavaScriptのプリミティブ

プリミティブデータ型（Primitive data type）とは、単一のプリミティブ値のみを格納できるデータ型のことです。
JavaScriptでは、以下の7種類のプリミティブ型が定義されています。