プログラミング

JavaScriptのオブジェクト完全ガイド

最終更新： 28/03/2025
1 分の読み

JavaScriptにおける「オブジェクト」は、非常に強力で重要な概念です。この記事では、JavaScriptにおけるオブジェクトの概念、基本的な使い方、操作方法について完全かつ包括的に解説します。JavaScriptのオブジェクトは、データを格納するための重要なデータ構造であり、オブジェクトをうまく活用することは、効率的でメンテナンスしやすいコードを書くための鍵となります。

1. JavaScriptにおけるオブジェクトとは

JavaScriptにおけるオブジェクトとは、名前（キー）と値をペアで保持するデータ構造のことです。オブジェクトは、キー（プロパティ名）を使って対応する値（プロパティ値）にアクセスすることができます。このキーと値のペアは、オブジェクトの「プロパティ」と呼ばれます。

関連記事

例:

javascript
let person = {
  name: "Taro",
  age: 25,
  gender: "male"
};

上記の例では、personというオブジェクトに3つのプロパティが含まれています。name、age、genderはプロパティ名で、それぞれに対応する値（”Taro”、25、”male”）が格納されています。

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

JavaScriptでは、オブジェクトをいくつかの方法で作成できます。最も基本的な方法は、リテラル表記を使用する方法です。オブジェクトリテラルを使うと、キーと値を簡潔に定義できます。

2.1 オブジェクトリテラルを使用する

javascript
let car = {
  brand: "Toyota",
  model: "Corolla",
  year: 2020
};

2.2 new Object()を使用する

オブジェクトを作成する別の方法として、new Object()構文を使用することもできます。この方法は、古いスタイルのJavaScriptコードでよく見られます。

javascript
let book = new Object();
book.title = "JavaScript Basics";
book.author = "John Doe";
book.pages = 300;

3. オブジェクトのプロパティにアクセスする方法

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

3.1 ドット記法

最も一般的な方法は、ドット記法を使用する方法です。

javascript
console.log(person.name); // "Taro"
console.log(person.age);  // 25

3.2 ブラケット記法

ブラケット記法を使うと、動的にプロパティにアクセスできます。特にプロパティ名が変数で指定される場合や、プロパティ名にスペースが含まれている場合に有効です。

javascript
console.log(person["name"]); // "Taro"
let property = "age";
console.log(person[property]); // 25

4. オブジェクトのプロパティを追加・変更・削除する

オブジェクトのプロパティは、後から追加したり、変更したり、削除したりすることができます。

4.1 プロパティの追加

プロパティを追加するには、ドット記法またはブラケット記法を使って新しいプロパティを指定します。

javascript
person.country = "Japan"; // ドット記法で追加
person["city"] = "Tokyo"; // ブラケット記法で追加

4.2 プロパティの変更

既存のプロパティを変更することもできます。

javascript
person.age = 26; // 年齢を変更

4.3 プロパティの削除

プロパティを削除するには、delete演算子を使用します。

javascript
delete person.gender; // genderプロパティを削除

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

オブジェクトは、データを格納するだけでなく、関数（メソッド）もプロパティとして持つことができます。これにより、オブジェクトが自身のデータに基づいて処理を行うことができます。

5.1 メソッドの定義

オブジェクト内にメソッドを定義する方法は以下の通りです。

javascript
let person = {
  name: "Taro",
  age: 25,
  greet: function() {
    console.log("Hello, my name is " + this.name);
  }
};

person.greet(); // "Hello, my name is Taro"

5.2 メソッドのショートハンド

ES6以降、メソッドの定義にはショートハンドが使えるようになりました。

javascript
let person = {
  name: "Taro",
  age: 25,
  greet() {
    console.log("Hello, my name is " + this.name);
  }
};

6. thisキーワード

オブジェクト内のメソッドでthisを使うと、そのメソッドが所属するオブジェクトを参照します。thisは、メソッドが実行される文脈に応じて、異なるオブジェクトを指し示します。

javascript
let person = {
  name: "Taro",
  age: 25,
  greet() {
    console.log("Hello, my name is " + this.name);
  }
};

person.greet(); // "Hello, my name is Taro"

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

JavaScriptにはオブジェクトに関連する組み込みメソッドがいくつかあります。これらのメソッドを使うことで、オブジェクトの操作が簡単に行えます。

7.1 Object.keys()メソッド

Object.keys()メソッドは、オブジェクトのプロパティ名（キー）を配列として取得します。

javascript
let person = { name: "Taro", age: 25 };
console.log(Object.keys(person)); // ["name", "age"]

7.2 Object.values()メソッド

Object.values()メソッドは、オブジェクトのプロパティ値を配列として取得します。

javascript
console.log(Object.values(person)); // ["Taro", 25]

7.3 Object.entries()メソッド

Object.entries()メソッドは、オブジェクトのプロパティ名と値を組み合わせた配列を返します。

javascript
console.log(Object.entries(person)); // [["name", "Taro"], ["age", 25]]

8. 継承とプロトタイプチェーン

JavaScriptのオブジェクトは、プロトタイプチェーンという仕組みによって他のオブジェクトを継承できます。これにより、オブジェクト同士が親子関係を形成し、親オブジェクトのプロパティやメソッドを子オブジェクトが利用できるようになります。

8.1 プロトタイプを利用した継承

オブジェクトは__proto__プロパティを介して別のオブジェクトを継承します。このプロパティは、オブジェクトがどのプロトタイプを持っているかを示します。

javascript
let animal = {
  eats: true
};

let dog = Object.create(animal);
console.log(dog.eats); // true

9. オブジェクトの比較

JavaScriptでは、オブジェクトの比較は参照によって行われます。つまり、2つのオブジェクトが同じ内容を持っていても、参照先が異なれば異なるオブジェクトと見なされます。

javascript
let obj1 = { a: 1 };
let obj2 = { a: 1 };

console.log(obj1 === obj2); // false

10. 結論

JavaScriptにおけるオブジェクトは、データの格納だけでなく、機能の提供にも役立つ強力なツールです。オブジェクトを使いこなすことで、効率的で保守性の高いコードを作成することができます。オブジェクトの基本から応用、プロトタイプチェーンを利用した継承に至るまで、さまざまな機能を理解し、活用することができるようになれば、JavaScriptをさらに深く理解できるようになるでしょう。

最終更新： 28/03/2025
1 分の読み
Back to top button