JavaScript クラス: 例を含む完全ガイド

JavaScript は、関数型、オブジェクト指向、命令型のプログラミング スタイルに従ったプログラムを作成できるマルチパラダイム言語です。

オブジェクト指向パターンをサポートするために、JavaScript にはクラスがあります。これらを理解することが重要であるため、この記事は JavaScript クラスとは何か、およびその使用方法についてのガイドです。

JavaScript のクラスとは何ですか?

オブジェクト指向プログラミングでは、システムを相互作用するオブジェクトのグループとしてモデル化します。オブジェクトが機能するために、オブジェクトはプロパティにデータを保存し、メソッドとして定義されたアクションを実行します。クラスは、同じタイプのオブジェクトによってどのようなプロパティとメソッドが保持されるかを定義します。したがって、クラスはオブジェクトの設計図です。

授業で使用する用語

同じ認識を持っていることを確認するために、この記事で使用する重要な用語を含むクラスの説明をここに示します。すでにオブジェクト指向プログラミングに精通している場合は、次のセクションに進んでください。

❇️ クラスは オブジェクトの設計図です。そのタイプのオブジェクトを作成できるテンプレートを提供します。クラスが提供するテンプレートからオブジェクトを作成することを インスタンス化 と呼びます。

❇️ クラス メンバーとは 、クラスに属するあらゆるものです。クラス メンバーにはメソッドとプロパティの 2 種類があります。

❇️ プロパティは、 値を保存することを主な目的とするクラス メンバーです。これらは、数値や文字列などの単純な値である可能性があります。複雑なオブジェクトや配列である場合もあります。

❇️ 一部のプロパティはクラス内でのみアクセスでき、 プライベート プロパティという 適切な名前が付けられています。クラス内外からアクセスできるものもあります。このようなプロパティは、 パブリック プロパティ と呼ばれます。

❇️ メソッドは クラス内で定義された関数です。したがって、これはクラスに属し、パブリックおよびプライベートのプロパティにアクセスできます。プロパティと同様に、 パブリック メソッド と プライベート メソッド もあります。

❇️ いくつかのメソッドは、クラスの外部のコードがクラス内のプロパティと対話するためのインターフェイスを提供するために存在します。これを行うメソッドには、 getters と setters の 2 つのグループがあります。ゲッターはクラス プロパティの値を取得し、セッターはクラス プロパティの値を設定します。

❇️ 一部のメンバーは 静的 です。これは、クラス上でのみアクセス可能であり、クラス インスタンス上ではアクセスできないことを意味します。

対照的に、一部のクラス メンバーは静的ではありません。つまり、クラス インスタンス上でのみアクセスできます。非静的メンバーにアクセスする前に、クラスをインスタンス化する必要があります。

クラスをインスタンス化すると、インスタンスのプロパティを設定するために特別なメソッドが呼び出されます。このメソッドは コンストラクター 関数と呼ばれます。

クラスのインスタンス化の説明

new キーワードとクラス名を使用して、JavaScript でクラスをインスタンス化します。たとえば、Array クラスをインスタンス化してみましょう。

 const myArr = new Array()

JavaScript でのクラスの作成

このセクションでは、 用語セクション で説明したすべての概念を実装するクラスの作成について説明します。これを一連の例で行います。各例は前の例に基づいています。

空のクラスの宣言

JavaScript でクラスを宣言するには、class キーワードを使用してクラスに名前を付けます。次に、クラスの本体を定義します。本体は中括弧で囲まれ、すべてのクラス メンバーを保持します。

次に、空の本体を含むクラス宣言の例を示します。

 class Dog {

}

これで、次のようにクラスをインスタンス化して出力できます。

 const pet = new Dog;
console.log(pet); 

パブリックプロパティの作成

パブリック プロパティは、識別子とオプションの値で定義されます。

 class Dog {
    name = "Roy";
    age;
}

ここでは、名前を文字列値で定義し、年齢を値なしで定義しました。

 const pet = new Dog();

console.log(pet.name);
console.log(pet.age); 

パブリックメソッドの定義

クラスの本体内にメソッドを追加できます。関数を定義するのと同じ方法でメソッドを定義します。ただし、function キーワードは省略します。

 class Dog {
    name = "Roy";
    age;

    walk () {
        console.log("Walking");
    }
}

上の例では、walk メソッドを定義しました。 Animal クラスのすべてのインスタンスにはそのメソッドがあります。

 const pet = new Dog();
pet.walk(); 

メソッドからプロパティにアクセスする

JavaScript では通常、ドット演算子を使用してオブジェクトのプロパティにアクセスします。たとえば、person という名前のオブジェクトがあり、name プロパティにアクセスしたい場合は、次のように実行します。

 person.name

ただし、オブジェクト内からプロパティにアクセスする場合は、オブジェクト名の代わりに this キーワードを使用します。以下に例を示します。

 this.name

