クラス式

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

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

構文

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;   // true
Foo instanceof Function; // true
class 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 defined
Foo.name;          // "NamedFoo"

仕様書

仕様書
ECMAScript (ECMA-262)
Class definitions の定義

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイルサーバー
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung InternetNode.js
classChrome 完全対応 42Edge 完全対応 13Firefox 完全対応 45IE 未対応 なしOpera 完全対応 29Safari 完全対応 7WebView Android 完全対応 42Chrome Android 完全対応 42Firefox Android 完全対応 45Opera Android 完全対応 29Safari iOS 完全対応 7Samsung Internet Android 完全対応 4.0nodejs 完全対応 6.0.0
完全対応 6.0.0
完全対応 5.0.0
無効
無効 From version 5.0.0: this feature is behind the --harmony runtime flag.

凡例

完全対応  
完全対応
未対応  
未対応
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。

関連情報