Javascriptにおけるクラス構文と旧来の書き方からの書き換えについて

Javascriptにおけるクラス構文は、ES6(ES2015)から追加されたもので、それ以前のクラスの書き方とは異なり、かなり直感的にわかりやすい書き方ができるようになりました。

Javascriptのクラス構文の書き方例

以下で、Javascriptのクラス構文におけるクラス宣言の方法について記述します。

// 「フルーツ」クラスを宣言
class Fruit{
  // コンストラクタ
  constructor(color,flavor){
    this.color = color;
    this.flavor = flavor;
  }
  // メソッドを定義
  getColor(){
    return this.color;
  }

  setColor(color){
    this.color = color;
  }

  getFlavor(){
    return this.flavor;
  }
}

// Appleというインスタンスを作成
const Apple = new Fruit("red","sweet");

console.log(Apple.getColor()); //結果：red

// Pineappleというインスタンスを作成
const Pineapple = new Fruit("green","sour");

Pineapple.setColor("yellow") // colorにyellowを設定

console.log(Pineapple.getColor()); // 結果：yellow
console.log(Pineapple.getFlavor()); // 結果：sour

以上のような手順で、クラスを宣言することが可能です。

Javascriptのクラス構文におけるクラス継承

継承の方法は、以下のような感じ。

// 「フルーツ」クラス
class Fruit{
  // コンストラクタ
  constructor(color,flavor){
    this.color = color;
    this.flavor = flavor;
  }
  // メソッドを定義
  getColor(){
    return this.color;
  }

  setColor(color){
    this.color = color;
  }

  getFlavor(){
    return this.flavor;
  }
}

// Fruitクラスを継承して、Appleクラスを作成
class Apple extends Fruit{
  constructor(brand){
    super("red","sweet");
    this.brand = brand;
  }
  getBrand(){
    return this.brand;
  }
}
// fujiインスタンスを作成
const fuji = new Apple("fuji");
// Fruitクラスを継承しているため、Fruitクラスのメソッドを使える
console.log(fuji.getFlavor()); // 結果:sweet

console.log(fuji.getBrand()); // 結果:fuji

以上が、クラス構文における継承です。

親のクラスを継承しているため、子クラスのインスタンスは親クラスのメソッドを使うことができます。

Javascriptにおける旧来のクラスの書き方

ここからは、正直あまり今は使うことがない書き方ではありますが、旧来のクラスの書き方について紹介していきます。

実務などで、過去のソースを現代風ES2015以後の新しい書き方に書き換える必要などがある方に読んでいただければ幸いです。

javascriptの昔のクラス宣言の仕方

// Fruitクラスの宣言にあたる部分
function Fruit(color,flavor){
  this.color = color;
  this.flavor = flavor;

  this.getColor = function(){
    return this.color;
  }

  this.setColor = function(color){
    this.color = color;
  }

  this.getFlavor = function(){
    return this.flavor;
  }
};

// appleインスタンスを作成
const apple = new Fruit("red","sweet");

console.log(apple.getColor());　// 結果:red

最後の行で、apple.getColor()が使えるのは、Fruitクラスから作られたインスタンスであるためです。

ES2015以降のクラス構文と比べると、直感的にはわかりにくい部分がありますが、内容としてはほとんど同じことを行っています。

また、prototypeなどを使う場合もありますが、こちらはまた別の記事で書こうと思います。