JavaScriptクラスの基礎：ES6クラス入門

概要：このチュートリアルでは、JavaScriptクラスとその効果的な使用方法について学習します。

JavaScriptクラスは、オブジェクトを作成するための設計図です。クラスは、データをカプセル化し、データを操作する関数を含みます。

JavaやC#などの他のプログラミング言語とは異なり、JavaScriptクラスはプロトタイプ継承をより簡潔に記述するための糖衣構文です。つまり、ES6クラスは特別な関数です。

ES6以前のクラスを再検討

ES6以前は、JavaScriptにはクラスの概念がありませんでした。クラスを模倣するために、次の例に示すように、コンストラクター/プロトタイプパターンがよく使用されていました。

function Person(name) {
    this.name = name;
}

Person.prototype.getName = function () {
    return this.name;
};

var john = new Person("John Doe");
console.log(john.getName());Code language: JavaScript (javascript)

出力

John Doe

仕組み

まず、nameという名前のプロパティを持つコンストラクター関数としてPersonを作成します。 getName()関数は、Person型のすべてのインスタンスで共有できるように、prototypeに割り当てられます。

次に、new演算子を使用して、Person型の新しいインスタンスを作成します。そのため、johnオブジェクトは、プロトタイプ継承を通じて、PersonとObjectのインスタンスになります。

次のステートメントは、instanceof演算子を使用して、johnがPerson型とObject型のインスタンスであるかどうかを確認します。

console.log(john instanceof Person); // true
console.log(john instanceof Object); // trueCode language: JavaScript (javascript)

ES6クラス宣言

ES6では、この例に示すように、クラスを宣言するための新しい構文が導入されました。

class Person {
    constructor(name) {
        this.name = name;
    }
    getName() {
        return this.name;
    }
}Code language: JavaScript (javascript)

このPersonクラスは、前の例のPerson型のように動作します。ただし、コンストラクター/プロトタイプパターンの代わりに、classキーワードを使用します。

Personクラスでは、constructor()はインスタンスのプロパティを初期化できる場所です。クラスのオブジェクトをインスタンス化すると、JavaScriptは自動的にconstructor()メソッドを呼び出します。

以下は、Personクラスのconstructor()を自動的に呼び出す、新しいPersonオブジェクトを作成します。

let john = new Person("John Doe");Code language: JavaScript (javascript)

getName()は、Personクラスのメソッドと呼ばれます。コンストラクター関数と同様に、次の構文を使用してクラスのメソッドを呼び出すことができます。

objectName.methodName(args)Code language: CSS (css)

例えば

let name = john.getName();
console.log(name); // "John Doe"Code language: JavaScript (javascript)

クラスが特別な関数であることを確認するために、typeof演算子を使用してPersonクラスの型を確認できます。

console.log(typeof Person); // functionCode language: JavaScript (javascript)

予想どおり、functionが返されます。

johnオブジェクトは、Person型とObject型のインスタンスでもあります。

console.log(john instanceof Person); // true
console.log(john instanceof Object); // trueCode language: JavaScript (javascript)

クラスとカスタム型

コンストラクター関数で定義されたクラスとカスタム型の間には類似点がありますが、いくつかの重要な違いがあります。

まず、クラス宣言は、関数宣言のようにホイスティングされません。

たとえば、次のコードをPersonクラス宣言セクションの上に配置すると、ReferenceErrorが発生します。

let john = new Person("John Doe");Code language: JavaScript (javascript)

エラー

Uncaught ReferenceError: Person is not definedCode language: JavaScript (javascript)

次に、クラス内のすべてのコードは、自動的に厳密モードで実行されます。そして、この動作を変更することはできません。

3つ目に、クラスメソッドは列挙不可です。コンストラクター/プロトタイプパターンを使用する場合、プロパティを列挙不可にするためにObject.defineProperty()メソッドを使用する必要があります。

最後に、次の例に示すように、new演算子なしでクラスコンストラクターを呼び出すと、エラーが発生します。

let john = Person("John Doe");Code language: JavaScript (javascript)

エラー

Uncaught TypeError: Class constructor Person cannot be invoked without 'new'Code language: JavaScript (javascript)

new演算子なしでコンストラクター関数を呼び出すことは可能です。この場合、コンストラクター関数は通常の関数のように動作します。

まとめ

新しいクラスを宣言するには、JavaScriptのclassキーワードを使用します。
class宣言は、プロトタイプ継承を拡張した糖衣構文です。

このチュートリアルは役に立ちましたか？