【JS】クラスについて解説

今回は、JavaScriptにおけるクラスについて解説していきます。

クラスとは、動作や状態などの構造を定義した設計図のようなものです。

この設計図を使って、同じ性質を持ったインスタンスを作ることができます。

あまり詳しくクラスについては説明しないので、詳細は各自で調べていただければと。

クラスの定義

---

クラスの定義の仕方は以下のようになります。

class MyClass {
  
  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.z = 1;
  }

  increment() {
    this.x++;
  }

}

const myClass = new MyClass(2, 3);

// 2
console.log(myClass.x);
// 3
console.log(myClass.y);
// 1
console.log(myClass.z);
myClass.increment();
// 3
console.log(myClass.x);

constructorで初期化処理を書くことができ、thisはインスタンス自身を指します。

そして、クラスはnew演算子でインスタンスを作成できます。

ちなみに、JavaScriptでは慣習としてクラス名には大文字ではじまる名前をつけます。

メソッド

---

クラスにおけるメソッドの種類は主に3つあります。

それは以下の通り。

名前	説明
プロトタイプメソッド	インスタンスが共通で持つメソッド
インスタンスメソッド	インスタンス自身が持つメソッド
スタティックメソッド	外から参照できるメソッド

コードにすると以下のようになります。

class MyClass {
  constructor() {
    this.method2 = () => {
      // インスタンスメソッド
      console.log("インスタンスメソッドです”);
    };
  }
  increment() {
    // プロトタイプメソッド
    this.x++;
  }
  static method() {
    // スタティックメソッド
    console.log("スタティックメソッドです”);
  }
}

const myClass = new MyClass();
// インスタンスメソッドです
myClass.method2();
// スタティックメソッドです
MyClass.method();

ちなみに、同じ名前のインスタンスメソッドとプロトタイプメソッドがある時は、インスタンスメソッドが優先して呼ばれます。

ただインスタンスメソッドとプロトタイプメソッドの使い分けなどは、正直イマイチわからなかったので、わかる方はコメントいただければと、、

継承

---

extendsキーワードを使うことで、クラスを継承することができます。

継承とは、動作や状態などを引き継いだ新しいクラスを定義することです。

そして、継承する上で知っておくべきことがsuperです。

superを使うことで、親クラスのコンストラクターを呼び出すことができます。

class MyClass {
  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.z = 1;
    this.method2 = () => {
      console.log("インスタンスメソッドです");
    };
  }
  increment() {
    // `this`は`Counter`のインスタンスを参照する
    this.x++;
  }
  static method() {
    // 静的メソッドの処理
    console.log("スタティックメソッドです");
  }
}

class ChildClass extends MyClass {
  constructor(x, y, z) {
    super(x, y);
    this.a = z;
  }
}
const childClass = new ChildClass(1, 2, 3);

// 1
console.log(childClass.x);
// 2
console.log(childClass.y);
// 1
console.log(childClass.z);
// 3
console.log(childClass.a);
childClass.increment();
//2
console.log(childClass.x);
// インスタンスメソッドです
childClass.method2();
// スタティックメソッドです
ChildClass.method();

オブジェクト指向ではこの継承はよく使われるので、覚えておいていただければと。

おわりに

---

クラスについて説明してきました。

今回は割と抽象的な話になってしまったので、少し難しかったかもしれないです。

機会があれば、クラスの具体的な活用方法などについても書こうと思います。

最後に宣伝です。

0からエンジニアになるためのノウハウをブログで発信しています。
https://hinoshin-blog.com/

また、YouTubeでの動画解説も始めました。
YouTubeのvideoIDが不正ですhttps://www.youtube.com/channel/UCqaBUPxazAcXaGSNbky1y4g

インスタの発信も細々とやっています。
https://www.instagram.com/hinoshin_enginner/

興味がある方は、ぜひリンクをクリックして確認してみてください！

おわり