パブリッククラスフィールド

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2022年9月⁩.

パブリックフィールドは、書き込み可能、列挙可能、構成不可のプロパティであり、それぞれのクラスインスタンスまたはクラスコンストラクターで定義されます。

構文

class ClassWithField {  instanceField;  instanceFieldWithInitializer = "instance field";  static staticField;  static staticFieldWithInitializer = "static field";}

それ以外にも構文上の制約があります。

静的プロパティ（フィールドまたはメソッド）の名前をprototype とすることはできません。
クラスフィールド（静的またはインスタンス）の名前をconstructor とすることはできません。

解説

このページでは、パブリックインスタンスフィールドについて詳しく紹介します。

パブリック静的フィールドについては、static を参照してください。
プライベートフィールドについては、プライベート要素を参照してください。
パブリックメソッドについては、メソッド定義を参照してください。
パブリックアクセサーについては、ゲッターおよびセッターを参照してください。

パブリックインスタンスフィールドは、作成されたクラスのすべてのインスタンスに存在します。パブリックフィールドを宣言することで、そのフィールドが常に存在することを保証することができ、クラスの定義がより自己文書化されます。

パブリックインスタンスフィールドは、基底クラスではコンストラクターが実行される前の時点でインスタンスに追加され、サブクラスではsuper() が返された直後に追加されます。初期化子のないフィールドはundefined に初期化されます。プロパティと同様に、フィールド名は計算することができます。

const PREFIX = "prefix";class ClassWithField {  field;  fieldWithInitializer = "instance field";  [`${PREFIX}Field`] = "prefixed field";}const instance = new ClassWithField();console.log(Object.hasOwn(instance, "field")); // trueconsole.log(instance.field); // undefinedconsole.log(instance.fieldWithInitializer); // "instance field"console.log(instance.prefixField); // "prefixed field"

計算されたフィールド名は、クラス定義時点で一度だけ評価されます。これは、クラスごとに常に固定された一連のフィールド名を持つことを意味しており、2つのインスタンスが計算された名前によって異なるフィールド名を持つことはありません。計算式のthis 値はクラス定義を囲むthis であり、クラス名を参照することはReferenceError となります。この式ではawait とyield は期待通りに動作します。

class C {  [Math.random()] = 1;}console.log(new C());console.log(new C());// Both instances have the same field name

フィールド初期化子の中では、thisは作成中のクラスインスタンスを参照し、superは基底クラスのprototype プロパティを参照します。このプロパティには基底クラスのインスタンスメソッドが格納されていますが、インスタンスフィールドは格納されていません。

class Base {  baseField = "base field";  anotherBaseField = this.baseField;  baseMethod() {    return "base method output";  }}class Derived extends Base {  subField = super.baseMethod();}const base = new Base();const sub = new Derived();console.log(base.anotherBaseField); // "base field"console.log(sub.subField); // "base method output"

フィールドの初期化式は、新しいインスタンスが作成されるたびに評価されます。（this の値はインスタンスごとに異なるので、初期化式はインスタンス固有のプロパティにアクセスすることができます。）

class C {  obj = {};}const instance1 = new C();const instance2 = new C();console.log(instance1.obj === instance2.obj); // false

式は同期的に評価されます。初期化式でawait やyield を使用することはできません。（初期化式は暗黙的に関数に包まれていると考えてください。）

クラスのインスタンスフィールドは、それぞれのコンストラクターが実行される前に追加されるので、コンストラクター内でフィールドの値にアクセスすることができます。しかし、派生クラスのインスタンスフィールドはsuper() を返した後に定義されるので、基底クラスのコンストラクターが派生クラスのフィールドにアクセスすることはできません。

class Base {  constructor() {    console.log("Base constructor:", this.field);  }}class Derived extends Base {  field = 1;  constructor() {    super();    console.log("Derived constructor:", this.field);    this.field = 2;  }}const instance = new Derived();// Base constructor: undefined// Derived constructor: 1console.log(instance.field); // 2

フィールドは 1 つずつ追加されます。フィールド初期化子はその上のフィールドの値を参照することはできますが、その下のフィールドの値を参照することはできません。インスタンスメソッドと静的メソッドはすべて事前に追加され、アクセスすることができますが、初期化されているフィールドより下のフィールドを参照している場合、呼び出すと期待した動作をしないことがあります。

class C {  a = 1;  b = this.c;  c = this.a + 1;  d = this.c + 1;}const instance = new C();console.log(instance.d); // 3console.log(instance.b); // undefined

メモ:これはプライベートフィールドではより重要です。初期化されていないプライベートフィールドにアクセスすると、たとえプライベートフィールドが下記で宣言されていてもTypeError が発生するからです。（プライベートフィールドが宣言されていない場合は、早期にSyntaxError となります。）

クラスフィールドは[[DefineOwnProperty]] の意味づけ（本質的にはObject.defineProperty()）を使用して追加されるため、派生クラスのフィールド宣言は基底クラスのセッターを呼び出すことはありません。この動作は、コンストラクターでthis.field = … を使用するのとは異なります。

class Base {  set field(val) {    console.log(val);  }}class DerivedWithField extends Base {  field = 1;}const instance = new DerivedWithField(); // No logclass DerivedWithConstructor extends Base {  constructor() {    super();    this.field = 1;  }}const instance2 = new DerivedWithConstructor(); // Logs 1

メモ:クラスフィールドの仕様が最終的に[[DefineOwnProperty]] の意味づけで決定される以前は、Babel やtsc を含むほとんどのトランスパイラーはクラスフィールドをDerivedWithConstructor 形式に変換しており、クラスフィールドが標準化された後に微妙なバグが発生していました。

例

クラスフィールドの使用

クラスフィールドはコンストラクターの引数に依存できないので、フィールド初期化子は通常、インスタンスごとに同じ値として評価されます（Math.random() やオブジェクト初期化子のように、同じ式が時刻ごとに異なる値として評価できる場合を除きます）。

class Person {  name = nameArg; // nameArg はコンストラクターのスコープ外  constructor(nameArg) {}}

class Person {  // すべてのインスタンスが同じ名前になる  name = "Dragomir";}

しかし、空であってもクラスフィールドを宣言することは有益です。フィールドの存在を示すことで、人間の読者だけでなく型チェッカーもクラスの形状を静的に分析できるようになるからです。

class Person {  name;  age;  constructor(name, age) {    this.name = name;    this.age = age;  }}

上のコードは冗長なように見えますが、this が動的に変更される場合を考えてみましょう。明示的にフィールド宣言を行うと、インスタンスに必ず存在するフィールドが明確になります。

class Person {  name;  age;  constructor(properties) {    Object.assign(this, properties);  }}

初期化子は基底クラスが実行された後に評価されるので、基底クラスのコンストラクターで作成したプロパティにアクセスすることができます。

class Person {  name;  age;  constructor(name, age) {    this.name = name;    this.age = age;  }}class Professor extends Person {  name = `Professor ${this.name}`;}console.log(new Professor("Radev", 54).name); // "Professor Radev"