Yeoman+CoffeeScriptでSinge-page Applicationを簡単開発

YeomanとCoffeeScriptを使ってbackboneを利用したSingle-page Applicationを作ります。yoとbowerに微妙感があると聞きますが、大規模開発では開発効率を上げるために、ここが重要になります。

内容ですが社内ハンズオンでのものです。基本的には過去のブログを読んで頂けると良いと思いますが、Yeomanの仕様もいくつか変更されてますし、generator-backboneも機能が追加されてますのでところどころ追っかけたいと思います。

Yeoman を触ってみる

Yeoman を使った backbone.js の環境構築

アジェンダ

ハンズオンの内容は書きの通りです

1. Yeomanインストール
2. backboneテンプレートのダウンロード
3. yoでプロジェクトの作成
4. bowerでmarionetteやbackbone.localStorageインストール
5. gruntでコーティングとyoによるひな形生成
6. grunt-easymockのインストールおよび設定

Yeomanインストール

 yeoman.ioに具体的なインストール方法は記載しています。nodeとgitのインストールは必須です。私はCoffeeScriptやSass+Compassを使ってますのでrubyとCompassもインストールします。

$ npm install -g yo

以前はgruntとbowerを個別にインストールする必要がありましたが、今はyoをインストールするとgruntとbowerもインストールされます。MACにrubyは必ず入っていますが、Compassは次を実行します。

$ gem update --system
$ gem install compass

backboneテンプレートのダウンロード 

yoテンプレートは400以上あります。Angular、knockout、backboneその他諸々。今回は数ある中でもgenerator-backboneを使います。

$ npm install -g generator-backbone

テンプレートの検索は

• yoコマンドによる検索( $ yo )
• Yeomanサイトによる検索

で行えます。

 yoでプロジェクトの作成

ダウンロードしたgenerator-backboneを使ってbackboneプロジェクトを作成します

$ mkdir backbone-pj
$ cd backbone-pj
$ yo backbone

で開発を行います。

 CoffeeScriptとRequireJsは必須ですのでカーソルを移動させスペースキーで有効にします。 インストールが完了したら

$ grunt serve

でgruntを実行してください。以前はserverでしたが現在はserveになっています。

bowerでmarionetteやbackbone.localStorageインストール

追加モジュールをインストールします。一般的には

$ bower install [インストールパッケージ]

でインストールできますが、これだとbower.jsonへの反映はされません。リリースモジュールとしてインストールする場合は

$ bower install [インストールパッケージ] --save

開発モジュールとしてインストールする場合は

$ bower install [インストールパッケージ] --save-dev

です。具体的にmarionetteとbackbone.localStorageをインストールします。

$ bower install marionette --save
$ bower install backbone.localStorage --save

これで追加されました。

ここで説明しているbowerコマンドはbowerのレジストリに登録されている場合のことですが、登録されていない場合パッケージの部分をURL指定でインストールすることも可能です。bowerコンポーネントはここで検索できます。

gruntでコーティングとyoによるひな形生成

generator-backboneにはyoコマンドによるRouter、View、Collection、Modelのテンプレート生成が可能です。これはgrunt serveで実行し初期画面でも出てくるのでぜひ確認してください。Home、About、Contactボタンで画面遷移するアプリを作成します。

routerの作成

$ yo backbone:router main --coffee

define [
  'backbone'
], (Backbone) ->
  class MainRouter extends Backbone.Router
    routes: {}

が生成されます。routerを実行するために、main.coffeeでrouter.coffeeのインスタンを生成させます。

・・・
require [
  'backbone'
  'routes/main'
], (Backbone, MainRouter) ->
  mainRouter = new MainRouter()
  Backbone.history.start()

routerを実装します。

define [
  'backbone'
], (Backbone) ->
  class MainRouter extends Backbone.Router
    routes:
      '': 'home'
      'home': 'home'
      'about': 'about'
      'contact': 'contact'
    initialize: ->
      console.log 'MainRouter.initialize'
      return

    home: ->
      console.log 'MainRouter.home'
      @homeView.render()
      return

    about: ->
      console.log 'MainRouter.about'
      @aboutView.render()
      return

    contact: ->
      console.log 'MainRouter.contact'
      @contactView.render()
      return

index.htmlでイベントを発行させるためメニューの「a href」を次のように変更します。

<div class="header">
    <ul class="nav nav-pills pull-right">
        <li class="active"><a href="#home">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>
    </ul>
    <h3 class="text-muted">backmaru pj</h3>
</div>

この時点でメニューをクリックするとコンソールログとURLで画面遷移されていることが分かります。

viewの作成

同様にviewを生成します。

$ yo backbone:view home --coffee
$ yo backbone:view about --coffee
$ yo backbone:view contents --coffee

この生成でejsファイルも生成されます。home.ejs、about.ejs、contace.ejsがtemplatesディレクトリにあることを確認してください。

テンプレートの中身は

<p>Your content here. </p>

ですので次のポリシーで変更してください。

home.ejs

<h1>'Allo, 'Allo!</h1>
<p class="lead">Always a pleasure scaffolding your apps.</p>
<p><a class="btn btn-lg btn-success" href="#">Splendid!</a></p>

about.ejs

<p>Your content here. about</p>

contents.ejs

<p>Your content here. contents</p>

ここでindex.htmlの灰色の部分を画面切り替えにします。id="main-contents"をタグdiv class="jumbotron"に追加してもらい中身をhome.ejsに移動させます。

 <div class="jumbotron" id="main-contents"></div>

あとはrouterでviewオブジェクトを生成しviewオブジェクトのレンダリングを実装します。home.coffeeを見てみます。

define [
  'jquery'
  'underscore'
  'backbone'
  'templates'
], ($, _, Backbone, JST) ->
  class HomeView extends Backbone.View
    template: JST['app/scripts/templates/home.ejs']

    el: '#main-contents'

    render: ->
      console.log 'HomeView.render'
      $(@el).html @template

同様に、about、contactsについても行ってください。これだけで簡易なアプリケーションができました。

再びrouterを実装

viewができたのでrouterでviewをオブジェクト化します。

define [
  'backbone'
  'views/home'
  'views/about'
  'views/contact'
], (Backbone, HomeView, AboutView, ContactView) ->
  class MainRouter extends Backbone.Router
    routes:
      '': 'home'
      'home': 'home'
      'about': 'about'
      'contact': 'contact'
    initialize: ->
      @homeView = new HomeView()
      @aboutView = new AboutView()
      @contactView = new ContactView()
      console.log 'MainRouter.initialize'
      return

 grunt-easymockのインストールおよび設定

 easymockについては別途ブログを書きます。

最後に

 Yeomanは開発効率を上げるための仕組みが多く含まれています。そのためにはgeneratorを自プロジェクト用にカスタマイズすることも考える必要があります。「良いツール」なのでうまく活用していくと良いでしょう。