Backbone.jsをためした。ついでにYeomanも。

『bwilike.meをつくった』のKPTからフロントエンド力をつけるべくBackbone.jsに挑むことにした。ついでにBackbone.jsの環境を準備するにあたっては、以前すこしだけ試して置いていたYeomanを使うことにした。WEB+DB PRESSにも紹介されていたし、以前からフロントエンドに着手する際には試してみたいと考えていたし。

Yeomanの環境構築には npm install -g yo と npm install -g generator-backbone で終わりかな。ちょっと覚えてないけど、それくらい。それから yo とすると対話的につくれる。SassやらCompassやらの環境を求められたりもするのだけれど、そういうものは無視した。余計なものがたくさん入るとわけがわからなくなるからね。Yeomanが勝手に npm install と bower install してくれる。それぞれサーバーサイドのモジュールインストールとクライアントサイドのモジュールインストール。配布方法がマチマチなので仕方ない。両方に使えるモジュールはnpmで配布されることも多いから、こうなる。

Yeomanはジェネレーターなので、いろいろなファイルを生成してくれる。GruntやBowerのためのファイルと、ディレクトリ構造と基本的なファイルをいくつか生成してくれているはず。細かくは把握していない。

これでBackbone.jsを試す準備が完了。

ドットインストールのBackbone.js入門で概要をつかむ。grunt serverしておけば、あとはブラウザで確認しつつ、app/scripts/main.jsとapp/index.htmlをさわれば十分みたいなので、環境構築を飛ばしつつ、あとは動画の手順にしたがってチュートリアる。

Backbone.jsは割とコテコテなMVCフレームワークのように感じた。ModelやらViewやらをきっちりつくらされる。めんどくさい。でも、こういう分割はわかりやすくされていた方が良いという側面もあるので、とりあえずは従う。イベント通知なんかも見ていて素直。素朴なMVCフレームワークといった印象。サーバーサイドで使われるMVC2ぽいMVCとは違って、イベントベースの、本来のMVCに近いように思う。

ドットインストールの側をひととおり終えたところで、Yeomanの生成したディレクトリ構造に合わせて修正する。いくつか違いがあった。覚えている点を挙げると、

• ディレクトリ構造: app/ や test/ app/scripts/models/ など構造がそもそも違う。細かいファイル分割もある。
• ネーミングルール: モデルとコレクションにはxxxModel/xxxCollectionというサフィックスがつく。
• テンプレートエンジン: Underscore.jsのtemplate()ではなく、ejsをつかう。
• テンプレートファイルの配置: app/scripts/templates/ に配置し、grunt jstで生成されるtemplates.jsをつかう。

たぶん、Yeomanに設定されたジェネレーターは割と一般的な値で生成してくれるはずなので、そういう部分からベストプラクティスぽいものを見出していくのが良いと思う。

気になるのは.spec.jsが同時に生成されること。Ruby on Railsのジェネレーターでもそうだけど、やはりテストコードは書かなきゃいけないよね。これも課題かな。

というわけで、今日のふりかえり。

• K:
  • Backbone.jsの利用。
  • Yeomanの利用。
• P:
  • Yeomanによって出力されたファイルを把握していない。
  • Backbone.jsの依存ライブラリであるところのUnderscore.jsをよく知らない。
  • Backbone.jsのAPIについて理解が足りない。Viewのelや$elなど、呪文的に利用している面が多い。
  • フロントエンドJavaScriptでのテストの書きかたが分からない。
• T:
  • Yeomanによって出力されたファイルの使い道をそれぞれ確認する。
  • Underscore.jsについて概要を確認する。
  • Backbone.jsについて別リソースを確認する。(ないし、使いながらAPIを参照する)
  • Backbone.jsでテスト駆動開発してみる。(テストの書きかたを身につける)

この調子でがんばりましょう。昨日は初もうでに行ってたわけだけど、明日も終日おでかけの予定。日記では一週間のふりかえりをやろうかな。いろいろ見える形でルールを決めて、息苦しくならない範囲で続けていきたいな。