OOP (またはオブジェクト指向プログラミング) は、より論理的で管理しやすい方法でコードを整理するのに役立ち、将来的にコードを再利用および拡張することを容易にします。

JavaScript では、オブジェクト指向プログラミング (OOP) は「オブジェクト」の概念に基づくプログラミング パラダイムです。オブジェクトとは、連携して特定のタスクを実行するデータと関数のコレクションです。

OOP では、オブジェクトは、作成するオブジェクトのプロパティとメソッドを定義するテンプレートである「クラス」から作成されます。

OOP の利点

JavaScript で OOP を使用する主な利点の 1 つは、コードをより論理的で管理しやすい方法で編成できることです。OOP を使用すると、実際のオブジェクトを表すクラスを作成し、それらのオブジェクトが持つプロパティとメソッドを定義できます。これにより、特にコードが複雑になるにつれて、コードの理解と操作が容易になります。

JavaScript またはプログラミングにおける OOP のもう 1 つの利点は、コードの再利用と拡張性が可能になることです。

クラスを定義したら、そのクラスから必要な数のオブジェクトを作成できます。これにより、オブジェクトごとに同じコードを何度も記述する必要がないため、多くの時間と労力を節約できます。

さらに、既存のクラスから継承する新しいクラスを作成できるため、既存のコードの機能を再利用および拡張できます。

OOP の概要

JavaScript で OOP を使い始めるには、まずクラスの概念を理解する必要があります。JavaScript では、クラスは作成するオブジェクトのプロパティとメソッドを定義するテンプレートです。人を表す単純なクラスの例を次に示します。

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  greet() {
    console.log(`Hi, my name is ${this.name} and I am ${this.age} years old.`);
  }
}

このクラスからオブジェクトを作成するには、次のように、newキーワードの後に​​クラス名を続けます。

const person1 = new Person("John", 25);
const person2 = new Person("Jane", 30);

console.log(person1.name);  // Output: "John"
console.log(person2.age);  // Output: 30
person1.greet();  // Output: "Hi, my name is John and I am 25 years old."

クラスの定義とオブジェクトの作成に加えて、JavaScript の OOP では継承も可能です。これは、既存のクラスのプロパティとメソッドを継承する新しいクラスを作成できることを意味します。たとえばStudent、学校の生徒を表すクラスを作成するとします。クラスは、次のようStudentにクラスから継承できます。Person

class Student extends Person {
  constructor(name, age, school) {
    super(name, age);
    this.school = school;
  }
  info() {
    console.log(`${this.name} is ${this.age} years old and goes to ${this.school}.`);
  }
}

OOPS の 4 つの柱

JavaScript のオブジェクト指向プログラミング (OOP) の 4 つの柱は次のとおりです。

カプセル化:

カプセル化とは、オブジェクト内でデータと機能を一緒にラップするという考え方を指します。OOP では、オブジェクトはコードの基本的な構成要素であり、各オブジェクトには独自のプロパティとメソッドがあります。これにより、理解しやすく操作しやすい方法でコードを編成できます。

たとえば、と のようなプロパティと とのようなメソッドPersonを持つクラスを作成できます。nameagegreet()introduce()

抽象化:

抽象化とは、オブジェクトの実装の詳細を隠し、必要な情報のみをユーザーに公開するプロセスです。OOP では、抽象化を使用して、コードをよりモジュール化して柔軟にすることができます。

たとえば、オブジェクトの実装方法を指定せずに、関連するオブジェクトのグループに共通のインターフェイスを提供する抽象クラスを定義できます。

継承：

継承とは、既存のクラスのプロパティとメソッドを継承する新しいクラスを作成するプロセスです。これにより、既存のコードを再利用および拡張できるため、時間と労力を節約できます。

たとえばPerson、人物に共通のプロパティとメソッドを定義するクラスがある場合、Studentそのクラスを継承してPerson追加機能を追加するクラスを作成できます。

ポリモーフィズム:

ポリモーフィズムとは、異なるオブジェクトが同じメソッド呼び出しに異なる方法で応答する能力です。OOP では、ポリモーフィズムにより、共通のインターフェイスを共有するが異なる実装を持つオブジェクトを作成できます。これにより、コードがより柔軟になり、保守と拡張が容易なコードを記述できるようになります。

たとえばShape、共通のメソッドを定義するクラスを作成してから、それぞれ独自の方法でメソッドを実装するdraw()さまざまなタイプのシェイプ ( など) のサブクラスを作成できます。CircleRectangledraw()

JavaScript プログラムで OOP のこれらの柱を使用する方法の例を次に示します。

// Encapsulation: define a Person class with properties and methods
class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  greet() {
    console.log(`Hi, my name is ${this.name} and I am ${this.age} years old.`);
  }
}

// Inheritance: define a Student class that inherits from the Person class
class Student extends Person {
  constructor(name, age, school) {
    super(name, age);
    this.school = school;
  }
  info() {
    console.log(`${this.name} is ${this.age} years old and goes to ${this.school}.`);
  }
}

// Abstraction: define an abstract Shape class with a common draw() method
abstract class Shape {
  abstract draw(): void;
}

// Polymorphism: define subclasses of Shape that implement the draw() method in their own way
class Circle extends Shape {
  draw() {
    console.log("Drawing a circle...");
  }
}
class Rectangle extends Shape {
  draw() {
    console.log("Drawing a rectangle...");
  }
}

オブジェクト指向プログラミングは JavaScript の基本的な概念であり、コードの構造と編成を大幅に改善できます。カプセル化、継承、ポリモーフィズムなどの概念を理解して実装することで、より効率的で保守しやすいプログラムを作成できます。

あなたが初心者であろうと経験豊富な開発者であろうと、時間をかけて JavaScript で OOP を習得することは、長期的には報われます。読んでくれてありがとう、そして幸せなコーディング。

CSS FlexBoxについて詳しく知りたい場合は、このEbookをチェックしてください。