JavaScript でのオブジェクト指向プログラミング (OOP) の探索

JavaScript でのオブジェクト指向プログラミング (OOP) の探索

日付: 2024 年 12 月 17 日

オブジェクト指向プログラミング (OOP) は、オブジェクトを使用して現実世界のエンティティをモデル化するパラダイムです。 JavaScript は多用途のプログラミング言語であり、プロトタイプ、ES6 クラス、最新の機能拡張を通じて OOP を強力にサポートします。今日は、JavaScript における OOP の原理と機能について詳しく説明します。

---

JavaScript における OOP の中心的な概念

1.オブジェクト

オブジェクトは OOP の構成要素です。 JavaScript では、オブジェクトはキーと値のペアのコレクションです。

例: オブジェクトの作成

const car = {
  brand: "Toyota",
  model: "Corolla",
  start() {
    return `${this.brand} ${this.model} is starting.`;
  }
};

console.log(car.start()); // Output: Toyota Corolla is starting.

---

2.クラス

クラスはオブジェクトを作成するための設計図です。データと動作をカプセル化します。 JavaScript は ES6 で class キーワードを導入しました。

例: クラスの作成

class Animal {
  constructor(name, species) {
    this.name = name;
    this.species = species;
  }

  makeSound() {
    return `${this.name} is making a sound.`;
  }
}

const dog = new Animal("Buddy", "Dog");
console.log(dog.makeSound()); // Output: Buddy is making a sound.

---

3.カプセル化

カプセル化とは、一部のコンポーネントへの直接アクセスを制限しながら、データとメソッドを一緒にバンドルすることを意味します。 JavaScript は、パブリック、プライベート、および保護されたメンバーを使用してこれを実現します。

プライベートフィールド

プライベート フィールドは # 接頭辞で示され、クラス内でのみアクセスできます。

例: プライベートフィールド

class BankAccount {
  #balance;

  constructor(initialBalance) {
    this.#balance = initialBalance;
  }

  deposit(amount) {
    this.#balance += amount;
  }

  getBalance() {
    return this.#balance;
  }
}

const account = new BankAccount(100);
account.deposit(50);
console.log(account.getBalance()); // Output: 150
// console.log(account.#balance); // Error: Private field '#balance' must be declared in an enclosing class

---

4.継承

継承により、extends キーワードを使用して、あるクラスが別のクラスからプロパティとメソッドを継承できます。

例: 継承

class Vehicle {
  constructor(brand) {
    this.brand = brand;
  }

  start() {
    return `${this.brand} vehicle is starting.`;
  }
}

class Car extends Vehicle {
  constructor(brand, model) {
    super(brand); // Calls the parent class constructor
    this.model = model;
  }

  display() {
    return `${this.brand} ${this.model} is ready to go.`;
  }
}

const myCar = new Car("Tesla", "Model S");
console.log(myCar.display()); // Output: Tesla Model S is ready to go.

---

5.ポリモーフィズム

ポリモーフィズムにより、サブクラスは親クラスのメソッドをオーバーライドして特定の実装を提供できます。

例: メソッドのオーバーライド

class Shape {
  area() {
    return "Area is not defined.";
  }
}

class Circle extends Shape {
  constructor(radius) {
    super();
    this.radius = radius;
  }

  area() {
    return Math.PI * this.radius ** 2;
  }
}

const circle = new Circle(5);
console.log(circle.area()); // Output: 78.53981633974483

---

6.抽象化

抽象化は、実装の複雑さを隠しながら、重要な詳細のみを公開することに重点を置いています。 JavaScript にはネイティブに抽象クラスがありませんが、それらをシミュレートすることができます。

例: 抽象化のシミュレーション

class Animal {
  constructor(name) {
    if (this.constructor === Animal) {
      throw new Error("Abstract class cannot be instantiated directly.");
    }
    this.name = name;
  }

  makeSound() {
    throw new Error("Abstract method must be implemented.");
  }
}

class Dog extends Animal {
  makeSound() {
    return "Bark!";
  }
}

const dog = new Dog("Buddy");
console.log(dog.makeSound()); // Output: Bark!
// const animal = new Animal("Some Animal"); // Error: Abstract class cannot be instantiated directly.

---

7.プロトタイプとプロトタイプ チェーン

JavaScript はプロトタイプベースの言語です。すべてのオブジェクトには、そのプロトタイプと呼ばれる別のオブジェクトへの内部リンクがあります。

例: プロトタイプチェーン

const car = {
  brand: "Toyota",
  model: "Corolla",
  start() {
    return `${this.brand} ${this.model} is starting.`;
  }
};

console.log(car.start()); // Output: Toyota Corolla is starting.

---

8.オブジェクトの構成と継承

継承を使用する代わりに、機能を組み合わせてオブジェクトを構成できます。このアプローチにより、深い継承階層の複雑さが回避されます。

例: 構成

class Animal {
  constructor(name, species) {
    this.name = name;
    this.species = species;
  }

  makeSound() {
    return `${this.name} is making a sound.`;
  }
}

const dog = new Animal("Buddy", "Dog");
console.log(dog.makeSound()); // Output: Buddy is making a sound.

---

OOP の主要原則

1. DRY (繰り返さない): クラスと継承を通じてコードを再利用します。
2. SOLID Principles: スケーラブルで保守可能な OOP コードを作成するためのベスト プラクティスに従います。

---

実際の例: ユーザー管理システム

ステップ 1: 基本クラスを定義する

class BankAccount {
  #balance;

  constructor(initialBalance) {
    this.#balance = initialBalance;
  }

  deposit(amount) {
    this.#balance += amount;
  }

  getBalance() {
    return this.#balance;
  }
}

const account = new BankAccount(100);
account.deposit(50);
console.log(account.getBalance()); // Output: 150
// console.log(account.#balance); // Error: Private field '#balance' must be declared in an enclosing class

ステップ 2: 機能を拡張する

class Vehicle {
  constructor(brand) {
    this.brand = brand;
  }

  start() {
    return `${this.brand} vehicle is starting.`;
  }
}

class Car extends Vehicle {
  constructor(brand, model) {
    super(brand); // Calls the parent class constructor
    this.model = model;
  }

  display() {
    return `${this.brand} ${this.model} is ready to go.`;
  }
}

const myCar = new Car("Tesla", "Model S");
console.log(myCar.display()); // Output: Tesla Model S is ready to go.

ステップ 3: インスタンスを作成する

class Shape {
  area() {
    return "Area is not defined.";
  }
}

class Circle extends Shape {
  constructor(radius) {
    super();
    this.radius = radius;
  }

  area() {
    return Math.PI * this.radius ** 2;
  }
}

const circle = new Circle(5);
console.log(circle.area()); // Output: 78.53981633974483

---

練習課題

1. 図書館管理システムのクラス階層を作成します。
2. 残高用のプライベート フィールドと入出金用のパブリック メソッドを備えた BankAccount クラスを実装します。
3. ポリモーフィズムを示す Car や Bike などのサブクラスを含む Vehicle クラスを作成します。

---

結論

JavaScript の OOP は、クリーンでモジュール化された再利用可能なコードを作成するための強力な方法を提供します。クラス、継承、カプセル化、ポリモーフィズムなどの概念を習得すると、スケーラブルなアプリケーションを構築するための準備が整います。実験を続けてこれらの概念を現実世界の問題に適用して、理解を深めてください。

明日のトピック: JavaScript の 非同期プログラミング について、コールバック、Promise、async/await について詳しく説明します。乞うご期待!

以上がJavaScript でのオブジェクト指向プログラミング (OOP) の探索の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。