YEOMAN Advent Calendar 3日目：generator-backbone を紹介します

Webアプリケーションを作る入門的なジェネレータ generator-backbone を紹介します。このエントリーは「YEOMAN Advent Calendar 2014」12月3日の記事です。

YEOMAN Advent Calendar 2014 - Adventar

インストールから実行まで

インストール

いつものようにジェネレータをインストールしてプロジェクトディレクトリを作りyoとgruntの実行です。

$ npm install -g generator-backbone
$ mkdir backbone && cd $_
$ yo backbone
$ grunt serve

途中オプションを聞いてきます。個人的にはBackboneを使うときはCoffeeScriptとRequireJSは必須にしています。

Out of the box I include HTML5 Boilerplate, jQuery, Backbone.js and Modernizr.
? What more would you like? (Press <space> to select)
❯◉ Twitter Bootstrap for Sass
 ◯ Use CoffeeScript
 ◯ Use RequireJs

実行

すべてのオプションを有効にした場合の実行結果は次の通りです：

bower でインストールされているモジュールは次の通り。

    "bootstrap-sass-official": "~3.2.0",
    "jquery": "~2.1.0",
    "lodash": "~2.4.1",
    "backbone": "~1.1.0",
    "requirejs": "~2.1.10",
    "requirejs-text": "~2.0.10",
    "modernizr": "~2.7.1"

grunt タスクは色々あります。generator-webappと同様に開発リソール（.html/.js/.sassなど）を監視するwatch、JavaScriptテスティングフレームワークのmocha、ミニファイでは svgminなどなどWebアプリケーションを開発するための道具がひと通り揃ってます：

    "apache-server-configs": "^2.8.0",
    "grunt": "^0.4.5",
    "grunt-contrib-copy": "^0.5.0",
    "grunt-contrib-concat": "^0.5.0",
    "grunt-contrib-coffee": "^0.11.0",
    "grunt-contrib-jst": "^0.6.0",
    "grunt-contrib-uglify": "^0.6.0",
    "grunt-contrib-compass": "^1.0.1",
    "grunt-contrib-jshint": "^0.10.0",
    "grunt-contrib-cssmin": "^0.10.0",
    "grunt-contrib-connect": "^0.8.0",
    "grunt-contrib-clean": "^0.6.0",
    "grunt-contrib-htmlmin": "^0.3.0",
    "grunt-contrib-imagemin": "^0.8.1",
    "grunt-contrib-watch": "^0.6.1",
    "grunt-mocha": "^0.4.11",
    "grunt-usemin": "^2.4.0",
    "grunt-bower-requirejs": "^1.1.0",
    "grunt-requirejs": "^0.4.2",
    "grunt-rev": "^0.1.0",
    "grunt-open": "^0.2.3",
    "load-grunt-tasks": "^0.6.0",
    "connect-livereload": "^0.4.0",
    "time-grunt": "^1.0.0",
    "jshint-stylish": "^1.0.0"

サブジェネレータ

YEOMANテンプレートのコマンドとして各コンポーネントを生成するサブジェネレータも用意されています：

yo backbone:router <router>
yo backbone:collection <collection>
yo backbone:model <model>
yo backbone:view <view>

yo backbone:router

routerを作成します。

$ yo backbone:router main
   create app/scripts/routes/main.coffee
$

作られるファイルは

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

yo backbone:view

viewとejsを作成します。

$ yo backbone:view main
   create app/scripts/templates/main.ejs
   create app/scripts/views/main.coffee
$

作られるビューは

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

    tagName: 'div'

    id: ''

    className: ''

    events: {}

    initialize: () ->
        @listenTo @model, 'change', @render

    render: () ->
        @$el.html @template(@model.toJSON())

ejsは

<p>Your content here.</p>

yo backbone:collection

collectionを作成します。

$ yo backbone:collection main
   create app/scripts/collections/main.coffee

作られるファイルは

define [
  'underscore'
  'backbone'
  'models/Main-model'
], (_, Backbone, MainModel) ->

  class MainCollection extends Backbone.Collection
    model: MainModel

yo backbone:model

modelを作成します。

$ yo backbone:model main
   create app/scripts/models/main.coffee
$

作られるファイルは

define [
  'underscore'
  'backbone'
], (_, Backbone) ->
  'use strict';

  class MainModel extends Backbone.Model
    url: '',

    initialize: () ->

    defaults: {}

    validate: (attrs, options) ->

    parse: (response, options) ->
      response

最後に

だいぶお世話になったジェネレータです。久しぶりに触りましたが少しづつではありますがサブジェネレータが修正されているようです。機会があったらまた触れてみたいジェネレータです。