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

このページは、実験的な機能について説明しています。

パブリックフィールド宣言とプライベートフィールド宣言の両方は、JavaScriptの標準化委員会である TC39 で提案された実験的な機能(ステージ3)です。

ブラウザのサポートは限られていますが、Babel のようなシステムではビルドステップを経て機能を利用することができます。下記の互換性情報を参照してください。

パブリックスタティックフィールドとパブリックインスタンスフィールドは、書き込み可能、列挙可能、設定可能なプロパティです。そのため、プライベートとは異なり、プロトタイプの継承に参加します。

構文

class ClassWithInstanceField {
  instanceField = 'instance field'
}

class ClassWithStaticField {   
  static staticField = 'static field' 
}

class ClassWithPublicInstanceMethod {
  publicMethod() {
    return 'hello world'
  }
}

パブリックスタティックフィールド

パブリックスタティックフィールドは、すべてのクラスインスタンスを作成するのではなく、クラスごとに一度だけフィールドが存在するようにしたい場合に役立ちます。これは、キャッシュや固定設定、その他インスタンス間で複製する必要のないデータなどに便利です。

パブリックスタティックフィールドは、static キーワードを使用して宣言されます。これらは、クラスの評価時に Object.defineProperty() を使用してコンストラクタに追加され、その後はコンストラクタからアクセスします。

class ClassWithStaticField {
  static staticField = 'static field'
}

console.log(ClassWithStaticField.staticField)
// expected output: "static field"​

初期化子のないフィールドは undefined に初期化されます。

class ClassWithStaticField {
  static staticField
}

console.assert(ClassWithStaticField.hasOwnProperty('staticField'))
console.log(ClassWithStaticField.staticField)
// expected output: "undefined"

パブリックスタティックフィールドはサブクラスを再初期化しませんが、プロトタイプチェーンを介してアクセスすることができます。

class ClassWithStaticField {
  static baseStaticField = 'base field'
}

class SubClassWithStaticField extends ClassWithStaticField {
  static subStaticField = 'sub class field'
}

console.log(SubClassWithStaticField.subStaticField)
// expected output: "sub class field"

console.log(SubClassWithStaticField.baseStaticField)
// expected output: "base field"

フィールドを初期化する場合、this はクラスのコンストラクタを参照します。また、名前で参照し、スーパークラスのコンストラクタが存在する場合は super を使用してスーパークラスのコンストラクタを取得することもできます (存在する場合)。

class ClassWithStaticField {
  static baseStaticField = 'base static field'
  static anotherBaseStaticField = this.baseStaticField

  static baseStaticMethod() { return 'base static method output' }
}

class SubClassWithStaticField extends ClassWithStaticField {
  static subStaticField = super.baseStaticMethod()
}

console.log(ClassWithStaticField.anotherBaseStaticField)
// expected output: "base static field"

console.log(SubClassWithStaticField.subStaticField)
// expected output: "base static method output"

パブリックインスタンスフィールド

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

パブリック インスタンスフィールドは、ベースクラスの構築時(コンストラクタ本体が実行される前)、またはサブクラスの super() が返された直後のいずれかに Object.defineProperty() で追加されます。

class ClassWithInstanceField {
  instanceField = 'instance field'
}

const instance = new ClassWithInstanceField()
console.log(instance.instanceField)
// expected output: "instance field"

初期化子のないフィールドは undefined に初期化されます。

class ClassWithInstanceField {
  instanceField
}

const instance = new ClassWithInstanceField()
console.assert(instance.hasOwnProperty('instanceField'))
console.log(instance.instanceField)
// expected output: "undefined"

プロパティと同様に、フィールド名を計算することができます。

const PREFIX = 'prefix'

class ClassWithComputedFieldName {
    [`${PREFIX}Field`] = 'prefixed field'
}

const instance = new ClassWithComputedFieldName()
console.log(instance.prefixField)
// expected output: "prefixed field"

