Canvasアニメーションを JavaScript->CoffeeScriptに書き換え

■Canvasアニメーションを JavaScript->CoffeeScriptに書き換え

**

enchant.jsやtitaniumはじめ、Node.jsなども
最近はJavascriptで書かずCoffeeScriptに移行されている様子。
自作のソーシャルアプリもメンテの事を考えると
移行しておこうと思い勉強も兼ねて変換してみた。

つくったサンプル

アイコンが時間と共に右に移動する。
canvasをクリックすると止まる。
ただそれだけ（笑。

はまった点

・Firebugなどで返される行数が、実際の行数と違う。

・最終行の結果が自動的にreturnされてしまうのを防ぐ為に
明示的にreturnを書いているが、これが頻発すると見にくい。

・function文ではなくfunction式で変換されるため、
実行順序などを考えずにゆるく書くと痛い目にあう
※function文では関数の巻き上げで、スコープの一番先頭に移動される。

・ECMA Script5のsetter/getterがCoffeeScriptでは書けない

準備

30px×30px程度の画像を２枚用意しておく。

書き換え前

<div style="text-align:center;">
<canvas id="targetCanvas" width="315" height="318" style="border:0px solid #CCC;"></canvas>
</div>
<script type="text/javascript">
//制御
var timerID;
var imgX=0;
//マウス座標
var mouseX;
var mouseY;
var stopFlag=0;
window.onload = function(){
setTimer();
}
//フレームレート
function setTimer(){
clearInterval(timerID);
timerID = setInterval("setMove()", 100);
}
//座標の移動
function setMove(){
if(stopFlag==0){
imgX += 5;
}
if(imgX >= 300){
imgX = 300;
}
draw();
}

//描画
function draw(){
//Canvas
var canvas=document.getElementById('targetCanvas');
if (!canvas||!canvas.getContext) return false;
var ctx = canvas.getContext('2d');
//images
object1_img = new Image();
object1_img.src = "http://xxxxxx/img/icon/PNG/textured/agent.png";
object2_img = new Image();
object2_img.src = "http://xxxxxx/img/icon/PNG/textured/lab.png";
//rate
ctx.drawImage(object1_img,imgX, 0);
//txt
ctx.font = "15px 'Times New Roman'";
ctx.fillStyle = "White";
ctx.fillText("read",50,60);
if(stopFlag==1){
ctx.drawImage(object2_img,imgX, 0);
ctx.font = "15px 'Times New Roman'";
ctx.fillStyle = "White";
ctx.fillText("touch",40,80);
}
}

//マウス座標
var targetCanvas = document.getElementById('targetCanvas');
targetCanvas.onmousedown = mouseDownListner;
function mouseDownListner(e) {
var hit_value;
//マウス座標の取得
adjustXY(e);
hit_value = hitJudgement();
}
function hitJudgement(){
//console.log(mouseX);
if(mouseX > 0){
stopFlag = 1;
}
}
//呼びだし時にマウス座標を返す関数
function adjustXY(e) {
var rect = e.target.getBoundingClientRect();
mouseX = e.clientX - rect.left;
mouseY = e.clientY - rect.top;
}
</script>

書き換え後

<script type="text/javascript" src="http://jashkenas.github.com/coffee-script/extras/coffee-script.js"></script>
<div style="text-align:center;">
<canvas id="targetCanvas" width="300" height="100" style="border:1px solid #CCC;"></canvas>
<script type="text/coffeescript">
#CoffeeScript
console.log('CoffeeScript Begin')

#
timerID = 0
a_num = 0
stopFlag = 0
imgX = 0
mouseX = 0
mouseY = 0

window.onload = -> setTimer();

setTimer = ->
clearInterval(timerID);
#timerID = setInterval("setMove()", 100)
timerID = setInterval ->
setMove()
return
,1000
return

setMove = ->
if stopFlag is 0
imgX += 5
if imgX >= 300
imgX = 300
draw()
return