this キーワードはオブジェクトを参照します。したがって、クラス メソッド内からクラス プロパティにアクセスしたい場合は、 this.<property_name> 構文を使用します。

プライベートプロパティの作成

前に定義した名前と年齢のプロパティを非公開にしたいとします。クラスを次のように再定義します。

 class Dog {
    #name = "Roy";
    #age;

    walk () {
        console.log("Walking");
    }
}

ご覧のとおり、プライベート プロパティはポンド記号を使用して指定されます。これらにアクセスしようとすると、エラーが発生します。

 const dog = new Dog();

dog.#name 

Getter メソッドと Setter メソッドの作成

これで、クラスの名前と年齢のプロパティが非公開になりました。したがって、クラス内のメソッドからのみアクセスできます。

クラス外のコードがこれらのプロパティにアクセスできるようにする場合は、ゲッターとセッターを定義します。 name プロパティに対してこれを行ってみましょう。

 class Dog {
    #name = "Roy";
    #age;

    get name () {
        return this.#name;
    }

    set name (value) {
        this.#name = value;
    }

    walk () {
        console.log("Walking");
    }
}

上記で定義したクラスを使用すると、以下のコードを使用して名前を設定し、表示できます。

 const pet = new Dog();

// Setting the name
pet.name = "Rex";

// Getting the name
console.log(pet.name); 

プライベートメソッドの作成

プライベート プロパティと同様に、プライベート メソッドにはシャープ記号が接頭辞として付けられます。したがって、プライベート メソッドの宣言は次のようになります。

 class Dog {
    #name = "Roy";
    #age;

    get name () {
        return this.#name;
    }

    set name (value) {
        this.#name = value;
    }

    #increaseAge() {
        this.#age ++;
    }

    #decreaseAge () {
        this.#age --;
    }

    walk () {
        console.log("Walking");
    }
}

クラスの外部からこれらのメソッドにアクセスしようとしても、機能しません。

 const pet = new Dog();
pet.#increaseAge(); 

コンストラクターメソッドの作成

コンストラクター メソッドを定義することもできます。このメソッドは、新しいクラスをインスタンス化するたびに自動的に呼び出されます。コンストラクター メソッドを使用してプロパティを初期化できます。この例では、年齢と名前を、インスタンス化中にユーザーが指定した引数に初期化します。

 class Dog {
    #name;
    #age;

    constructor (name = "Dog", age = 0) {
        this.#name = name;
        this.#age = age;
    }

    get name () {
        return this.#name;
    }

    set name (value) {
        this.#name = value;
    }

    #increaseAge() {
        this.#age ++;
    }

    #decreaseAge () {
        this.#age --;
    }

    walk () {
        console.log("Walking");
    }
}

クラスをインスタンス化するときに、名前と年齢を指定できます。

 const pet = new Dog('Roy', 3);
console.log(pet.name); 

静的プロパティと静的メソッドの作成

前述したように、最初にクラスをインスタンス化しなくても、静的メンバーにアクセスできます。以下の例では、静的プロパティとメソッドを作成します。

 class Dog {
    #name;
    #age;
    static genus = "Canis";

    constructor (name = "Dog", age = 0) {
        this.#name = name;
        this.#age = age;
    }

    static bark() {
        console.log("Woof");
    }

    get name () {
        return this.#name;
    }

    set name (value) {
        this.#name = value;
    }

    #increaseAge() {
        this.#age ++;
    }

    #decreaseAge () {
        this.#age --;
    }

    walk () {
        console.log("Walking");
    }
}

これで、インスタンス化せずに静的プロパティとメソッドにアクセスできるようになりました。

 console.log(Dog.genus);
Dog.bark(); 

継承

クラスは他のクラスからプロパティを継承できます。別のクラスからメンバーを継承するクラスはスーパークラスと呼ばれ、メンバーの継承元のクラスは基本クラスまたはサブクラスと呼ばれます。

JavaScript でスーパークラスを作成するには、 extends キーワードを使用します。 Dog クラスから継承する例を次に示します。

 class Rottweiler extends Dog {
    constructor (name, age) {
        super(name, age);
        this.breed = 'rottweiler';
    }
}

ご覧のとおり、クラスは以前とほぼ同じです。ただし、コンストラクター内ではスーパー関数を呼び出しました。 super キーワードは、基本クラスのコンストラクターを参照します。したがって、スーパークラス内で基本クラスのコンストラクターを呼び出し、名前と年齢を渡しました。

 const myPet = new Rottweiler();
console.log(myPet); 

結論

この記事ではクラスについて説明しました。彼らが何であるか、彼らが保持できるメンバー、およびメンバーのさまざまな分類について説明しました。次に、これらすべてを例を挙げて説明しました。

次に、オブジェクト指向プログラミングの面接の質問を読むとよいでしょう。