JavaScript クラスのサンプル

JavaScriptのクラスのサンプルです。

目次

クラス

class クラス名{
}
  • クラスは、フィールド(データ)とメソッド(処理)を定義できます。
  • クラスからオブジェクト(インスタンス)を任意の数分、生成できます。
    その場合、オブジェクトごとにデータを保持できます。
    クラスは定義、設計図、型枠のイメージで、オブジェクトは実体です。
  • ECMAScript 2015 (ES 6)で追加されました。
  • すでにあるプロトタイプベースのシンタックスシュガー(わかりやすく書き換えたもの)です。糖衣構文とも呼ばれます。
  • 以下はMDNのクラスのリンクです。
    https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Classes

クラスからオブジェクト(インスタンス)を生成するイメージ

クラスからオブジェクト(インスタンス)を生成するイメージです。
オブジェクトごとにデータを管理できます。
例えると、クラスは定義、設計図、型枠でインスタンスは実体です。
new演算子を使用してオブジェクト(インスタンス)を生成します。インスタンス化といいます。

クラスのサンプル

クラスのサンプルです。

<script>

class Color{
	setName(n){
		this.name = n;
	}
	getName(){
		return this.name;
	}
}

let a = new Color();
let b = new Color();
let c = new Color();

a.setName("赤");
b.setName("黄");
c.setName("青");

console.log(a.getName()); //赤
console.log(b.getName()); //黄
console.log(c.getName()); //青
</script>

3~10行目までがColorというクラスです。
4,7行目は、クラスのメソッドです。
8行目のreturnは、値を返します。返される値を返り値または戻り値と呼びます。
12~14行目は、インスタンスを生成しています。
16~18行目は、メソッドを実行して値をセットしています。
ポイントは、インスタンスごとに保持するデータが異なる点です。
20~22行目は、メソッドを実行して値を取得しています。

クラスの定義の前にnewすることはできません。例えば12行目を2行目に持ってくるとエラーになります。

 

ゲッターとセッター

get 名称()
set 名称()

ゲッターは値を取得し、セッターは値をセットする役割を持ちます。
メソッド名の前にgetまたはsetを追加します。

ゲッターとセッターのサンプルです。

<script>

class Color{
	set name(n){
		this._name = n;
	}
	get name(){
		return this._name;
	}
}

let a = new Color();

a.name = "赤";

console.log(a.name); //赤
</script>

4行目は、セッターです。setという語があります。
7行目は、ゲッターです。getという語があります。
14行目は、値をイコール(=)で代入しています。
16行目は、値を取得しています。

 

コンストラクタ

class クラス名{
    constructor(引数){
    }
}

コンストラクタは、クラスのインスタンス生成時に実行されます。
クラスの中にconstracutorという語を追加します。
初期値をセットする時などに使用されます。

コンストラクタのサンプルです。

<script>

class Color{
	constructor(m,n){
		this.moji = m;
		this.name = n;
	}
}

let a = new Color("色は","赤");

console.log(a.moji); //色は
console.log(a.name); //赤
</script>

4行目は、コンストラクタ(constructor)です。クラス内に1つのみ定義できます。
10行目は、インスタンス生成時に値をセットしています。

 

静的メソッド

class クラス名 {
     static メソッド名() {
      }
}

静的メソッドは、クラスをインスタンス化しなくても使用できるメソッドです。
メソッド名の前にstaticを追加します。

静的メソッドのサンプルです。

<script>

class Color{
	static getName(){
		return "赤です";
	}
}

console.log(Color.getName()); //赤です
</script>

4行目は、staticがついています。静的メソッドです。クラスメソッドとも呼びます。
9行目は、インスタンスを生成していませんが、クラスのメソッドを実行しています。

関連の記事

JavaScript クラスのサンプル
JavaScript オブジェクトを作成するサンプル
JavaScript prototypeでメソッドを追加するサンプル
JavaScript 継承のサンプル(プロトタイプチェーン)

△上に戻る