CoffeeScriptはじめました。ええ、コーヒーです。

最近まで「カフェ」って呼んでました。超恥ずかしい。カフェでスクリプト組んじゃう？的な。

iPhoneアプリに挑戦したいと思って、あっさり Objective-C を諦め、わりに慣れ親しんだ JavaScript からアプローチしようと思ってたら、思いの外、苦戦しまして。

なめてました。。。

数年前とは隔世の感があり・・・jQueryィ・・・これも完全に乗り遅れました。大波に。

そして、そんな僕を見かねてCoffeeScriptを使ってみないかブラザー、と、ある知人プログラマーから勧められて、使い始めてみることに。

プログラム内では、ちょっとしたアニメーションをさせたいと思って、有名どころのEaselJS や、Raphaëlも、検討してみましたが、CanvasやSVGを使うほどのものではないな、と。

で、もうdivアニメーションでいいんじゃね？ってことになると、やはりjQueryに落ち着いてしまうんですよね。

これくらいのレベルのをまず。↓

[サンプルスクリプト]

ただ、この程度のものを動かすのにも一苦労が。

CoffeeScriptでクラスをつくってから、その中でjQueryを使うどころか、そのオブジェクトにクリックイベントを持たせる方法自体がわからない・・・

もう this ェ・・・

結論から言えば、

こう書けば、実現できます。

[coffee highlight=”6,7,8″]
$ = jQuery
$ ->

Circle = new AppMain()

$(‘#circle_main’).click ->
$(‘#circle_main’).stop().animate {‘left’:’512′, ‘duration’:’600′}, ->
$(‘#circle_main’).stop().animate {‘left’:’128′}, {‘duration’:’600′}

class AppMain

CircleMain : null

constructor: ->
@createCircle()

createCircle: ->
@CircleMain = document.createElement ‘div’
@CircleMain.id = ‘circle_main’
#イメージを追加
_CircleImage = document.createElement ‘img’
_CircleImage.src = ‘circle.png’
@CircleMain.appendChild _CircleImage
#HTML body に追加
document.body.appendChild @CircleMain

# end AppMain Class

window.AppMain = window.AppMain || AppMain
[/coffee]

でも自分としては、クラス内にラップしておきたいわけですよ。

なんていうか、誰もこんなコードみないけど、自分の死後、万が一にも誰かが引き継いだとしたら・・・そんな考えが頭をよぎるわけです。

その誰かが「クラスに入れといてくれたんだねえ。ありがとうねえ」って思わず手を合わせて拝んでもらえるような、そんな書き方をして、ボクは死にしたい。

いや、ウソ。全部冗談です。

後のメンテがしやすい方向でつくりたいだけ。

ワタシはただエヴァとつながっているだけ。

で、四苦八苦した結果が、コチラ。

[coffee highlight=”20,21,22,23″]
$ = jQuery
$ ->

Circle = new AppMain()

class AppMain

CircleMain : null

constructor: ->
@createCircle()

createCircle: ->
@CircleMain = document.createElement ‘div’
@CircleMain.id = ‘circle_main’
#イメージを追加
_CircleImage = document.createElement ‘img’
_CircleImage.src = ‘circle.png’
@CircleMain.appendChild _CircleImage
#クリックイベントの追加
@CircleMain.onclick = (e) ->
$(@).stop().animate {‘left’:’512′, ‘duration’:’600′}, ->
$(@).stop().animate {‘left’:’128′}, {‘duration’:’600′}
#HTML body に追加
document.body.appendChild @CircleMain

# end AppMain Class

window.AppMain = window.AppMain || AppMain
[/coffee]

$(@)って・・・ぱっと見、なにを表現してるのか、わからなくないですか？(笑)

これがシンタックスシュガーですか。そうですかそうですか。

ぜんぜん甘くない。

一応、サンプルプログラム一式をまとめて置いておきますね。↓

sample_coffee.zip

誰が使うのだろうか、と思いつつ。

　

追記：

その続きを書きました。

「CoffeeScriptでつくったクラス内でjQueryメソッドのコールバック関数を呼ぶ」

よろしければこちらも参照ください。