JavascriptでGeneratorを使う

Generator 手を付けようか迷っていた所でAsync Awaitとかも出てきたしもういいやぁ…と思ってたんですが、何かとやっぱり使いドコロはありそうだったので。

例えばp5.jsとかみたいなアニメーション関連でdrawとかがループされるようなやつ。

繰り返し処理になるので Generator が活きてくる。

const newMessage = function* (mes) {
    var counter = 500;
    while (true) {
        fill("#fff");
        text(`${mes.user}\n${mes.text}`, counter, 200)
        counter = counter - 10;
        yield false;
        if (counter < 20) {
            break;
        }
    }
    yield true;
}

アニメーションでありがちな状態の管理をジェネレータの中に閉じ込めることが出来る。

呼び出し側のコードはこんなん

p5.draw = () => {
    // ...

    if(storeChanged){
        if(gen === null){
            gen = newMessage(newMessage)
        }
        if(gen.next().value){
            store.message = newMessage;
            gen = null;
        }
    }
}

そしてめんどくさかったのがWebpackでのgenerator

regeneratorRuntime is not defined

なるエラーが出て使えなかったので色々探しまわった。

結果、Webpack側の設定で、

module: {
    loaders: [
        { 
            test: /\.js/,
            exclude: /node_modules/,
            loader: "babel" ,
            query:{
                presets:["es2015"],
                plugins:["transform-runtime"]
            }
        },
    ]
}

としてやればいいことが判明。

プラグインは下記コマンドで入ります。

$  npm install babel-plugin-transform-runtime

こちらの内容は、7/26開催の Processing/p5.jsもくもく会@大阪にて試してきました。

p5.jsは実際に自分で書くのは初めてだったけど(コードリーディングは何度か…程度)まぁ色々出来ることも多くてとっつきやすそうな印象でした。