オブジェクトリテラルとコンストラクター関数：オブジェクト作成の2つの方法

JavaScript オブジェクト：プログラミングの基礎を築く鍵

オブジェクトとは？

オブジェクトは、プロパティ と メソッド の集まりです。

• プロパティ は、名前と値のペアで構成されます。名前は文字列で、値は数値、文字列、配列、関数など、さまざまなデータ型を持つことができます。
• メソッド は、オブジェクトが実行できるアクションです。関数のように動作し、引数を受け取り、値を返すことができます。

オブジェクトは、現実世界のさまざまなものをモデル化するために使用できます。例えば、以下のようなオブジェクトを作成できます。

• ユーザー オブジェクト：名前、年齢、メールアドレスなどのプロパティを持つ
• 商品 オブジェクト：名前、価格、説明などのプロパティを持つ
• ショッピングカート オブジェクト：商品リスト、合計金額などのプロパティと、商品を追加/削除するメソッドを持つ

オブジェクトの作成

オブジェクトは、オブジェクトリテラル または コンストラクター関数 を使用して作成できます。

1 オブジェクトリテラル

オブジェクトリテラルは、最も簡単なオブジェクト作成方法です。波括記号 {} を使用して、プロパティと値のペアをカンマで区切って記述します。

const person = {
  name: "山田 太郎",
  age: 30,
  email: "[email protected]",
};

console.log(person.name); // "山田 太郎"
console.log(person.age); // 30

2 コンストラクター関数

コンストラクター関数は、オブジェクトを作成するためのテンプレートです。関数名は大文字で始め、new 演算子を使用して呼び出す必要があります。

function Person(name, age, email) {
  this.name = name;
  this.age = age;
  this.email = email;
}

const person1 = new Person("山田 太郎", 30, "[email protected]");
const person2 = new Person("佐藤 花子", 25, "[email protected]");

console.log(person1.name); // "山田 太郎"
console.log(person2.age); // 25

オブジェクトのプロパティにアクセスするには、ドット記法またはブラケット記法を使用します。

• ドット記法：プロパティ名の前にドット . を付けてアクセスします。
• ブラケット記法：プロパティ名を文字列として括弧 [] で囲んでアクセスします。

const person = {
  name: "山田 太郎",
  age: 30,
};

console.log(person.name); // "山田 太郎"
console.log(person["age"]); // 30

オブジェクトのメソッドを呼び出すには、ドット記法の後に括弧 () を付けて、必要に応じて引数を渡します。

const person = {
  name: "山田 太郎",
  age: 30,
  greet() {
    console.log(`こんにちは、私の名前は ${this.name} です。`);
  },
};

person.greet(); // こんにちは、私の名前は 山田 太郎 です。

プロトタイプと継承

JavaScript オブジェクトは、プロトタイプ という仕組みによって、他のオブジェクトからプロパティやメソッドを継承することができます。

• プロトタイプ は、オブジェクトの基盤となるオブジェクトです。
• 継承 は、子オブジェクトが親オブジェクトのプロパティやメソッドを引き継ぐことです。

const person = {
  name: "山田 太郎",
  age: 30,
};

const student = {
  grade: "A",
};

// student オブジェクトは person オブジェクトをプロトタイプとして持つ
student.__proto__ = person;

console.log(student.name); // "山田 太郎"
console.log(student.grade); // "A"

クラスとオブジェクト指向プログラミング

クラス は、オブジェクト指向プログラミング (OOP) の重要な概念です。クラスは、オブジェクトのテンプレートであり、共通のプロパティやメソッドを持つオブジェクトを生成するために使用されます

JavaScript オブジェクト サンプルコード

// ユーザーオブジェクト
const user = {
  name: "山田 太郎",
  age: 30,
  email: "[email protected]",
  // メソッド
  greet() {
    console.log(`こんにちは、私の名前は ${this.name} です。`);
  },
};

console.log(user.name); // "山田 太郎"
user.greet(); // こんにちは、私の名前は 山田 太郎 です。

// 商品オブジェクト
const product = {
  name: "Tシャツ",
  price: 1000,
  description: "綿100%の快適なTシャツ",
  // メソッド
  getDiscountPrice(discount) {
    return this.price * (1 - discount);
  },
};

console.log(product.name); // "Tシャツ"
const discountPrice = product.getDiscountPrice(0.1); // 900
console.log(`割引価格: ${discountPrice}円`); // 割引価格: 900円

コンストラクター関数

// Person コンストラクター関数
function Person(name, age, email) {
  this.name = name;
  this.age = age;
  this.email = email;
  // メソッド
  this.greet = function() {
    console.log(`こんにちは、私の名前は ${this.name} です。`);
  };
}

// Person オブジェクトの生成
const person1 = new Person("山田 太郎", 30, "[email protected]");
const person2 = new Person("佐藤 花子", 25, "[email protected]");

console.log(person1.name); // "山田 太郎"
person1.greet(); // こんにちは、私の名前は 山田 太郎 です。
console.log(person2.email); // "[email protected]"

// サブクラス：Employee
function Employee(name, age, email, department) {
  Person.call(this, name, age, email); // Person コンストラクターを呼び出す
  this.department = department;
}

// Employee オブジェクトの生成
const employee = new Employee("田中

JavaScript オブジェクトを作成する他の方法

Object.create() メソッドは、指定されたプロトタイプオブジェクトを持つ新しいオブジェクトを作成します。

const personPrototype = {
  greet() {
    console.log(`こんにちは、私の名前は ${this.name} です。`);
  },
};

const person1 = Object.create(personPrototype);
person1.name = "山田 太郎";

console.log(person1.name); // "山田 太郎"
person1.greet(); // こんにちは、私の名前は 山田 太郎 です。

const person2 = Object.create(personPrototype, {
  age: {
    value: 30,
    writable: true,
  },
});
person2.name = "佐藤 花子";

console.log(person2.name); // "佐藤 花子"
console.log(person2.age); // 30

Object.assign() メソッドは、ターゲットオブジェクトにソースオブジェクトのプロパティをコピーします。

const source = {
  name: "山田 太郎",
  age: 30,
};

const target = {};

Object.assign(target, source);

console.log(target.name); // "山田 太郎"
console.log(target.age); // 30

const person = {
  name: "佐藤 花子",
};

Object.assign(person, source);

console.log(person.name); // "佐藤 花子"
console.log(person.age); // 30

スプレッド構文は、オブジェクトリテラルや配列の要素を展開するために使用できます。

const person = {
  name: "山田 太郎",
  age: 30,
};

const