「CoffeeScript」 カテゴリーの記事です。

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


前回の記事「CoffeeScriptでクラスをつくりその中にjQueryイベントを持たす」の関連、というか続きです。

前回も、thisの所在に悩まされたのですが、今回も同じような感じでハマったので一応メモ。

これに関する解は、わりとアチコチ(Stack Overflowなど)にあるのですが、この流れでハマると、その解に辿り着けない(ググってもそれが解答だと気づけない)ような気がするので、ここに書いておきます。

たとえば、以下のようにclassで作った<div>をこれまたclass内で定義したメソッドからアニメーションをさせます。

今回の例で言えば、右に移動したら(animate {‘left’:’128′}) 、下へ(animate {‘top’:’128′})、次に左へ(animate {‘left’:’128′})移動し、最後は元の位置(animate {‘top’:’0′})に戻る、といった動作です。

[サンプルプログラム]

これはjQueryのanimate()関数を呼びますが、完了時の引数にコールバック関数を仕込んで呼ぶことができます。つまり、animate()を入れ子のようにして連鎖的に呼ぶことができるのですが、そのとき、階層深くに押し込まれていくthisは、どういうコンテキストになるんだろう?って疑問が浮かびます。

現に、動かなくて、かなり四苦八苦しました。

結論としては、こうやります。

(さらに…)

CoffeeScriptでクラスをつくりその中にjQueryイベントを持たす


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

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

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

なめてました。。。

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

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

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

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

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

[サンプルスクリプト]

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

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

もう this ェ・・・

(さらに…)

CoffeeScriptで「FlowerJS」をつくってみた


最近、CoffeeScriptを勉強中です。

どうもJavaScriptのクラスの概念(っていうかちゃんとしたクラスがないのですが・・・)がイマイチ理解できなかった僕に、知り合いのプログラマーから勧められて始めて見ました。

いまNode.jsのインストールから、*.coffee → *.js などの変換が超簡単になっているんですね。WindowsでもMacでもバッチで一発でやってくれます。すごい便利。

試しにHTML5 Canvasに画像を使わずにお花をシェイプで描いて、マウスクリックした位置にスプレーするサンプルを作ってみました。

こういう感じの、

FlowerJSイメージサンプル

実際のコードはコチラ。

(さらに…)

s