Image

TECH I.S.

TECH I.S
TECH I.S
TECH I.S
TECH I.S

JavaScript クラス

ES6 とも呼ばれる ECMAScript 2015 では、JavaScript クラスが導入されました。

JavaScript クラスは、JavaScript オブジェクトのテンプレートです。


JavaScript クラスの構文

キーワードを使用してclassクラスを作成します。

常にconstructor()という名前のメソッドを追加します。

構文

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

例

class Car {   constructor(name, year) {     this.name = name;     this.year = year;   } }

上記の例では、「Car」という名前のクラスを作成します。

このクラスには、「name」と「year」という 2 つの初期プロパティがあります。


JavaScript クラスはオブジェクトではありません。
JavaScript オブジェクトのテンプレートです。




クラスの使用

クラスがある場合、そのクラスを使用してオブジェクトを作成できます。

例

const myCar1 = new Car("Ford", 2014); const myCar2 = new Car("Audi", 2019);

自分で試してみる»

上記の例では、Car クラスを使用して 2 つのCar オブジェクトを作成します。


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




コンストラクターメソッド

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

  • 「コンストラクター」という正確な名前が必要です
  • 新しいオブジェクトが作成されると自動的に実行されます
  • オブジェクトのプロパティを初期化するために使用されます

コンストラクターメソッドを定義しない場合、JavaScript は空のコンストラクターメソッドを追加します。

クラスメソッド

クラスメソッドは、オブジェクトメソッドと同じ構文で作成されます。

キーワードを使用してclassクラスを作成します。

必ずconstructor()メソッドを追加してください。

次に、任意の数のメソッドを追加します。

構文

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

車の年齢を返す「age」という名前のクラスメソッドを作成します。

例

class Car {   constructor(name, year) {     this.name = name;     this.year = year;   }   age() {     const date = new Date();     return date.getFullYear() - this.year;   } } const myCar = new Car("Ford", 2014); document.getElementById("demo").innerHTML = "My car is " + myCar.age() + " years old.";

自分で試してみる»

パラメータをクラスメソッドに送信できます。

例

class Car {   constructor(name, year) {     this.name = name;     this.year = year;   }   age(x) {     return x - this.year;   } } const date = new Date(); let year = date.getFullYear(); const myCar = new Car("Ford", 2014); document.getElementById("demo").innerHTML= "My car is " + myCar.age(year) + " years old.";

自分で試してみる»

ブラウザのサポート

次の表は、JavaScriptのクラスを完全にサポートする最初のブラウザーバージョンを定義しています。


クロム 49 エッジ 12 Firefox 45 サファリ9 オペラ 36
2016年3月 2015年7月 2016年3月 2015年10月 2016年3月

「use strict」

クラスの構文は、「strictモード」で記述する必要があります。

「strictモード」のルールに従わない場合、エラーが発生します。

例

「strictモード」では、宣言せずに変数を使用するとエラーが発生します。

class Car {   constructor(name, year) {     this.name = name;     this.year = year;   }   age() {     // date = new Date();  // This will not work     const date = new Date(); // This will work     return date.getFullYear() - this.year;   } }

自分で試してみる»

「strictモード」の詳細については、次を参照してください。JS strictモード.



プログラミング学習を加速させる

プログラミングをプロの講師に教えてもらいませんか。

テックアイエスのプログラミングスクールは初心者も大歓迎です。年齢制限もありません。転職・副業に強く、挫折させない手厚いサポートで稼ぐ力を身につけましょう！

スクールの詳細

チュートリアル