こちらの記事で、CoffeeScriptについて調べました。
mmorley.hatenablog.com
せっかくなので、1度は使ってみよう!ということで、CoffeeScriptを実際に試してみます。
Cocos CreatorでJavaScriptとCoffeeScriptが使えるので、実行環境はすでに整っています。
やる内容は、以前やったCocosCreatorのチュートリアルです。
JavaScriptコードをCoffeeScriptに書き換えて、CoffeeScriptの作法やその効果を体験したいと思います。
チュートリアルのリンクです。
その1はシーンの作成なのでコードは書きません。コードを書くのはその2からです。
書き換え作業で特徴的だった部分をまとめました。
目次
使用環境
私が使用している環境です。
- Mac OS X El Capitan Version 10.11.4
- Cocos Creator Version 1.0.1
- ブラウザ:Google Chrome Version 50.0.2661.86 (64-bit)
JavaScriptをCoffeeScriptに書き直す
チュートリアルのJavaScriptのコードをCoffeeScriptに書き直しました。
CoffeeScriptの特徴的なところや、手こずったところをピックアップします。
ちなみにCocosCreatorでは、JavaScriptのファイルの拡張子は『*.js』ですが、CoffeeScriptでは『*.Coffee』になります。
その1
元のJavasScriptのコード
// Player.js //...省略 properties: { // メインキャラクタのジャンプの高さ jumpHeight: 0, // メインキャラクタのジャンプの時間 jumpDuration: 0, // 最大移動速度 maxMoveSpeed: 0, // 加速度 accel: 0, }, //...省略
CoffeeScriptで書き直したコード
// Player.coffee
#...省略
properties:
# メインキャラクタのジャンプの高さ
jumpHeight: 0
# メインキャラクタのジャンプの時間
jumpDuration: 0
# 最大移動速度
maxMoveSpeed: 0
# 加速度
accel: 0
#...省略
CoffeeScriptの説明
コメントの書き方
- 単一行のコメントは先頭に#を付けます。
- 複数行の場合は ###で囲みます。
### ここにコメントを 書きます。 ###
{}の代わりにインデント
インデント(行の先頭を1段右に下げる)ことで{}の代わりになります。
{}を付けても構いません。
要素の区切りのカンマを省略できる
改行だけでOKです。カンマ使っても構いません。
その2
元のJavasScriptのコード
// Player.js setJumpAction: function () { // ジャンプアップ var jumpUp = cc.moveBy(this.jumpDuration, cc.p(0, this.jumpHeight)).easing(cc.easeCubicActionOut()); // ジャンプダウン var jumpDown = cc.moveBy(this.jumpDuration, cc.p(0, -this.jumpHeight)).easing(cc.easeCubicActionIn()); // リピート return cc.repeatForever(cc.sequence(jumpUp, jumpDown)); },
CoffeeScriptで書き直したコード
// Player.coffee
setJumpAction: ->
# ジャンプアップ
jumpUp = cc.moveBy(@jumpDuration, cc.p 0, @jumpHeight).easing cc.easeCubicActionOut()
#ジャンプダウン
jumpDown = cc.moveBy(@jumpDuration, cc.p 0, -@jumpHeight).easing cc.easeCubicActionIn()
# アクションが終わった後に、他の定義されたメソッドを呼び出すためのコールバック関数を追加
callback = cc.callFunc @playJumpSound, @
#絶えず繰り返し実行、毎回着地の後に音を再生するためにコールバックを呼び出す
cc.repeatForever cc.sequence jumpUp, jumpDown, callback
CoffeeScriptの説明
関数の宣言は、functionの代わりに->を使う
引数がある場合は、下記のコードになります。
// JavaScriptの場合 setJumpAction = function(a, b) { return a + b; }; # CoffeeScriptの場合 setJumpAction = (a, b)-> a + b
インデントを下げている部分が関数のブロック
varで宣言しない
勝手に補完してくれます。
末尾の;(セミコロン)が不要
thisのかわりに@を使う
関数の呼び出しは、関数名(スペース)引数1(カンマ)引数2
()を省略出来ます。()を使っても構いません。
下記の部分のように1行にまとめて書くと慣れるまで読みづらいですね。
jumpUp = cc.moveBy(@jumpDuration, cc.p 0, @jumpHeight).easing cc.easeCubicActionOut()
でも分けて書くと、いちいち変数名を考えなくちゃいけないのが面倒です。
区切りがあいまいだったり、読みづらくなるようだったら()使ったほうがいいですね。
引数の無い関数の呼び出しには必ず()を付ける *ここ重要
ここが一番重要でした。
CoffeeScriptって全部かっこを省略できるんだ〜と思ってたので罠でした。
デバッグ時にわかりづらかったです。
最後の行がreturnで返される
値を返したくない場合は、最後の行をreturnにします。
その3
元のJavasScriptのコード
// Player.js setInputControl: function () { var self = this; // キーボードのイベントリスナーを追加 cc.eventManager.addListener({ event: cc.EventListener.KEYBOARD, // キーを押したときに、それが設定した方向ボタンであれば、対応する方向に加速度を設定します。 onKeyPressed: function(keyCode, event) { switch(keyCode) { case cc.KEY.a: self.accLeft = true; self.accRight = false; break; case cc.KEY.d: self.accLeft = false; self.accRight = true; break; } }, // キーを離したときに、その方向の加速を辞めます。 onKeyReleased: function(keyCode, event) { switch(keyCode) { case cc.KEY.a: self.accLeft = false; break; case cc.KEY.d: self.accRight = false; break; } } }, self.node); },
CoffeeScriptで書き直したコード
setInputControl: -> self = @ #キーボードのイベントリスナーを追加 cc.eventManager.addListener( event: cc.EventListener.KEYBOARD #キーを押したときに、それが設定した方向ボタンであれば、対応する方向に加速度を設定します。 onKeyPressed: (keyCode, event) -> switch keyCode when cc.KEY.a self.accLeft = true self.accRight = false when cc.KEY.d self.accLeft = false self.accRight = true #キーを離したときに、その方向の加速を辞めます。 onKeyReleased: (keyCode, event) -> switch keyCode when cc.KEY.a self.accLeft = false when cc.KEY.d self.accRight = false self.node); return
CoffeeScriptの説明
swich caseは、switch when、breakは省略可
最初のswich文は、JavaScriptに自動変換されると下記のようにreturnで値を返します。
switch (keyCode) { case cc.KEY.a: self.accLeft = true; return self.accRight = false; case cc.KEY.d: self.accLeft = false; return self.accRight = true; }
問題なく動いていましたが、何か気持ち悪いですね。
breakを書くと、returnをやめさせることができます。
あとがき
CoffeeScriptは、いろいろコードを省略する書き方があるので、評判通りスッキリ書ける感がありました。
引数のない関数を呼び出す場合は、かならずカッコが必要になるのは盲点でした。
デバッグに手こずりました。
今回は、上手く動くことがわかっているJavaScriptを書き換えだったので、そうじゃない場合はもっとデバッグが大変かもしれません。
疑う部分が増えるのは大変です。
ただ、全く使う気がなくなったかというとそうでもありません。簡潔に書けるのは魅力的です。CoffeeScriptの書き方を網羅したわけでもないので、評価するにはまだ早いかもしれません。