さくっと学ぶ!! ES2015(ES6)入門 〜Class 編〜

こんにちは。 メゾンマークでフロントエンドを担当している、k-taroです。

第３回目はClass記法をみていきます！

概要

JavaScriptでクラス構文を使用できるようになりました。
ES5までのクラス定義方法といえば、functionにコンストラクタ関数としての機能をもたせ、
newをつけて呼び出すとインスタンスが生成できるという方法で実現していました。

まずはコードからみていきましょう！

ES5

function Hoge (name) {
  this.name = name;
}
Hoge.prototype.sayName = function() {
  console.log(this.name);
}

var hoge = new Hoge('ほげ');
hoge.sayName(); // "ほげ"

これが

ES6

class Hoge {
  constructor(name) {
    this.name = name;
  }
  sayName() {
    console.log(this.name);
  }
}

const hoge = new Hoge('ほげ');
hoge.sayName(); // "ほげ"

一つのブラケットの中にクラスを定義できているので、かなり見やすくなっていますね！

解説

classの実装

class記法では新しい機能が実装されているわけではなく、あくまで今までの書き方よりシンプルにかけるようになった。という感じです。
なので内部的には上記のような構造でclassが実装されています。

継承

ES5までのクラスの継承はなかなか複雑な書き方をしていましたが、class記法で書くとすごくシンプルに実装できます。

ES6

class Parent {
  constructor(name) {
    this.name = name;
  }
  sayName() {
    console.log(this.name);
  }
}

class Child extends Parent {
  constructor(name) {
     super(name);
  }
}

const parent = new Parent('親');
const child = new Parent('子');
parent.sayName(); // 親
child.sayName(); // 子

webサイトを作るだけならあまり必要ないかと思いますが、jQueryでwebアプリ作るときなどは重宝すると思います！

まとめ

• 新しい概念が生まれたわけではなく、新しい記法が増えた！
• 継承がすごく簡単にかけるようになった！

次回はTemplate stringsについて解説します！ それでは！