そろそろ

ES6に手を出してみます。

「Angular4」や「React」や「Vue」など、熱いトピックは他にもありますが、
まずはJSスクラッチの知識を、新しいやり方にアップデートすることにしました。

2年前に書いたコード

このコードは
・「console.log」→ 使える。使ったことある。
・「ブレークポイントを使用したステップ実行やウォッチ」→ 使えない。使ったことない
という社員に向けて、社内勉強会で説明したときのコードです。

そこでは「FizzBuzz」を叩き台にして、実際にデバッグする方法を解説しました。

sample1.html

<!DOCTYPE html>
<html>
    <head>
        <title>test</title>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="css/my.css">
        <script src="js/my1.js"></script>
    </head>
    <body>
        <input id="btnRun" type="button" value="FizzBuzz" />
    </body>
</html>

my.css

input[type="button"] {
    width: 200px;
}

my1.js

// クラス定義
function Normal() {
    for (var i=1; i<=100; i++) {
        this["key"+i] = i+"";
    }
}

function Fizz() {
    for (var i=3; i<=100; i+=3) {
        this["key"+i] = "Fizz";
    }
}

function Buzz() {
    for (var i=5; i<=100; i+=5) {
        this["key"+i] = "Buzz";
    }
}

function FizzBuzz() {
    for (var i=15; i<=100; i+=15) {
        this["key"+i] = "FizzBuzz";
    }
}

// プロトタイプチェイン
Fizz.prototype = new Normal();
Buzz.prototype = new Fizz();
FizzBuzz.prototype = new Buzz();

// 実行
function doFizzBuzz() {
    var fb = new FizzBuzz();
    for (var i=1; i<=100; i++) {
        console.log(fb["key"+i]);
    }
}

window.onload = function() {
    document.getElementById("btnRun").onclick = doFizzBuzz;
};

「FizzBuzz」ってそこまで難しい課題じゃないのに、かなりごっつい実装ですね～。

なんでこんな実装をしたのか？

ちょっと思い出してみたのですが、
確か「プロトタイプチェインを説明する」っていう役割もありました。
そこで、いろいろ悩んだ結果、このコードになったと記憶してます。

ということで

お勉強も兼ねて、ES6で書き換えてみました。

my2.js

// クラス定義
class Normal {
    constructor() {
        for (let i=1; i<=100; i++) {
            this["key"+i] = i+"";
        }
    }    
}

class Fizz extends Normal {
    constructor() {
        super();
        for (let i=3; i<=100; i+=3) {
            this["key"+i] = "Fizz";
        }
    }
}

class Buzz extends Fizz {
    constructor() {
        super();
        for (let i=5; i<=100; i+=5) {
            this["key"+i] = "Buzz";
        }
    }
}

class FizzBuzz extends Buzz {
    constructor() {
        super();
        for (let i=15; i<=100; i+=15) {
            this["key"+i] = "FizzBuzz";
        }
    }
}

// 実行
function doFizzBuzz() {
    var fb = new FizzBuzz();
    for (let i=1; i<=100; i++) {
        console.log(fb["key"+i]);
    }
}

window.onload = () => {
    document.getElementById("btnRun").onclick = doFizzBuzz;
};

なるほど～。
ES6から「クラス」と「コンストラクター」があるんですね。
しかし、ここでちょっと注意が必要でした。

それは・・・

「クラスを継承した場合、コンストラクタ内でsuper();が必要！」

最初はsuper();無しで書いていたのですが、「thisが未定義でエラー」という謎の現象に悩まされました。
どうやら、super();が必要なのは仕様で、継承したクラスには必須とのこと！

結局このエラーにハマって、小一時間くらい試行錯誤しました。(>_<)

まとめ

ES6は便利ですね～。
今後、古いブラウザがサポートされなくなって、ES6で書くのが当たり前になっていくんでしょうね。

ゲーム業界も、ネイティブからブラウザにまた戻ってきているようですし、JavaScriptの技術を磨いておいて損はなさそうですね (^_^;

参考

・スマホ次世代ソーシャルゲーム(HTML5ゲーム)に特化した情報メディア「g123.jp」を正式リリース
https://www.atpress.ne.jp/news/126857

・楽天とBlackstorm、HTML5ベースのモバイルゲームプラットフォーム「R Games」をローンチ
http://thebridge.jp/2017/04/rakuten-launches-mobile-gaming-platform

・バンナム、HTML5活用のオンラインゲーム市場に本格参入　ドリコムと新会社
http://www.itmedia.co.jp/news/articles/1705/22/news072.html

2年前のFizzBuzzをES6で書き換えてみたら

そろそろ

2年前に書いたコード

なんでこんな実装をしたのか？

ということで

それは・・・

まとめ

参考