JavaScript/JavaScriptのオブジェクト

概要

JavaScriptのオブジェクトは、プロパティ（キーと値のペア）を持つデータの集合です。オブジェクトは、値の集まりを格納し、操作するための主要なデータ構造です。オブジェクトは他のデータ型（プリミティブ型）とは異なり、参照型であるため、オブジェクト同士の比較や代入では参照がコピーされます。

オブジェクトの作成

JavaScriptでオブジェクトを作成する方法はいくつかあります。

オブジェクトリテラルによる作成

オブジェクトリテラルは、最も一般的なオブジェクト作成方法です。中括弧 {} を使ってプロパティを定義します。

const person = {
  name: "Alice",
  age: 25,
  greet: function() {
    console.log("Hello, " + this.name);
  }
};

ここで、personオブジェクトは name, age, greet というプロパティを持っています。

`new Object()` を使った作成

new Object() を使ってオブジェクトを作成することもできますが、この方法はあまり一般的ではありません。

const person = new Object();
person.name = "Bob";
person.age = 30;
person.greet = function() {
  console.log("Hello, " + this.name);
};

コンストラクタ関数を使った作成

オブジェクトを生成するためにコンストラクタ関数を使用することもできます。これにより複数のオブジェクトを効率的に作成できます。

function Person(name, age) {
  this.name = name;
  this.age = age;
  this.greet = function() {
    console.log("Hello, " + this.name);
  };
}

const person1 = new Person("Charlie", 35);
const person2 = new Person("Diana", 40);

プロパティのアクセスと操作

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

ドット記法

オブジェクトのプロパティを参照する最も簡単な方法はドット記法です。

console.log(person.name); // "Alice"
person.age = 26;

ブラケット記法

ブラケット記法を使用すると、動的にプロパティにアクセスすることができます。プロパティ名を文字列として指定する場合に便利です。

console.log(person["name"]); // "Alice"
const propName = "age";
console.log(person[propName]); // 26

オブジェクトのプロトタイプと継承

JavaScriptのオブジェクトはプロトタイプチェーンを通じて継承を行います。これは、オブジェクトが他のオブジェクトのプロパティを継承する仕組みです。

`proto`

__proto__はオブジェクトのプロトタイプを参照する特殊なプロパティです。

const animal = {
  eats: true
};

const rabbit = Object.create(animal);
console.log(rabbit.eats); // true

プロトタイプの使用

プロトタイプを利用してオブジェクトの共有プロパティを作成できます。

function Animal(name) {
  this.name = name;
}

Animal.prototype.speak = function() {
  console.log(this.name + " makes a noise.");
};

const dog = new Animal("Dog");
dog.speak(); // "Dog makes a noise."

オブジェクトのメソッド

オブジェクトに関数をメソッドとして追加することができます。

メソッドの定義

オブジェクトのプロパティとして関数を定義することができます。これにより、オブジェクトが動作を持つことができます。

const person = {
  name: "Eve",
  greet: function() {
    console.log("Hello, " + this.name);
  }
};

person.greet(); // "Hello, Eve"

短縮メソッド記法

ES6ではメソッド定義を短縮記法で記述することができます。

const person = {
  name: "Frank",
  greet() {
    console.log("Hello, " + this.name);
  }
};

person.greet(); // "Hello, Frank"

オブジェクトのコピーと比較

オブジェクトは参照型であるため、代入や比較の際に注意が必要です。

代入

オブジェクトを他の変数に代入すると、実際にはその参照がコピーされるだけです。したがって、元のオブジェクトと新しいオブジェクトは同じ参照を共有します。

const obj1 = { a: 1 };
const obj2 = obj1; // obj1とobj2は同じオブジェクトを参照
obj2.a = 2;
console.log(obj1.a); // 2

`Object.assign()`によるコピー

Object.assign()を使うことで、オブジェクトの浅いコピーを作成することができます。

const obj1 = { a: 1, b: 2 };
const obj2 = Object.assign({}, obj1);
obj2.a = 3;
console.log(obj1.a); // 1
console.log(obj2.a); // 3

比較

オブジェクト同士の比較は、参照の一致を確認します。

const obj1 = { a: 1 };
const obj2 = { a: 1 };
console.log(obj1 === obj2); // false（異なる参照）

オブジェクトの組み込みメソッド

JavaScriptのオブジェクトには便利な組み込みメソッドがいくつかあります。

`Object.keys()`

オブジェクトのプロパティ名を配列として取得します。

const person = { name: "George", age: 50 };
console.log(Object.keys(person)); // ["name", "age"]

`Object.values()`

オブジェクトの値を配列として取得します。

console.log(Object.values(person)); // ["George", 50]

`Object.entries()`

オブジェクトのプロパティ名と値を含む配列を取得します。

console.log(Object.entries(person)); // [["name", "George"], ["age", 50]]

まとめ

JavaScriptのオブジェクトは、複数の値を格納し、管理するための基本的な構造です。プロパティの操作や継承を活用することで、柔軟で効率的なコードを記述することができます。オブジェクトの理解は、JavaScriptを効果的に活用するための重要なステップです。

参考

概要