Yeoman+Jasmine+BackboneJS始めました

2013, Oct 21 One min read

テスト駆動JavaScriptを勉強する事にした。 brainfa*k 評価器をBackboneJS で書いてみる。入門は以下が良いんじゃないかと思った。

開発準備は Yeoman を使う。 Yeomanはビルドのヘルパーツール。色々やってくれるらしいのだけどあまり詳しくは知らない。

例えばnoscript対応・旧ブラウザ対応などが済んだテンプレHTMLを生成したり scss,CoffeeScriptのトランスレートをするビルド環境を準備したりする。

今回はMVCフレームワークにBackboneJS、テストフレームワークにJasmineを使う。 (Jasmineのリンク先を修正)

そのため以下のコマンドを叩いて Yeomanにgeneratorを追加した。

1
2


$ yo install generator-backbone
$ yo install generator-jasmine

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

1
2
3
4


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

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

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

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

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

1
2


$ npm install
$ bower install

これで準備が完了した。

早速、動くか確認する。まずGruntを動かす。 Gruntはタスクをプラグイン形式で扱うビルドツールでwatchも可能。

1
2


$ grunt build
$ grunt server

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

ところがJasmineでテスト駆動開発だぜーって所で問題が生じた。

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

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

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

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

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

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

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

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

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