ES6 Classのメソッドについて

Question

class Hoge {
  method1() {
    ・・・
  }
  method2 = () => {
    ・・・
  }
}

method1とmethod2の書き方の意味は違うのでしょうか？どのように使いわけるのでしょうか？

Answer 1

method1は通常の書き方です。method2は、2018年3月3日現在、仕様候補(stage 3)として提案中であるClass field declarations(クラスフィールド宣言)を用いた書き方です。**まだ、仕様には含まれておらず、また、このまま仕様に含まれることが確定されたわけではありません。**Babelでのトランスパイルは対応していますが、ブラウザでは対応している物が一つもありません。

さて、method2ですが、これはインスタンスメソッドの定義と言うより、インスタンス変数の定義です。現在のECMAScriptではclassの内側にメソッド以外は直接書くことができません。そこで、Javaのような他の言語のように、インスタンス変数も宣言できるようにしたのがクラスフィールド宣言になります。このクラスフィールド宣言により、インスタンス作成時に、そのインスタンス変数がプロパティとして作成されます。また、宣言と共に初期化子(代入演算子=と右辺のこと、これ自体はオプション)があれば、その値で初期化されるとなります。

つまり、文法的には

class Hoge {
    x = 0;
    y = () => { return this.x; };
}

でのxとyはどちらもインスタンス変数であり、Hogeのインスタンス作成時に、それぞれ0と() => { return this.x; }に初期化されます。ただ、ECMAScriptではインスタンス変数はプロパティです。値が関数であるプロパティはメソッドです。ですので、y自体がメソッドであると言っても問題ありません。

ここで重要なのは、それぞれ代入される右辺が評価されるタイミングがそれぞれのインスタンス作成時であり、thisがそのインスタンスであると言うことです。つまり、このタイミングで評価される() => { return this.x; }においてのthisはそのインスタンス自身に束縛されることになります。

---

うん、(自分で書いたのに)なんかよくわからない。ということで、ここまで踏まえて、これがどのようなときに役に立つかをみながら、その動きを理解したいと思います。まず、次のようなコードをあったとします。

class CountSec {
  constructor(count) {
    this.count = count;
  }
  countDown() {
    console.log(this.count);
    if (this.count > 0) {
      this.count--;
      setTimeout(this.countDown, 1000);
    }
  }
}
const ct = new CountSec(10);
ct.countDown();

指定された回数分だけ1秒毎(あまり正確ではない)にカウントダウンするという意図のコードです。**このコードはこのままでは正常に動作しません。**二回目のcountDownの呼び出しではthisがそのインスタンスではなくなるからです。これはアロー関数やbind等でthisが束縛されていない関数がコールバック等で呼び出されるとき、thisは呼び出し側の関数に依存することに起因します。いわゆるthis問題というものです。これを現在のECMAScript 2017で修正する方法は三つです。

一つ目は、アロー関数で囲むことです。アロー関数は評価時にthisを束縛することができますので、コールバックでの呼び出し時もthisが変わることはありません。

class CountSec {
  constructor(count) {
    this.count = count;
  }
  countDown() {
    console.log(this.count);
    if (this.count > 0) {
      this.count--;
      setTimeout(() => {
        this.countDown();
      }, 1000);
    }
  }
}
const ct = new CountSec(10);
ct.countDown();

二つ目は、bindを用いてthisに束縛してしまうと言う方法です。こちらも、コールバックでの呼び出し時にthisは変わりません。

class CountSec {
  constructor(count) {
    this.count = count;
  }
  countDown() {
    console.log(this.count);
    if (this.count > 0) {
      this.count--;
      setTimeout(this.countDown.bind(this), 1000);
    }
  }
}
const ct = new CountSec(10);
ct.countDown();

上二つはsetTimeout()が呼び出される度に新たな関数を作成しているのと同じです。ですが、初めからthisが束縛されているcountDownが一つあれば十分です。そこで、三つ目がコンストラクタでbindした関数をプロパティ(それは即ちそのインスタンス専用のメソッドです)として登録してしまうという方法です。

class CountSec {
  constructor(count) {
    this.count = count;
    this.countDown = this.countDown.bind(this);
  }
  countDown() {
    console.log(this.count);
    if (this.count > 0) {
      this.count--;
      setTimeout(this.countDown, 1000);
    }
  }
}
const ct = new CountSec(10);
ct.countDown();

これらの方法は、いずれも初めのコードよりは冗長です。よく読めば意味がわからないわけではありませんが、なぜそんなことをするのかという意図がつかみにくいです。ましてや、一つ目と二つ目は毎回関数が生成されること、三つ目はbindの位置とメソッド定義位置が離れてしまうことを考えると、あまり良い方法とは言えません。

そこで考えられたのがクラスフィールド宣言を使う方法です。これを使った場合は次のように書けます。

class CountSec {
  constructor(count) {
    this.count = count;
  }
  countDown = () => {
    console.log(this.count);
    if (this.count > 0) {
      this.count--;
      setTimeout(this.countDown, 1000);
    }
  }
}
const ct = new CountSec(10);
ct.countDown();

countDownは親であるprototypeに登録されるようなメソッドではなく、インスタンス変数ではありますが、thisを束縛すると言うことはそのインスタンス専用になっている事であり、そこは問題にはなりません。thisの束縛があるという違い以外は通常のメソッドと同様に使えます。最初の三つのコードのような問題もありません。

さて、この方法を使う機会が思いつかないという人が居るかも知れませんが、使う機会が多いものを知っていますので、紹介します。それはReactです。Handling Events - Reactにその実例が載っています。Reactではクリックなどのイベント発生時に呼び出す関数を登録するのですが、そのままthis.handelEvent等と書いてしまうと同じ問題が発生します。それを防ぐ手段として、クラスフィールド宣言は有効とされています。Reactを使う場合、いずれにしてもJSXのためにBabelをつかいますから、Babelが対応しているクラスフィールド宣言を使ってもさほど問題が無いと考えられます。

最後に、通常とのメソッドとの違いです。一番大きいのは、このクラスフィールド宣言ではインスタンスが生成させる度にそのインスタンス変数としての関数が生成されると言うことです。そのため、本当に必要であるという場合以外は使用すべきではないでしょう。

---

【おまけ】

CoffeeScriptならもっとすっきり書けるよ！

class CountSec
  constructor: (count) ->
    this.count = count
  countDown: =>
    console.log(this.count)
    if this.count > 0
      this.count--
      setTimeout(this.countDown, 1000)
ct = new CountSec(10)
ct.countDown()

Comments

[yoppy0066]

細かく教えていただきありがとうございます。納得できました。

Answer 2

いまのところ、正式に取り入れられているのはmethod1の書き方のみです。

method2で書くと、メソッドがプロトタイプに乗っからない形となりますので、特殊な使い方をしたい場合以外にはメリットはありません（Babel）。