それ、 CoffeeScript で簡単に書けるよ ( 仮 )

@hidesuke

hidesuke ( 表 )

• ISP とかネトゲ屋さんでスマホ向けゲームを作っている人

• ここ２年間くらい仕事で特殊な js しか書いてない– Sencha Touch– ngGame– node.js– Unity

Osaki.js

• 会社の有志で集まって楽しくプログラミングする会

• 別名：『 enchant.js 部』

hidesuke ( 裏 )

• シャチクミィという同人サークルで社畜グッズを作っている

• http://please.shachiku.me/

CoffeeScript

CoffeeScript

• JS にコンパイル ( 変換？）して使う• Better JavaScript– JavaScript の悪いところの多くが解決してい

る– JS のバッドノウハウとかいちいち覚えてられ

ん• 簡潔な記述• とても小さな言語なのですぐ覚えること

ができる

詳しくはググれ

で、

今日は

クロージャの話をします。

CoffeeScript + enchant.js

で気持ちよく

クロージャが書けた話

クロージャ

クロージャはある関数全体が他の関数（以下、エンクロージャ）の内部で宣言されたときに発生し、内部の関数はエンクロージャのローカル変数（レキシカル変数）を参照する。実行時に外部の関数が実行された際、クロージャが形成される。クロージャは内部の関数のコードとエンクロージャのスコープ内の必要なすべての変数への参照からなる。

-- Wikipedia より

なるほど、まったくわからん。

わかりやすい解説が！

で、

ある日、enchant.js ときゃっきゃうふふしてるときに気付いた

シューティングゲームの N 連射弾

クロー

ジャで

かける！

ご自慢のクロージャ部分

クロージャで書いてみた

解説 ( クロージャ部分 )

弾の種類を表す callback 関数

N 連発の指定初期値は n = 5

弾が発射される間隔のフレーム数初期値は 10 フレーム

前の弾をうってからの経過フレーム数

条件を満たすと弾を発射する関数を戻り値として返却する

解説 ( 呼び出し部分 )

this.curtainFire( さっきのクロージャが返却した関数 ) が定義されていれば毎フレーム呼び

出す

さっきのクロージャにわたすCallback 関数 ( 弾を作って Scene に追加する )

180 フレームに一回、クロージャを呼び出す

弾を打つ関数を作ってもらう

N 連射弾がうてた！

JS で書いたらこうなった

まとめ

• かるい気持ちで CoffeeScript とか発言すると刺される

• クロージャは全然怖くない• https://github.com/hidesuke/

danmaku.enchant.js

まとめ

• かるい気持ちで CoffeeScript とか発言すると刺される

• クロージャは全然怖くない• https://github.com/hidesuke/

danmaku.enchant.js

宿題• 『 slideshare hidesuke 』 でググる• 『 CoffeeScript 』でググる• 『猿でもわかるクロージャ』でググる

私にもクロージャが書ける！

参考文献• CoffeeScript

– http://coffeescript.org/

• CoffeeScript 入門 – プログラム de タマゴ– http://d.hatena.ne.jp/nodamushi/20110108/

1294518316

• [JavaScript] 猿でもわかるクロージャ超入門 まとめ - DQNEO 起業日記– http://dqn.sakusakutto.jp/2009/01/javascript_5.html

• スライド中の画像は以下を使わせていただきました– http://simapantu.blog130.fc2.com/blog-entry-140.html

• Osaki.js ( ステマ )– http://osakijs.blogspot.jp/