class

クラス宣言は、プロトタイプベースの継承を使って、指定された名前の新しいクラスを作成します。

クラス式を使ってクラスを定義することもできます。しかし、クラス式と異なり、クラス宣言は既存のクラスを再宣言することができず、再宣言しようとすると SyntaxError が発生します。

構文

class name [extends otherName] {
  // クラス本体
}

解説

クラス式と同様、クラス宣言の内部は厳格モードで実行されます。 constructor メソッドは省略可能です。

クラス宣言は巻き上げが行われません (関数宣言とは異なります)。

単純なクラス宣言

次の例では、はじめに Polygon という名前のクラスを定義し、次にそれを拡張して Square という名前のクラスを作成します。

なお、コンストラクターで使われている super() は、コンストラクター内でのみ使えること、 this キーワードの使用に呼び出さなくてはならないことに注意してください。

class Polygon {
  constructor(height, width) {
    this.name = 'Polygon';
    this.height = height;
    this.width = width;
  }
}

class Square extends Polygon {
  constructor(length) {
    super(length, length);
    this.name = 'Square';
  }
}

クラスを二度宣言する

クラス宣言を使って再度クラスを宣言すると、 SyntaxError が発生します。

class Foo {};
class Foo {}; // Uncaught SyntaxError: Identifier 'Foo' has already been declared

クラス式を使って事前にクラスを定義していたときも、同じエラーが発生します。

let Foo = class {};
class Foo {}; // Uncaught SyntaxError: Identifier 'Foo' has already been declared

仕様書

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

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイルサーバー
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung InternetNode.js
classChrome 完全対応 49
完全対応 49
未対応 42 — 49
補足
補足 Strict mode is required.
未対応 42 — 49
無効
無効 From version 42 until version 49 (exclusive): this feature is behind the Experimental JavaScript preference (needs to be set to Enabled). To change preferences in Chrome, visit chrome://flags.
Edge 完全対応 13Firefox 完全対応 45IE 未対応 なしOpera 完全対応 36
完全対応 36
未対応 29 — 36
補足
補足 Strict mode is required.
未対応 29 — 36
無効
無効 From version 29 until version 36 (exclusive): this feature is behind the Experimental JavaScript preference (needs to be set to Enabled).
Safari 完全対応 10.1WebView Android 完全対応 49
完全対応 49
未対応 42 — 49
補足
補足 Strict mode is required.
Chrome Android 完全対応 49
完全対応 49
未対応 42 — 49
補足
補足 Strict mode is required.
未対応 42 — 49
無効
無効 From version 42 until version 49 (exclusive): this feature is behind the Experimental JavaScript preference (needs to be set to Enabled). To change preferences in Chrome, visit chrome://flags.
Firefox Android 完全対応 45Opera Android 完全対応 36
完全対応 36
未対応 29 — 36
補足
補足 Strict mode is required.
未対応 29 — 36
無効
無効 From version 29 until version 36 (exclusive): this feature is behind the Experimental JavaScript preference (needs to be set to Enabled).
Safari iOS 完全対応 10.3Samsung Internet Android 完全対応 5.0
完全対応 5.0
未対応 4.0 — 5.0
補足
補足 Strict mode is required.
nodejs 完全対応 6.0.0

凡例

完全対応  
完全対応
未対応  
未対応
実装ノートを参照してください。
実装ノートを参照してください。
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。

関連情報