概要

JavaScriptを学習、理解を深めるため「JavaScript Primer 迷わないための入門書」を読み、
理解した内容等を記載していく。

「【JavaScript】JavaScript入門一覧」に他の記事をまとめています。

この記事で理解できること

クラスとは何か
クラスの定義方法
クラスのインスタンス化

クラスとは

動作や状態を定義した構造のこと。
クラスを基に作成したオブジェクトをインスタンスと呼ぶ。

よく「クラス = 設計図」という言葉を見かけるので、その例をとって少し自分なりの解釈を加えてみる。

「クラス = 設計図」の解釈：建築士と設計図

ドラマや映画などで、建築士が大きな用紙にある建設予定の建物(家やマンション、ビル)の設計図を描いている描写(筒状の入れ物に設計図を入れて背負っていたり)を見かけたことがあると思う。

ここでいう設計図がまさにクラスで、
プログラミングの世界では「あるモノ」を作りたい(表現したい)場合に作成する設計図をクラスと呼ぶ。
そして、その設計図(クラス)をもとに実態(家やマンション、ビル = インスタンス)を作成する。

「クラス = 設計図」の解釈やクラスのイメージが少しできたと思う。
以下は、先ほどの文章内で出てきた登場人物の解釈一覧。

概要	建築の世界	プログラミングの世界
作成したい「あるモノ」を設計、実際に設計図を作成する人	建築士	エンジニア
設計図を描く時に使用する道具	大きな用紙	コードエディタ
作成したい「あるモノ」の情報、構造を描く・表現したもの	設計図	クラス
作成したい「あるモノ」	建設予定の建物	作成予定のオブジェクト(インスタンス)

クラスの定義

クラスを定義するにはclass構文を使用する(ES2015から導入)
関数の関数宣言と関数式に似た性質として、クラス宣言文とクラス式がある。
JavaSctriptでは慣習として、クラス名は大文字で開始する。

※class構文で定義したクラスは関数オブジェクトの一種であることも片隅に覚えておいた方が良い。

クラス宣言文

classキーワードを使用し、class クラス名{ }でクラスを定義できる。
クラスには初期化を行うコンストラクタ(メソッド)が必ず存在し、constructorという名前のメソッドとして定義する。

メソッドとは
オブジェクトのプロパティとして定義した関数のことをメソッドと呼ぶ。

// class クラス名{ }でクラスを定義
class MyClass {
    // constructor() { 初期化処理 } でコンストラクタを定義
    constructor() {
        // 初期化処理
    };
}

クラス式

クラスを変数へ代入し値として定義する方法。
クラス式ではクラス名を省略できる。(関数における匿名関数のように)

// クラス名を省略し、変数MyClassへ代入
const MyClass = class {
    constructor() { };
};

【Tips】コンストラクタ(メソッド)について

インスタンスに関する状態の初期化を行うメソッド。
初期化処理が特にない場合は、コンストラクタ(メソッド)を省略できる。
コンストラクタ(メソッド)省略した場合、内部的には自動的に空のコンストラクタが定義される。
そのため、クラスにはコンストラクタ(メソッド)は必ず存在することになる。

// コンストラクタの処理が不要な場合は省略できる
class MyClass {
}

省略しても(特に初期化処理がなくても)内部的には、以下のようにコンストラクタは存在する。

class MyClass {
  // 内部的には空のコンストラクタが定義される
  constructor() {
  }
}

クラスのインスタンス化

定義したクラスからインスタンス(クラスをもとに作成したオブジェクト)を作成することをインスタンス化と呼ぶ。
new クラス名();とnew演算子を使用し、インスタンス化を行う。

// Humanというクラスを定義する(コンストラクタなしの場合)
class Human { };

// インスタンス化(しただけ)
new Human();

// Humanクラスからインスタンス化したオブジェクトを変数Taroに代入
const Taro = new Human();

// Humanクラスからインスタンス化したオブジェクトを変数Hanakoに代入
const Hanako = new Human();

// instanceof演算子で、右辺に指定したクラスから作成されたインスタンスかどうか判別できる
console.log(Taro instanceof Human);    // => true(Humanクラスから作成されたインスタンスであることが分かる)
console.log(Hanako instanceof Human);  // => true(Humanクラスから作成されたインスタンスであることが分かる)

【JavaScript】クラス① 〜クラスの定義・インスタンス化〜

概要