ドットインストールで公開されている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

jQuery ->

    class Task extends Backbone.Model

        defaults:
            title: 'do something'
            completed: false

        validate: (attrs) ->
            if _.isEmpty attrs.title
                'title must not be empty!'

        initialize: ->
            @on 'invalid', (model, error) ->
                $('#error').html error

    class Tasks extends Backbone.Collection
        model: Task

    class TaskView extends Backbone.View

        tagName: 'li'

        initialize: ->
            @model.on 'destroy', @remove, @
            @model.on 'change', @render, @

        events:
            'click .delete': 'destroy'
            'click .toggle': 'toggle'

        toggle: ->
            @model.set 'completed', !@model.get 'completed'

        destroy: ->
            if confirm 'are you sure?'
                @model.destroy()

        remove: ->
            @.$el.remove()

        template: _.template($('#task-template').html())

        render: ->
            template = @template @model.toJSON()

            @.$el.html template
            @

    class TasksView extends Backbone.View

        tagName: 'ul'

        initialize: ->
            @collection.on 'add', @addNew, @
            @collection.on 'change', @updateCount, @
            @collection.on 'destroy', @updateCount, @

        addNew: (task) ->
            taskView = new TaskView model: task
            @.$el.append taskView.render().el
            $('#title').val('').focus()
            @updateCount()

        updateCount: ->
            uncompletedTasks = @collection.filter( (task) ->
                !task.get 'completed'
            )
            $('#count').html uncompletedTasks.length
            @

        render: ->
            @collection.each (task) ->
                taskView = new TaskView model:task
                @.$el.append taskView.render().el
            , @
            @updateCount()

    class AddTaskView extends Backbone.View
        el: '#addTask'
        events:
            'submit': 'submit'

        submit: (e) ->
            e.preventDefault()
            task = new Task 
            if task.set( {title: $('#title').val()}, {validate: true} )
                @collection.add task
                $('#error').empty()

    tasks = new Tasks([
        {
            title: 'task1'
            completed: true
        }
        {
            title: 'task2'
        }
        {
            title: 'task3'
        }
    ])

    tasksView = new TasksView collection: tasks
    addTaskView = new AddTaskView collection: tasks

    $('#tasks').html tasksView.render().el

index.htmlのコード

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

index.html




    
    Backbone.js sample
    



    

Tasks

Tasks left:

%MINIFYHTML45639acd7ad3212992cc97a15b449f7611%%MINIFYHTML45639acd7ad3212992cc97a15b449f7612%%MINIFYHTML45639acd7ad3212992cc97a15b449f7613%%MINIFYHTML45639acd7ad3212992cc97a15b449f7614%%MINIFYHTML45639acd7ad3212992cc97a15b449f7615%

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

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

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

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

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

35〜37行目

destroy: ->
    if confirm 'are you sure?'
        @model.destroy()

39〜40行目

remove: ->
    @.$el.remove()

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

updateCount: ->
    uncompletedTasks = @collection.filter( (task) ->
        !task.get 'completed'
    )
    $('#count').html uncompletedTasks.length
    @

最後に

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

tagamidaiki.comの著者が教えるプログラミングスクール – class Tech(クラステック)

更新情報はFacebookページで!

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




関連のある記事