クラス式

BaselineWidely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2016.

クラス式は、 ECMAScript 2015 でクラスを定義する方法の 1 つです。関数式と同じように、クラス式は名前を付けることも付けないこともできます。名前を付けた場合、クラス名はクラス内部のみのローカルです。

JavaScript のクラスはプロトタイプベースの継承が使われます。

試してみましょう

const Rectangle = class {  constructor(height, width) {    this.height = height;    this.width = width;  }  area() {    return this.height * this.width;  }};console.log(new Rectangle(5, 8).area());// Expected output: 40

構文

const MyClass = class [className] [extends otherClassName] {  // クラス本体}

解説

クラス式の構文は、クラス宣言（文）と似ています。class 文では、class 式の本体が厳格モードで実行されます。

しかし、クラス式とクラス文ではいくつかの相違点があります。

クラス式ではクラス名（「束縛識別子」 (binding identifier)）を省略できますが、クラス文では省略できません。
クラス式はSyntaxError を発生させずにクラスを再宣言することができます。これはクラス文の場合はできません。

constructor メソッドは省略可能です。クラス式で生成されたクラスは、常にtypeof が "function" の値を返します。

"use strict";let Foo = class {}; // コンストラクタープロパティは省略可能Foo = class {}; // 再宣言が可能typeof Foo; // "function" を返すtypeof class {}; // "function" を返すFoo instanceof Object; // trueFoo instanceof Function; // trueclass Foo {} // SyntaxError が発生 (クラス宣言は再宣言ができない)

例

簡単なクラス式

以下は、名前のない簡単なクラス式です。変数Foo を使って参照できます。

const Foo = class {  constructor() {}  bar() {    return "Hello World!";  }};const instance = new Foo();instance.bar(); // "Hello World!"Foo.name; // "Foo"

名前付きクラス式

クラス内部で現在のクラスを参照したい場合は、名前付きクラス式を作成してください。この名前は、そのクラス式自身のスコープ内だけで見ることができます。

const Foo = class NamedFoo {  constructor() {}  whoIsThere() {    return NamedFoo.name;  }};const bar = new Foo();bar.whoIsThere(); // "NamedFoo"NamedFoo.name; // ReferenceError: NamedFoo is not definedFoo.name; // "NamedFoo"