JavaScriptでClassを使うには？JavaScriptでのオブジェクト指向

2021 7/14

2021.07.14

こんにちは！

子供向けプログラミング教室kobakoスタッフです。

JavaScriptでは以前ではfunctionベースでのオブジェクト指向でした。

以前からオブジェクト指向は使えたのですが、「class」が存在しなかったため、

JavaScriptでオブジェクト指向をやろうとするとどうもとっつきにくい印象が付きまとっていました。

現在のバージョンES6からは、「class」というキーワードが使えるようになり、他のプログラミング言語同様に使いやすくなった印象です。

ところで・・・

この記事を書いている人はだれ？

子供向けプログラミング教室です！

JavaScriptを使ったゲームプログラミング、ゲーム企画が得意な教室です。

プログラミング教室で実際に使用している、学習成果のある教材をYouTube無料配信しています。

YouTubeチャンネルをチェック!

JavaScriptでクラスを使う

JavaScriptでクラスを使う方法を見ていきましょう。

基本的には他のプログラミング言語同様のクラスの使い方ですが、少し気をつけないといけない点があります。

コンストラクターを使う

メンバ変数はコンストラクター（constructor）で定義する必要があります。

その際、メンバ変数にアクセスするため「this」キーワードも同時に必要になる点に注意です。

以下はメンバ変数「name」に「TEST」という文字列を代入している例です。

class GameObject{
  constructor(){
    this.name = "TEST";
  }
}

let gameObject = new GameObject();
console.log(gameObject.name);

関数の定義方法

関数の定義にはfunctionは不要です。

以下は「render」という関数を定義した例です。

class GameObject{
  constructor(){
    this.name = "TEST";
  }
  render(x, y){
    text(this.name, x, y);
  }
}

let gameObject = new GameObject();
gameObject.render(mouseX, mouseY);

static関数の定義方法

個人的にはstatic関数を多用するのですが、JavaScriptでのStatic関数の定義方法も見ておきましょう。

といっても簡単、関数の前にstaticを使えるだけです。

オブジェクトにする必要がない処理は、積極的にstatic関数に落とし込んでいくとすっきりしたコードになりやすいのでおすすめです。

class Logic{
  static distance(x, y, _x, _y){
    return Math.sqrt(Math.pow(_x - x, 2) + Math.pow(_y - y, 2));
  }
}
console.log(Logic.distance(100, 100, mouseX, mouseY));