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

#そろそろ
ES6に手を出してみます。

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

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

そこでは「<a href="https://ja.wikipedia.org/wiki/Fizz_Buzz" target="_blank">FizzBuzz</a>」を叩き台にして、実際にデバッグする方法を解説しました。

```html: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>
```

```css:my.css
input[type="button"] {
    width: 200px;
}
```

```javascript: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;
};
```

「<a href="https://ja.wikipedia.org/wiki/Fizz_Buzz" target="_blank">FizzBuzz</a>」ってそこまで難しい課題じゃないのに、かなりごっつい実装ですね～。

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

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

##ということで
お勉強も兼ねて、ES6で書き換えてみました。

```javascript: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