JSでゲームループを作ってみる３ class化したrequestAnimationFrame

require.jsでモジュール化し、ES6のclass構文を使った。

成果物

• demo
• code

コード概要

• root/
  • main.js
  • Loop.js

main.js

const Loop = require('js/app/Loop');    // クラスの型をロード
let loop = new Loop();                  // インスタンス生成
loop.Start();                           // アニメ開始

Loop.js

class Loop {
    constructor() {
        this.requestId = 0;
        ...
        window.onbeforeunload = function(e) {
            this.Stop();
            return "停止！！！！！！";
        }.bind(this);
    };
    _Loop() { ... };
    _Log(msg) { ... };
    Start() {
        this._Loop();
        this.requestId = window.requestAnimationFrame(this.Start.bind(this));
    }
    Stop() { window.cancelAnimationFrame(this.requestId); }
};

ポイント

ポイントはbind(this)。ループしたいメソッドを対象に指定する。

OK

window.requestAnimationFrame(this.Start.bind(this));

NG

window.requestAnimationFrame(this.Start);

NGの方法で実装するとthisがnullになり、Uncaught TypeErrorエラーになる。OKの方法で実装すると解決する。参考

参考

JavaScriptに関する技術情報。

• [JSモジュール化するしくみの規格はCommonJS、AMD、UMD、ES6(ES2015)の4つ]

  • ES Module でJSをモジュール化……できなかった(http://ytyaru.hatenablog.com/entry/2019/03/29/000000)
  • requier.jsを使ってモジュール化してみる

• AMD+ES6(require.js + Babel) on CDN ブラウザだけで完結！モジュール化＆トランスパイル

  • AMD+ES6(require.js + Babel) on CDN クラス構文を使ってみた
  • Babel on CDN で ES Module を使ってみたが動かなかった

　ブラウザのアップデートでJSの新たな言語仕様が使えるようになる。しかし、RaspbianではChromium56以上の更新ができず、古い仕様しか使えない。

　モジュール化はコードをファイルごとに分割する概念。
　require.jsで可能。ブラウザのみで可能なES Moduleはブラウザが古くて未対応。

　上記URLはすべてブラウザだけで開発・実行できる。
　しかし、OSにNode.js等をインストールしてトランスパイルする方法もある。そこで出力されたJSファイルをブラウザで読み込ませて実行する。この方法の欠点は開発環境が必要なこと。これは複雑になるので使いたくない。

　結局、Chromium56で使えるかぎりの仕様で開発することにした。