JavaScript クラス(class)

クラスはオブジェクトを作成するためのテンプレートです。

class キーワードを使用してクラスを作成します。クラス本体は一対の波括弧{}の中に、私たちは波括弧内に{}メソッドやコンストラクタなどのクラスメンバーを定義できます。

各クラスには特別なメソッドが含まれています。constructor()、それはクラスのコンストラクタです。このメソッドは、class作成されたオブジェクトを生成し、初期化します。

クラスを作成するための構文は次のとおりです：

class ClassName { constructor() { ... } }

例：

例

class サンプル { constructor(name, url) { this.name = name; this.url = url; } }

上記の例では、"サンプル" という名前のクラスを作成しました。

クラス内で "name" と "url" の2つのプロパティを初期化しています。

ブラウザサポート

表内の数字は、そのプロパティをサポートする最初のブラウザのバージョン番号を示します。

Chrome 49 Edge 12 Firefox 45 Safari 9 Opera 36
Mar, 2016 Jul, 2015 Mar, 2016 Oct, 2015 Mar, 2016

クラスの使用

クラスを定義したら、newキーワードを使用してオブジェクトを作成できます：

例

class サンプル { constructor(name, url) { this.name = name; this.url = url; } } let site = new サンプル("サンプル", "https://www.example.com");

試してみる »

オブジェクトを作成すると、コンストラクタメソッドが自動的に呼び出されます。constructor()。

クラス式

クラス式はクラスを定義する別の方法です。クラス式には名前を付けることも、付けないこともできます。名前付きクラス式の名前は、そのクラス本体のローカル名です。

例

//名前なし/匿名クラス let サンプル = class { constructor(name, url) { this.name = name; this.url = url; } }; console.log(サンプル.name); // output: "サンプル" //名前付きクラス let サンプル = class サンプル2 { constructor(name, url) { this.name = name; this.url = url; } }; console.log(サンプル.name); //出力: "サンプル2"

コンストラクタ

コンストラクタは特別なメソッドです：

  • コンストラクタの名前は constructor() です。
  • コンストラクタは新しいオブジェクトを作成するときに自動的に実行されます。
  • コンストラクタはオブジェクトのプロパティを初期化するために使用されます。
  • コンストラクタを定義しない場合、JavaScript は空のコンストラクタを自動的に追加します。

クラスのメソッド

私たちはキーワードを使用しますclassクラスを作成し、1つのconstructor()メソッドを追加し、その後任意の数のメソッドを追加できます。

class ClassName { constructor() { ... } method_1() { ... } method_2() { ... } method_3() { ... } }

次の例では、サイトの年齢を返す "age" メソッドを作成します：

例

class サンプル { constructor(name, year) { this.name = name; this.year = year; } age() { let date = new Date(); return date.getFullYear() - this.year; } } let サンプル = new サンプル("サンプル", 2018); document.getElementById("demo").innerHTML = "サンプル" + サンプル.age() + "歳になりました。";

試してみる »

クラスのメソッドにパラメータを渡すこともできます：

例

class サンプル { constructor(name, year) { this.name = name; this.year = year; } age(x) { return x - this.year; } } let date = new Date(); let year = date.getFullYear(); let サンプル = new サンプル("サンプル", 2020); document.getElementById("demo").innerHTML= "サンプル" + サンプル.age(year) + "歳になりました。";

試してみる »

厳格モード "use strict"

クラス宣言とクラス式の本体はどちらも厳格モードで実行されます。たとえば、コンストラクタ、静的メソッド、プロトタイプメソッド、getter、setter はすべて厳格モードで実行されます。

厳格モードに従わない場合は、エラーが発生します：

例

class サンプル { constructor(name, year) { this.name = name; this.year = year; } age() { //date = new Date(); // エラー let date = new Date(); //正しい return date.getFullYear() - this.year; } }

試してみる »

次の例では、クラスで宣言されていない変数を使用しています：

厳格モードの詳細は以下を参照してください：JavaScript 厳格モード(use strict)

参考

クラスメソッド

メソッド 説明
constructor() クラスを作成および初期化するためのコンストラクタ

クラスキーワード

キーワード 説明
extends クラスを継承する
static クラス内で静的メソッドを定義する
super 親クラスのコンストラクタを呼び出す
その他の拡張