ドットインストールで公開されているBackbone.js入門をCoffeeScriptで書きなおしたので公開します


みなさんこんにちは。

最近はやっとJavaScriptをがっつりいじることが出来そうになったので、Backbone.jsに入門してみました。
また、CoffeeScriptも便利だと聞いたのでこれも勉強してみました。

勉強のためにドットインストールで公開されているBackbone.js入門の完成品を参考に、JavaScriptのコードをCoffeeScriptで書きなおしました。

これからCoffeeScriptを勉強しようと思っている人に少しでも役に立てればと思います。

CoffeeScriptもやり始めて1日くらいしかたってないので、ここはCoffeeだとこんな感じに書けるよ!とかあれば教えていただけると幸いですー
ドットインストール便利!いつもお世話になってます!


以下見出しになります。

また、動作環境は以下になります。

CoffeeScriptv1.6.3
Backbone.jsv1.0.0
jQueryv1.8.3
underscore.jsv1.4.3

app.coffeeのコード

以下が今回書きなおしたCoffeeScriptのコードです!
コンパイルすればapp.jsが生成されるのでそれを下のindex.htmlに読みこめば使えるはずです。

app.coffee

index.htmlのコード

index.htmlのコードは以下です!
jqueryとかbackboneとかunderscoreは上のほうにバージョン番号が書いてあるのでそれに合わせて読み込んでくださいー!

index.html

app.coffeeに書きなおす際に困ったこと

今回Coffeeの文法をやったあとに書きなおしてみたんですが、困ったことと言えば

  • jQueryの関数の()を省略しちゃって動かない
  • jQueryでDOMをいじったあとに「@」を書かないと動かない

ってことくらいです。それ以外は結構さらさら書けました。

Coffeeだと()が省略出来るからといって、jQueryの関数まで省略しちゃダメです(´;ω;`)
具体的には35〜37行目の部分とか39〜40行目の部分とかです。

35〜37行目

39〜40行目

また、Coffeeだと関数内で最後に評価されたものがreturnされてしまうので、DOMをいじったあとそのままにしちゃうとそのDOMをreturnしちゃうのでそこで謎のエラーが起きるってことがありました。
具体的には65〜69行目の部分。

最後に

やっぱCoffeeScriptって便利ですね!
書きなおした際も、元のapp.jsだと200行程度になるんですが、CoffeeScriptで書きなおすと100行程度におさまりました。
あとCoffeeで書いたほうが見やすい! これは癖になるのもわかります。
これからBackbone.jsとかCoffeeScriptとかもっと勉強していこーと思います!
質問やこうしたほうがいいよーっていうのがあれば@DAI199までリプライお願いします!

更新情報はFacebookページで!

ブログの更新、読んで役立つ他ブログの記事などを更新しています。




関連のある記事


    質問があればこちらからどうぞ