JavaScript入門 クラスの仕組みとサンプル

JavaScriptのクラスの仕組みとサンプルです。

目次

クラス

class クラス名{
}
  • クラスは、フィールド(データ)とメソッド(処理)を定義できます。
  • クラスは設計図や型枠のイメージです。
  • ECMAScript 2015 (ES 6)で追加されました。
  • すでにあるプロトタイプベースのシンタックスシュガー(わかりやすく書き換えたもの)です。糖衣構文とも呼ばれます。他の言語のクラスと同じような使い方ができます。
  • 以下はMDNのクラスのリンクです。
    https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Classes

クラスのサンプル

クラスのサンプルです。
3~13行目までがColorというクラスです。

<script>

class Color{
	setName(n){
		this.name = n;
	}
	getName(){
		return this.name;
	}
}
</script>

4,7行目は、クラスのメソッドです。
8行目のreturnは、値を返します。返される値を返り値または戻り値と呼びます。

クラスを利用する

クラスを利用する場合、クラスからオブジェクトを生成する場合と生成しない場合があります。

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

new演算子を使用してオブジェクト(インスタンス)を生成します。インスタンス化といいます。

上記の図はクラスからオブジェクト(インスタンス)を3つ生成したときのイメージです。
オブジェクトごとにデータを管理できます。
例えると、クラスは設計図、型枠でインスタンスは実体です。

コード

クラスからオブジェクトを生成して利用するサンプルです。

<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というクラスです。
12~14行目は、インスタンスを生成しています。
16~18行目は、メソッドを実行して値をセットしています。
ポイントは、インスタンスごとに保持するデータが異なる点です。
20~22行目は、メソッドを実行して値を取得しています。

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

2.クラスからオブジェクト(インスタンス)を生成しない

クラスからオブジェクトを生成しないサンプルです。
static修飾子を追加します。new演算子がありませんがクラスを使用できます。

<script>

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

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

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

コンストラクタ

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行目は、インスタンス生成時に値をセットしています。

ゲッターとセッター

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行目は、値を取得しています。

関連の記事

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

△上に戻る