鱒身(Masu_mi)のブログ

知った事をメモする場所。

Yeoman+Jasmine+BackboneJS始めました

テスト駆動JavaScriptを勉強する事にした。 題材として評価過程をアニメで表現する brainfa*k 評価器を BackboneJS で書く事にした。

BackboneJS 入門は以下が良いんじゃないかと思います。私はアドベントカレンダーとドキュメントで何とかごまかせています。

開発準備は Yeoman を使う。 Yeoman は開発にまつわる雑務を請け負うコマンドツール。 なんか色々やってくれるらしいのだけどあまり詳しくは知らない。 例えば、noscript対応・旧ブラウザ対応などが済んだテンプレHTMLを生成したり scssCoffeeScript のトランスレートを行なうビルド環境を準備したりする。

今回はMVCフレームワークに BackboneJS 、テストフレームワークに Jasmine を使う。 そのため以下のコマンドを叩いて Yeoman にgeneratorを追加した。

yo install generator-backbone
yo install generator-jasmine

これで YeomanBackboneJS 用プロジェクトを吐き出せる様になる。 あとは以下のコマンドでスケルトンを作る。

yo backbone
yo jasmine
yo backbone:model hoge
yo backbone:view  hoge

プロジェクトの依存関係の管理について

Yeoman では外部リソースは以下で管理するのがデフォルトになる。

対象 管理ツール 定義ファイル
パッケージ npm package.json
クライアントjsライブラリ Bower bower.json

yoコマンドで生成するとオプションで指定しない限り自動で依存pkg, ライブラリを取得してくれる。 ただライブラリが消えてしまったり依存関係に変更を加えた場合は以下で再取得できる。

npm install
bower install

これで準備が完了した。

早速、動くか確認する為に Grunt を動かす。 Grunt はタスクをプラグイン形式で扱う抽象化されたビルドツールでテストやwatchなども可能だ。

grunt build
grunt server

実行したら、依存している scss ファイルに不正文字が含まれていてコンパイルエラーになった。 外部pkgに手を加えるの嫌だけどコメントに変な文字が含まれていただけなのと勉強目的なので削除した。 動く事を確認した。とりあえず Hello World は終了だ。

Jasmine でテスト駆動開発だぜーって所で問題が生じている。

テストケース内部でjsモデルが見えていない。 Grunt から Jasmine の設定を書き換えてglobalに定義した関数は見えたが window 以下に定義したオブジェクトは見えていない。

またFirebugで確認したら modernizr.js が生成されておらず(?)404エラーになっていた。

上記2つはまだ解決していない…

Jasmine の元々の設定もファイル結合で生成されるファイルを対象にしている雰囲気だ。 なので残っている課題は2つ

  • Grunt でJavaScriptファイルを結合するconcatを適切に設定し直す
  • Grunt 経由でJasmineを呼ぶ場合のwindowの扱いなど - PhantomJS上で動いているっぽい

とりあえず使った事がないツール・フレームワークが組合わさった環境に挑むと苦労する。

中間ファイルが生成されていないのは、自分の設定ミスなのかバグなのかすら判断が付かない… (生成して試しただけで modernizr.js が生成されず404になっている事を考えるとバグな気もするけど)

しかし、そんな状況も調べながら手早くこなす頭の使い方・背景知識は身に付けておかないと不便だし。 Yeoman , Grunt , Bower , Jasmine , PhantomJS とかどのみち標準ワークフローの候補なので勉強すると得な事が多い。

まず Jasmine の使い方、次にgenerator-backboneでのconcatの意図や Grunt でconcatの使い方を調べる必要がある。

対応のために以下を読んだりして勉強する。