CARVIEW |
このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。
class
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2017年3月.
class
宣言は、プロトタイプベースの継承を使って、指定された名前の新しいクラスを作成します。
クラス式を使ってクラスを定義することもで、その場合は再定義やクラス名の省略ができます。同じスコープでクラス宣言を同じ名前で行おうとすると、SyntaxError
が発生します。
試してみましょう
class Polygon {
constructor(height, width) {
this.area = height * width;
}
}
console.log(new Polygon(4, 3).area);
// Expected output: 12
構文
class name [extends otherName] {
// クラス本体
}
解説
クラス式と同様、クラス宣言の内部は厳格モードで実行されます。constructor
メソッドは省略可能です。
例
>単純なクラス宣言
次の例では、はじめに Rectangle
という名前のクラスを定義し、次にそれを拡張して FilledRectangle
という名前のクラスを作成します。
なお、コンストラクター (constructor
) で使われている super()
は、コンストラクター内でのみ使えること、 this
キーワードの使用前に呼び出さなくてはならないことに注意してください。
class Rectangle {
constructor(height, width) {
this.name = "Rectangle";
this.height = height;
this.width = width;
}
}
class FilledRectangle extends Rectangle {
constructor(height, width, color) {
super(height, width);
this.name = "Filled rectangle";
this.color = color;
}
}
クラスを二度宣言しようとする
クラス宣言を使って再度クラスを宣言すると、 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
Firefox のウェブコンソール (ツール > ウェブ開発者 > ウェブコンソール) などの REPL で実験しているときに、同じ名前のクラス宣言を 2 つの入力で実行すると、同じ再宣言エラーが発生することがあります。この課題については、Firefox bug 1580891で詳しく議論されていますので、ご覧ください。Chrome コンソールでは、異なる REPL 入力間でのクラスの再宣言が可能です。
仕様書
Specification |
---|
ECMAScript® 2026 Language Specification> # sec-class-definitions> |
ブラウザーの互換性
Loading…