フィールドを初期化する場合、this は構築中のクラスインスタンスを参照します。パブリックインスタンスメソッドと同じように、サブクラスにいる場合は super を使って superclass プロトタイプにアクセスできます。

class ClassWithInstanceField {
  baseInstanceField = 'base field'
  anotherBaseInstanceField = this.baseInstanceField
  baseInstanceMethod() { return 'base method output' }
}

class SubClassWithInstanceField extends ClassWithInstanceField {
  subInstanceField = super.baseInstanceMethod()
}

const base = new ClassWithInstanceField()
const sub = new SubClassWithInstanceField()

console.log(base.anotherBaseInstanceField)
// expected output: "base field"

console.log(sub.subInstanceField)
// expected output: "base method output"

パブリックメソッド

パブリックスタティックメソッド

static キーワードは、クラスのスタティックメソッドを定義します。スタティックメソッドは、クラスのインスタンスでは呼び出されません。代わりに、クラス自体から呼び出されます。これらは、オブジェクトを作成したり、クローンを作成したりするユーティリティ関数であることが多いです。

class ClassWithStaticMethod {
  static staticMethod() {
    return 'static method has been called.';
  }
}

console.log(ClassWithStaticMethod.staticMethod());
// expected output: "static method has been called."

スタティックメソッドは、クラスの評価時に Object.defineProperty() を使用してクラスのコンストラクタに追加されます。これらのメソッドは書き込み可能、列挙不可、設定可能です。

パブリックインスタンスメソッド

パブリックインスタンスメソッドはその名の通り、クラスインスタンスで利用できるメソッドです。

class ClassWithPublicInstanceMethod {
  publicMethod() {
    return 'hello world'
  }
}

const instance = new ClassWithPublicInstanceMethod()
console.log(instance.publicMethod())
// expected output: "hello worl​d"

パブリックインスタンスメソッドは、 Object.defineProperty() を使用して、クラスの評価時にクラスプロトタイプに追加されます。これらのメソッドは書き込み可能、列挙不可、設定可能です。

ジェネレーター関数、async、非同期ジェネレーター関数を利用することができます。

class ClassWithFancyMethods {
  *generatorMethod() { }
  async asyncMethod() { }
  async *asyncGeneratorMethod() { }
}

インスタンスメソッドの中では、this はインスタンス自体を指します。サブクラスでは、super を使用してスーパークラスのプロトタイプにアクセスし、スーパークラスからメソッドを呼び出すことができます。

class BaseClass {
  msg = 'hello world'
  basePublicMethod() {
    return this.msg
  }
}

class SubClass extends BaseClass {
  subPublicMethod() {
    return super.basePublicMethod()
  }
}

const instance = new SubClass()
console.log(instance.subPublicMethod())
// expected output: "hello worl​d"

ゲッターとセッターは、クラスのプロパティにバインドする特別なメソッドで、そのプロパティがアクセスされたり設定されたりしたときに呼び出されます。get および set 構文を使用して、パブリックインスタンスのゲッターまたはセッターを宣言します。

class ClassWithGetSet {
  #msg = 'hello world'
  get msg() {
    return this.#msg
  }
  set msg(x) {
    this.#msg = `hello ${x}`
  }
}

const instance = new ClassWithGetSet()
console.log(instance.msg)
// expected output: "hello worl​d"

instance.msg = 'cake'
console.log(instance.msg)
// expected output: "hello cake"

仕様

                       

仕様書
Public and private instance fields
FieldDefinition の定義

ブラウザの互換性

Update compatibility data on GitHub
デスクトップモバイルサーバー
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung InternetNode.js
Public class fieldsChrome 完全対応 72Edge 完全対応 79Firefox 完全対応 69IE 未対応 なしOpera 完全対応 60Safari 完全対応 14WebView Android 完全対応 72Chrome Android 完全対応 72Firefox Android 未対応 なしOpera Android 完全対応 51Safari iOS 完全対応 14Samsung Internet Android 未対応 なしnodejs 完全対応 12.0.0

凡例

完全対応  
完全対応
未対応  
未対応

関連情報