JavaScript クラス式

概要: このチュートリアルでは、JavaScript のクラス式を使って新しいクラスを宣言する方法を学びます。

JavaScript クラス式の概要

関数と同様に、クラスにも式形式があります。クラス式は、新しいクラスを定義する代替手段を提供します。

クラス式は、class キーワードの後に識別子を必要としません。変数宣言でクラス式を使用したり、関数に引数として渡したりできます。

たとえば、次の例はクラス式を定義しています

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

仕組み

式の左側にあるのは Person 変数です。これはクラス式に代入されています。

クラス式は、キーワード class で始まり、その後にクラス定義が続きます。

クラス式には、名前がある場合とない場合があります。この例では、名前のないクラス式があります。

クラス式に名前がある場合、その名前はクラス本体に対してローカルにすることができます。

以下は、Person クラス式のインスタンスを作成します。その構文は、クラス宣言の場合と同じです。

let person = new Person('John Doe');Code language: JavaScript (javascript)

クラス宣言と同様に、クラス式の型も関数です

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

関数式と同様に、クラス式はホイスティングされません。つまり、クラス式を定義する前にクラスのインスタンスを作成することはできません。

ファーストクラス市民

JavaScript のクラスはファーストクラス市民です。これは、クラスを関数に渡したり、関数から返したり、変数に代入したりできることを意味します。

次の例を参照してください

function factory(aClass) {
    return new aClass();
}

let greeting = factory(class {
    sayHi() { console.log('Hi'); }
});

greeting.sayHi(); // 'Hi'Code language: JavaScript (javascript)

仕組み

まず、クラス式を引数として受け取り、クラスのインスタンスを返す factory() 関数を定義します

function factory(aClass) {
    return new aClass();
}Code language: JavaScript (javascript)

次に、名前のないクラス式を factory() 関数に渡し、その結果を greeting 変数に代入します

let greeting = factory(class {
    sayHi() { console.log('Hi'); }
});Code language: JavaScript (javascript)

クラス式には sayHi() というメソッドがあります。そして、greeting 変数はクラス式のインスタンスです。

次に、greeting オブジェクトで sayHi() メソッドを呼び出します

greeting.sayHi(); // 'Hi'Code language: JavaScript (javascript)

シングルトン

シングルトンは、クラスのインスタンス化を単一のインスタンスに制限するデザインパターンです。システム全体でクラスのインスタンスが1つしか作成されないことを保証します。

クラス式は、クラスコンストラクタをすぐに呼び出すことによって、シングルトンを作成するために使用できます。

これを行うには、次の例に示すように、クラス式で new 演算子を使用し、クラス宣言の最後に括弧を含めます

let app = new class {
    constructor(name) {
        this.name = name;
    }
    start() {
        console.log(`Starting the ${this.name}...`);
    }
}('Awesome App');

app.start(); // Starting the Awesome App...Code language: JavaScript (javascript)

仕組み

以下は名前のないクラス式です

new class {
    constructor(name) {
        this.name = name;
    }
    start() {
        console.log(`Starting the ${this.name}...`);
    }
}Code language: JavaScript (javascript)

このクラスには、引数を受け入れる constructor() があります。また、start() というメソッドもあります。

クラス式はクラスに評価されます。したがって、式の後に括弧を付けることで、そのコンストラクタをすぐに呼び出すことができます

new class {
    constructor(name) {
        this.name = name;
    }
    start() {
        console.log(`Starting the ${this.name}...`);
    }
}('Awesome App')Code language: JavaScript (javascript)

この式は、app 変数に代入されるクラス式のインスタンスを返します。

以下は、app オブジェクトで start() メソッドを呼び出します

app.start(); // Starting the Awesome App...Code language: JavaScript (javascript)

概要

ES6 では、クラス式を使用して新しいクラスを定義する代替手段が提供されています。
クラス式には、名前付きと名前なしがあります。
クラス式は、シングルトンオブジェクトを作成するために使用できます。

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