From 3b0732b3447f1083a9287e5dfb3d5f95823042b6 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Wed, 22 Sep 2021 15:29:16 +0900 Subject: Classes/Public_class_fields を更新 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Markdown化 - 2021/07/21 時点の英語版に同期 --- .../reference/classes/public_class_fields/index.md | 254 +++++++++++---------- 1 file changed, 128 insertions(+), 126 deletions(-) (limited to 'files/ja/web/javascript/reference/classes') diff --git a/files/ja/web/javascript/reference/classes/public_class_fields/index.md b/files/ja/web/javascript/reference/classes/public_class_fields/index.md index b4dcd87d5c..5ab726f8d9 100644 --- a/files/ja/web/javascript/reference/classes/public_class_fields/index.md +++ b/files/ja/web/javascript/reference/classes/public_class_fields/index.md @@ -7,22 +7,15 @@ tags: - Language feature translation_of: Web/JavaScript/Reference/Classes/Public_class_fields --- -
{{JsSidebar("Classes")}}
+{{JsSidebar("Classes")}} -
-

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

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

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

+## 構文 -

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

-
- -

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

- -

構文

- -
class ClassWithInstanceField {
-  instanceField = 'instance field'
+```js
+class ClassWithInstanceField {
+  instanceField = 'instance field'
 }
 
 class ClassWithStaticField {
@@ -30,154 +23,171 @@ class ClassWithStaticField {
 }
 
 class ClassWithPublicInstanceMethod {
-  publicMethod() {
-    return 'hello world'
-  }
+  publicMethod() {
+    return 'hello world'
+  }
 }
-
+``` -

例

+## 例 -

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

+### パブリック静的フィールド -

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

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

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

+パブリック静的フィールドは、`static` キーワードを使用して宣言されます。これらは、クラスの評価時に{{jsxref("Global_Objects/Object/defineProperty", "Object.defineProperty()")}} を使用してコンストラクターに追加され、その後はコンストラクターからアクセスします。 -
class ClassWithStaticField {
-  static staticField = 'static field'
+```js
+class ClassWithStaticField {
+  static staticField = 'static field'
 }
 
 console.log(ClassWithStaticField.staticField)
-// expected output: "static field"​
-
+// 期待される結果: "static field"​ +``` -

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

+初期化子のないフィールドは `undefined` に初期化されます。 -
class ClassWithStaticField {
-  static staticField
+```js
+class ClassWithStaticField {
+  static staticField
 }
 
 console.assert(ClassWithStaticField.hasOwnProperty('staticField'))
 console.log(ClassWithStaticField.staticField)
-// expected output: "undefined"
+// 期待される結果: "undefined" +``` -

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

+パブリック静的フィールドはサブクラスでは再初期化されませんが、プロトタイプチェーンを介してアクセスすることができます。 -
class ClassWithStaticField {
-  static baseStaticField = 'base field'
+```js
+class ClassWithStaticField {
+  static baseStaticField = 'base field'
 }
 
 class SubClassWithStaticField extends ClassWithStaticField {
-  static subStaticField = 'sub class field'
+  static subStaticField = 'sub class field'
 }
 
 console.log(SubClassWithStaticField.subStaticField)
-// expected output: "sub class field"
+// 期待される結果: "sub class field"
 
 console.log(SubClassWithStaticField.baseStaticField)
-// expected output: "base field"
+// 期待される結果: "base field" +``` -

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

+フィールドを初期化するとき、`this` はそのクラスのコンストラクターを参照します。名前で参照することもできますし、`super` を使用するとスーパークラスのコンストラクターを (存在する場合は) 取得することもできます。 -
class ClassWithStaticField {
-  static baseStaticField = 'base static field'
-  static anotherBaseStaticField = this.baseStaticField
+```js
+class ClassWithStaticField {
+  static baseStaticField = 'base static field'
+  static anotherBaseStaticField = this.baseStaticField
 
-  static baseStaticMethod() { return 'base static method output' }
+  static baseStaticMethod() { return 'base static method output' }
 }
 
 class SubClassWithStaticField extends ClassWithStaticField {
-  static subStaticField = super.baseStaticMethod()
+  static subStaticField = super.baseStaticMethod()
 }
 
 console.log(ClassWithStaticField.anotherBaseStaticField)
-// expected output: "base static field"
+// 期待される結果: "base static field"
 
 console.log(SubClassWithStaticField.subStaticField)
-// expected output: "base static method output"
-
+// 期待される結果: "base static method output" +``` -

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

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

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

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

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

+パブリックインスタンスフィールドは、基底クラスの構築時 (コンストラクター本体が実行される前)、またはサブクラスの `super()` が返された直後のいずれかに {{jsxref("Global_Objects/Object/defineProperty", "Object.defineProperty()")}} で追加されます。 -
class ClassWithInstanceField {
+```js
+class ClassWithInstanceField {
   instanceField = 'instance field'
 }
 
 const instance = new ClassWithInstanceField()
 console.log(instance.instanceField)
-// expected output: "instance field"
+// 期待される結果: "instance field" +``` -

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

+初期化子のないフィールドは `undefined` に初期化されます。 -
class ClassWithInstanceField {
-  instanceField
+```js
+class ClassWithInstanceField {
+  instanceField
 }
 
 const instance = new ClassWithInstanceField()
 console.assert(instance.hasOwnProperty('instanceField'))
 console.log(instance.instanceField)
-// expected output: "undefined"
+// 期待される結果: "undefined" +``` -

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

+プロパティと同様に、フィールド名を計算することができます。 -
const PREFIX = 'prefix'
+```js
+const PREFIX = 'prefix'
 
 class ClassWithComputedFieldName {
-    [`${PREFIX}Field`] = 'prefixed field'
+    [`${PREFIX}Field`] = 'prefixed field'
 }
 
 const instance = new ClassWithComputedFieldName()
 console.log(instance.prefixField)
-// expected output: "prefixed field"
+// 期待される結果: "prefixed field" +``` -

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

+フィールドを初期化する場合、`this` は構築中のクラスインスタンスを参照します。パブリックインスタンスメソッドと同じように、サブクラスにいる場合は `super` を使ってスーパークラスのプロトタイプにアクセスできます。 -
class ClassWithInstanceField {
-  baseInstanceField = 'base field'
-  anotherBaseInstanceField = this.baseInstanceField
-  baseInstanceMethod() { return 'base method output' }
+```js
+class ClassWithInstanceField {
+  baseInstanceField = 'base field'
+  anotherBaseInstanceField = this.baseInstanceField
+  baseInstanceMethod() { return 'base method output' }
 }
 
 class SubClassWithInstanceField extends ClassWithInstanceField {
-  subInstanceField = super.baseInstanceMethod()
+  subInstanceField = super.baseInstanceMethod()
 }
 
 const base = new ClassWithInstanceField()
 const sub = new SubClassWithInstanceField()
 
 console.log(base.anotherBaseInstanceField)
-// expected output: "base field"
+// 期待される結果: "base field"
 
 console.log(sub.subInstanceField)
-// expected output: "base method output"
+// 期待される結果: "base method output" +``` -

パブリックメソッド

+### パブリックメソッド -

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

+#### パブリック静的メソッド -

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

+**`static`** キーワードで、クラスの静的メソッドを定義します。静的メソッドは、クラスのインスタンスでは呼び出されません。代わりに、クラス自体から呼び出されます。これらの多くは、オブジェクトを作成したり、クローンを作成したりするようなユーティリティ関数です。 -
class ClassWithStaticMethod {
+```js
+class ClassWithStaticMethod {
   static staticMethod() {
     return 'static method has been called.';
   }
 }
 
 console.log(ClassWithStaticMethod.staticMethod());
-// expected output: "static method has been called."
+// 期待される結果: "static method has been called." +``` -

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

+静的メソッドは、クラスの評価時に {{jsxref("Global_Objects/Object/defineProperty", "Object.defineProperty()")}} を使用してクラスのコンストラクターに追加されます。これらのメソッドは書き込み可能、列挙不可、設定可能です。 -

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

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

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

+パブリックインスタンスメソッドはその名の通り、クラスインスタンスで利用できるメソッドです。 -
class ClassWithPublicInstanceMethod {
+```js
+class ClassWithPublicInstanceMethod {
   publicMethod() {
     return 'hello world'
   }
@@ -185,83 +195,75 @@ console.log(ClassWithStaticMethod.staticMethod());
 
 const instance = new ClassWithPublicInstanceMethod()
 console.log(instance.publicMethod())
-// expected output: "hello worl​d"
+// 期待される結果: "hello worl​d" +``` -

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

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

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

+ジェネレーター関数、非同期関数、非同期ジェネレーター関数を利用することができます。 -
class ClassWithFancyMethods {
+```js
+class ClassWithFancyMethods {
   *generatorMethod() { }
   async asyncMethod() { }
   async *asyncGeneratorMethod() { }
-}
+} +``` -

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

+インスタンスメソッドの中では、`this` はインスタンス自体を指します。サブクラスでは、`super` を使用してスーパークラスのプロトタイプにアクセスし、そのスーパークラスからメソッドを呼び出すことができます。 -
class BaseClass {
-  msg = 'hello world'
-  basePublicMethod() {
-    return this.msg
-  }
+```js
+class BaseClass {
+  msg = 'hello world'
+  basePublicMethod() {
+    return this.msg
+  }
 }
 
 class SubClass extends BaseClass {
-  subPublicMethod() {
-    return super.basePublicMethod()
-  }
+  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}`
-  }
+// 期待される結果: "hello worl​d"
+```
+
+ゲッターとセッターは、クラスのプロパティにバインドする特別なメソッドで、そのプロパティがアクセスされたり設定されたりしたときに呼び出されます。[get](/ja/docs/Web/JavaScript/Reference/Functions/get) および [set](/ja/docs/Web/JavaScript/Reference/Functions/set) 構文を使用して、パブリックインスタンスのゲッターまたはセッターを宣言します。
+
+```js
+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"
+// 期待される結果: "hello worl​d"
 
 instance.msg = 'cake'
 console.log(instance.msg)
-// expected output: "hello cake"
-
- -

仕様

- - - - - - - - - - - - - -
仕様書
{{SpecName('Public and private instance fields', '#prod-FieldDefinition', 'FieldDefinition')}}
+// 期待される結果: "hello cake" +``` -

ブラウザー実装状況

+## 仕様書 +{{Specifications("javascript.classes")}} +## ブラウザーの互換性 -

{{Compat("javascript.classes.public_class_fields")}}

+{{Compat("javascript.classes")}} -

関連情報

+## 関連情報 - +- [The + Semantics of All JS Class Elements](https://rfrn.org/~shu/2018/05/02/the-semantics-of-all-js-class-elements.html) +- [Public and private class fields](https://v8.dev/features/class-fields) + v8.dev site の記事 -- cgit v1.2.3-54-g00ecf