JavaScriptでclass構文を使ってみた

はじめに

今作っている3D RPGを管理するためにクラス化して管理したくなって、ちょっと調べてみた。
で、privateメソッドとかできるのかな？と調べてみても、private 変数は宣言できてもメソッドはできないらしい。その辺も踏まえてちょっと試してみた。
ちなみに、ECMAScript 2015(ES6)で導入された機能らしい。
Windows10のIE11でエラーになったので、IEでは動かない。
Edgeはclass構文は問題なし。
private変数が使えなかった。
まぁ、Edgeに関してはChromiumベースになったら状況変わりそうだけど。
Appleはしらん。
ちなみにprivate fieldはいつ策定されたのかよくわからない・・・

class

JavaScriptでclassはこんな感じで書ける。

class Main{
    constructor(){
    }
}

とってもシンプル。
constructor()はなくても動作する模様。

変数の宣言

さて、変数の宣言はこんな感じ。

class Main{
    testVal = 1;
    #privateVal = 2;

    constructor(){
    }
}

変数の先頭に#を付けるとprivateな変数になる。
つけないと、publicな変数になる。

参照方法は

class Main{
    testVal = 1;
    #privateVal = 2;

    constructor(){
        alert(this.testVal + " / " + this.#privateVal );
    }
}

thisを付けて変数を参照することで利用可能となる。
インスタンスを作成した場合はこんな感じ

var main = new Main();
alert(main.testVal);

まぁ、普通の参照方法ですね。

private メソッドを考える

privateメソッドはメソッドの先頭に#を付ければできるかと思ったら、できなかった。
実現するにはググるといくつか出てくると思うが、自分の考えた方法はこんな感じ

class Main{
    //private fiels
    testVal = 1;
    #privateVal = 2;

    //private method
    #privateMethod = function(){
        return this.#privateVal;
    }

    constructor(){
    }

    callPrivateTestMethod(){
        alert(this.#privateMethod());
    }
}

var main;
window.addEventListener("load", function(e){
    main = new Main();
    main.callPrivateTestMethod();
});

private変数にメソッドを割り当ててprivateメソッドにする方法。
個人的にはこれで十分。

最後に

この方法がいいかどうかはわからないけど、とりあえずこれで3D RPGで使うクラスが作れそう。
お仕事でも使ってみたいけど、IEで動かす可能性も捨てきれないのがもやもやする。
IE早く消えてなくなってくれ！

あと、private 変数を#で始めるのはなんか、気持ち悪いｗ

参考

• ［JavaScript］クラスの書き方（クラスの継承・メソッドのオーバーライド）