draw = ->
canvas = document.getElementById('targetCanvas')
ctx = canvas.getContext('2d')
#images
object1_img = new Image()
object1_img.src = "http://bank.blamestitch.com/img/icon/PNG/textured/agent.png"
object2_img = new Image();
object2_img.src = "http://bank.blamestitch.com/img/icon/PNG/textured/lab.png"
#rate
ctx.drawImage(object1_img,imgX, 0)
#txt
ctx.font = "15px 'Times New Roman'"
ctx.fillStyle = "Red"
ctx.fillText("read",50,60)
if stopFlag is 1
ctx.drawImage(object2_img,imgX, 0)
ctx.font = "15px 'Times New Roman'"
ctx.fillStyle = "Red"
ctx.fillText("touch",40,80)
return

mouseDownListner = (e) -> 
adjustXY e
hit_value = hitJudgement()
return

hitJudgement = ->
if mouseX > 0
stopFlag = 1
console.log('stop')
return

adjustXY = (e) ->
rect = e.target.getBoundingClientRect()
mouseX = e.clientX - rect.left
mouseY = e.clientY - rect.top
return

targetCanvas = document.getElementById('targetCanvas')
targetCanvas.onmousedown = mouseDownListner

</script>

■coffee Scriptを実行環境の作成

ブラウザから直接実行する方法

<script type="text/coffeescript">
# 実行したいCoffeeScript構文
console.log('aaaaa')
</script>
<script type="text/javascript" src="http://jashkenas.github.com/coffee-script/extras/coffee-script.js"></script>

linux上でコンパイルする方法

[インストール]

前回socket.IOをインストールした時に、
npmまではできているので、
coffee-scriptをnpmで叩くだけ。

□node.jsのインストール＋npm(the Node Package Manager)のインストール
http://d.hatena.ne.jp/oggata/20110913/1315924766　<-自分の手順。<-------------npmの準備が出来ていればここから
□coffee-scriptのインストール

×npm install coffee-script
〇npm install -g coffee-script

coffee -v
CoffeeScript version 1.2.0

終わり。

[テスト(保存->実行)]

vim test.coffee
-------------------
debug = (x)-> console.log(x)
debug num for num in [1,2,3]
-------------------
#coffee test.coffee

[テスト(REPL)]

#coffee
coffee>console.log "Hello, World!"
coffee>a=3
coffee>b=a*4

[Javascriptにコンパイル]

#coffee -b -c test.coffee　<-b[関数ラッパーを含めない] c[.jsファイルを作成する]
>同じディレクトリにtest.jsが出来る
#node test.js
>実行結果

[継続的コンパイル]

#coffee -c -w test.coffee　<-wオプション

[ディレクトリ毎コンパイル]

src/
↓ hello.coffee
↓ bonjour.coffee
↓
lib/
hello.js
bonjour.js

#coffee -b -c -o lib src

Vimのシンタックスハイライトとか

http://www.vim.org/scripts/script.php?script_id=3590
vim-less
https://github.com/groenewege/vim-less

■参考

http://kennyj-jp.blogspot.com/2011/01/coffeescript.html

CoffeeScript入門
http://d.hatena.ne.jp/nodamushi/20110108/1294518316#cfunccall

CoffeeScript基礎文法最速マスター
http://www.infiniteloop.co.jp/blog/2011/03/coffeescript-master/

CoffeeScriptとスコープ
http://www.sixapart.jp/techtalk/2012/01/coffeescript.html

CoffeeScriptの好きなところ
http://doruby.kbmj.com/abennu/20110809/CoffeeScript_

今すぐ既存JavaScriptコードをCoffeeScriptに置き換えたほうがいいと思う理由を6つほど
http://kozy.heteml.jp/l4l/2011/12/javascriptcoffeescript.html

今日から始めるCoffeeScript
http://tech.kayac.com/archive/coffeescript-tutorial.html

はじめてのパーティクル
http://jsdo.it/gaziya/uFQG

お絵かき投稿サイトを作ろう
http://kray.jp/blog/rails3-html5-canvas/

JavaScriptを生成するシンプルな新言語CoffeeScriptの勉強会に参加した！
http://nskw-style.com/2011/coffeescript/begin-coffee-script.html

彼氏が(function(){...})()を即時関数って言ってた。別れたい。
http://d.hatena.ne.jp/sandai/20110824/p1

functon文とfunction式の違い
http://d.hatena.ne.jp/bowbow99/20070331/1175353790
http://d.hatena.ne.jp/kousukekayo/20090827/1251363441