Asial Blog

Recruit! Asialで一緒に働きませんか?

Backbone.js 入門してハマったポイントと対策

カテゴリ :
フロントエンド(HTML5)
タグ :
Tech
JavaScript
HTML5
Backbone.js
入門




Backbone.js とは JavaScriptフレームワークです。
http://backbonejs.org/

Backboneをはじめて利用するにあたってハマったポイントと対策に
JSフレームワークについての感想を簡単に書いてみました。

ハマってみるのも醍醐味かもしれませんが、時間の無駄とも言わざる得ないので
同じように困った方のためになればいいなぁ、と自戒を込めて記録しようと思います。

ちなみにエラーメッセージはちゃんと出るんですが、どこで起きてるエラーなのか
突き止めるのに時間が掛かったりします。
エラーメッセージに慣れてくると「あ、これ見たことあるエラーだ」とハマる時間も減ります。


◯エラーメッセージと対策



※開発中はChromeでも確認していたので、Chromeのエラーメッセージとなります。
※凡ミスだらけですが、ご了承ください。

・Uncaught TypeError: Cannot call method 'append' of undefined


 コレクションを_.eachでビューに出力するとき、_.eachのコンテキストにthisを指定し忘れていた。

・this.set is not a function


 Backbone.Modelを継承したモデルオブジェクトをインスタンス化するときに new を付け忘れていた。

・Uncaught TypeError: Object #<Object> has no method 'replace'


 _.template()を使っているあたりが原因。2パターンやらかしました。
 1: .html() の引数が間違っていた。
 2: メンバに template() を定義しているのに this.template() ではなく _.template() を呼び出そうとしていた。

・Uncaught TypeError: Object {メソッド名} has no method 'call'


 モデルにバインドしたメソッド(第二引数)を "saveAll" と指定していた。正しくは this.saveAll

・フォームでコレクションに追加したビューが2つ出力されてしまった


 collection.add() と collection.create() を同時に実行していたから。
 add()はコレクションに追加してaddイベント発火
 create()はコレクションとストレージへ追加してaddイベント発火(addイベントは発火しないと思っていた)


◯JSフレームワークについて



触るだけならAngularとか色々触っていたのですが、実際の開発では初めて使いました。これまでjQueryだけでガリガリとイベント駆動開発していたのですが、やはりBackboneのような何らかのJSフレームワークで仕組みを提供してくれるとリファクタリングとか、大分楽です。

また、なぜBackboneなのかについては、私の場合は評判が悪くないすぐに使えそうなフレームワークでだったからです。実際他のフレームワークより情報が多かったので助かりました。ただ、向き不向きが存在するJavaScriptフレームワークはシーンによって使い分けることも大切だと思いました。

今回の経験を活かして、何かないかと思ったけど、サーバサイドと連携したRESTfulなアプリケーションぐらいしかパッと思いつかなかったので、そういったのもやってみたいなと思いました。


◯Backboneで参考になったサイト


 http://backbonejs.org/
 http://todomvc.com/architecture-examples/backbone/
 http://www.adventar.org/calendars/15
 http://qiita.com/items/03f49c64d6c4bacdbb26
 http://dotinstall.com/lessons/basic_backbonejs


一言:ついにサドル付きの自転車を購入しました!