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

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

クラスの仕組み	クラスとは
	クラスからオブジェクト(インスタンス)を生成する
	静的メソッド(クラスからオブジェクトを生成しないで利用)
	コンストラクタ
	ゲッターとセッター

クラスとは

class クラス名{
}

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

クラスのサンプルです。

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

2～9行目までがColorというクラスです。
3,6行目は、クラスのメソッドです。
7行目のreturnは、値を返します。返される値を返り値または戻り値と呼びます。

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

クラスからオブジェクトを生成する場合は、new演算子を使用します。インスタンス化といいます。

変数 = 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>

2～9行目までがColorというクラスです。
11～13行目は、インスタンスを生成しています。
15～17行目は、メソッドを実行して値をセットしています。
ポイントは、インスタンスごとに保持するデータが異なる点です。
19～21行目は、メソッドを実行して値を取得しています。

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

静的メソッド(クラスからオブジェクトを生成しないで利用)

static修飾子がつくとインスタンスを生成せずクラスで利用できます。

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

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

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

コンストラクタ

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

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

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

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

  const a = new Color("色は", "赤");
  console.log(a.moji); //色は
  console.log(a.name); //赤
</script>

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

ゲッターとセッター

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>

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