Classes | Frontend Practical Guide

概要

ES2015 で導入された class 構文は、プロトタイプベースの継承をより直感的に書けるようにする糖衣構文です。constructor, extends, super, static メソッドなどをサポートします。

対応ブラウザ

機能	デスクトップ				モバイル
機能	Chrome	Edge	Firefox	Safari	Chrome Android	Safari iOS
`class`	49	13	45	10.1	49	10.3
その他
`javascript.classes` クラスはオブジェクトを作成するためのテンプレートです。処理するためのコードでデータをカプセル化します。 JS のクラスはプロトタイプに基づいて構築されていますが、一部の構文や意味はクラスに独特のものです。	49	13	45	9	49	9
`javascript.classes.constructor` constructor メソッドは、クラスで作成されたオブジェクトインスタンスの生成と初期化を行うための特殊なメソッドです。	49	13	45	9	49	9
`javascript.classes.extends` extends キーワードは、クラス宣言やクラス式の中で、他のクラスの子であるクラスを生成するために使用します。	49	13	45	9	49	9
`javascript.classes.private_class_fields` プライベート要素は、パブリックである通常のクラスプロパティ、例えばクラスフィールドやクラスメソッドなどに対するものです。プライベート要素はハッシュ # 接頭辞を使用して作成され、クラスの外部から合法的に参照することはできません。これらのクラスプロパティのプライバシーカプセル化は JavaScript 自身によって強制されます。プライベート要素にアクセスするには、ドット記法を使用するしかなく、また、そのアクセスはプライベート要素を定義するクラス内でのみ可能です。	74	79	90	14.1	74	14.5
`javascript.classes.private_class_fields_in` プライベート要素は、パブリックである通常のクラスプロパティ、例えばクラスフィールドやクラスメソッドなどに対するものです。プライベート要素はハッシュ # 接頭辞を使用して作成され、クラスの外部から合法的に参照することはできません。これらのクラスプロパティのプライバシーカプセル化は JavaScript 自身によって強制されます。プライベート要素にアクセスするには、ドット記法を使用するしかなく、また、そのアクセスはプライベート要素を定義するクラス内でのみ可能です。	91	91	90	15	91	15
`javascript.classes.private_class_methods` プライベート要素は、パブリックである通常のクラスプロパティ、例えばクラスフィールドやクラスメソッドなどに対するものです。プライベート要素はハッシュ # 接頭辞を使用して作成され、クラスの外部から合法的に参照することはできません。これらのクラスプロパティのプライバシーカプセル化は JavaScript 自身によって強制されます。プライベート要素にアクセスするには、ドット記法を使用するしかなく、また、そのアクセスはプライベート要素を定義するクラス内でのみ可能です。	84	84	90	15	84	15
`javascript.classes.public_class_fields` パブリックフィールドは、書き込み可能、列挙可能、構成不可のプロパティであり、それぞれのクラスインスタンスまたはクラスコンストラクターで定義されます。	72	79	69	16	72	16
`javascript.classes.static` static キーワードは、クラスに静的メソッドや静的フィールド、または静的初期化ブロックを定義します（この使い方について詳しくは、リンク先を参照してください）。静的プロパティは、クラスのインスタンスから直接アクセスすることはできません。代わりに、クラス自体に対してアクセスします。	49	13	45	9	49	9
`javascript.classes.static.class_fields` パブリックフィールドは、書き込み可能、列挙可能、構成不可のプロパティであり、それぞれのクラスインスタンスまたはクラスコンストラクターで定義されます。	72	79	75	14.1	72	14.5
`javascript.classes.static.initialization_blocks` 静的初期化ブロックはStatements/class内で宣言されます。これは、クラスの初期化の時に評価される文を格納します。これにより、Classes/staticプロパティよりも柔軟な初期化ロジックが可能になり、 try...catch を使用したり、 1 つの値から複数のフィールドを設定したりすることができます。初期化は現在のクラス宣言のコンテキストで実行され、プライベート要素にアクセスすることができます。つまり、インスタンスのプライベートフィールドを持つクラスと、同じスコープで宣言された他のクラスや関数との間で情報を共有するためにも使用できます（C++ の "friend" クラスに似ています）。	94	94	93	16.4	94	16.4
`javascript.operators.class` class キーワードを使用すると、式内でクラスを定義することができます。	42	13	45	7	42	7
`javascript.operators.new_target` new.target はメタプロパティで、関数やコンストラクターが new 演算子を使用して呼び出されたかどうかを検出することができます。 new 演算子を使用して呼び出したコンストラクターや関数の中では、 new.target は new が呼び出されたコンストラクターまたは関数への参照を返します。通常に呼び出された関数の中では、 new.target は undefined になります。	46	13	41	11	46	11
`javascript.operators.super` super キーワードは、オブジェクトリテラルやクラスの [[Prototype]] 上のプロパティにアクセスしたり、スーパークラスのコンストラクターを呼び出したりするために使用されます。	42	13	45	7	42	7

1+対応 (バージョン) 未対応 ※注釈ありサブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

JAVASCRIPT

class Animal {
  constructor(name) {
    this.name = name;
  }
  speak() {
    return `${this.name} barked`;
  }
}

class Dog extends Animal {
  speak() {
    return `${this.name}: Woof!`;
  }
}

new Dog('Pochi').speak(); // 'Pochi: Woof!'

ライブデモ

autocounter-class

Automaticallykauntapsimul-tion.. with Class usagestate manage, setTimeout.

プレビュー全画面表示

asyncde-tareadclass

Inheritance use, class. feature extended async in de-ta readsimul-tion..

プレビュー全画面表示

Calculation with staticmethod.

instansization to usage in staticmethod Use, delayafter to calculationresult display..

プレビュー全画面表示

実務での使いどころ

Classes の活用

class 構文でオブジェクト指向プログラミングを行う。コンストラクタ、継承、メソッド定義を簡潔に記述可能。

注意点

特になし。すべての主要ブラウザで安定して動作する。

参考リンク

Can I use — Classes

Powered by web-features

概要

対応ブラウザ

基本構文

ライブデモ

autocounter-class

asyncde-tareadclass

Calculation with staticmethod.

実務での使いどころ

Classes の活用

注意点

アクセシビリティ

参考リンク