PR

 2015年にJavaScriptの標準仕様として提案されたES2015(ES6)。その最新仕様を優しく紹介します。3回目の今回は、オブジェクト指向とジェネレーターに関する新機能を紹介します。ちなみに、最新の言語仕様であるES2015を利用しますので、最新のブラウザー(Chrome50以降やFirefox46以降)あるいは、Node.jsの最新バージョン6以降をダウンロードして試してみてください(http://nodejs.org)。

クラス定義が可能になった!

 そもそも、オブジェクト指向とは、操作手順よりも操作対象に重点を置く考え方のことです。ある関連する複数のデータと、それらのデータを操作するメソッドをオブジェクトという一つの単位で管理します。ES2015以前のJavaScriptでも、オブジェクトは利用できますので、なんとなく想像が付くのではないでしょうか。

 ところが、ES2015以前で高度なオブジェクト指向を実践しようとした場合、いろいろなノウハウを駆使して、オブジェクト指向を実践する必要がありました。もちろん、JavaScriptが備えるプロトタイプベースのオブジェクト指向は、しっかりと理解し、正しく使えば、それなりにうまく動くものです。とは言え、少し規模が大きくなると、スマートに扱うのが難しくなるものでした。

 しかし、ES2015では、ついにclassによるクラス定義が言語に追加されました。これによって、自然にクラスを定義して利用できるので、JavaやRuby、PHPなど他のプログラミング言語で培ったオブジェクト指向のノウハウを自然な形で活かすことができます。

 クラス定義と、クラスのオブジェクトを生成するには、以下のように記述します。



// クラスの定義
class Foo {
  constructor() { ... }
  method1() { ... }
  method2() { ... }
}
// クラスのオブジェクトを生成
let foo = new Foo();

 ちなみに、constructor()メソッドというのは、クラスのオブジェクトが生成されたときに、自動的に実行されるメソッドのことです。

 例えば、矩形の面積を表すRectクラスを定義すると以下のようになります。


// クラスの定義
class Rect {
  // コンストラクタの定義
  constructor(x1, y1, x2, y2) {
    this.x1 = x1;
    this.y1 = y1;
    this.x2 = x2;
    this.y2 = y2;
  }
  // 幅を計算
  getWidth() {
    return this.x2 - this.x1;
  }
  // 高さを計算
  getHeight() {
    return this.y2 - this.y1;
  }
  // 面積を計算
  getArea() {
    return this.getWidth() * this.getHeight();
  }
}
// Rectクラスのオブジェクトを生成する
const r1 = new Rect(0,0, 8,5);
console.log( r1.getArea() ); // 結果→ 40