Chaplin.js、Brunch、Railsを使ったWebアプリ開発（1）〜フロントエンドの環境構築

# はじめに

メンテナンス性の高いJavaScriptアプリケーションを作りたくて、Chaplin.jsに行き着きました。

あまり説明を書くと挫折しそうなので、あまり説明を書かずにこの通りやったらChaplinでWebアプリを作れるよという手順書形式で書いていこうと思います。

この記事は連載の予定で、最終的には簡単なノートアプリを完成させようと思います。イメージは[Simplenote](http://simplenote.com/)です。

# Chaplin.js？

[Chaplin.js](http://chaplinjs.org/)はBackbone.jsをラップして作られたJavaScript MVCフレームワークです。

なんでChaplin.jsかというと、Backbone.jsはミニマム過ぎて、意外と問題に直面します。

- 意外と普通に必要そうなことができないので、自作ライブラリをけっこう書く羽目に。
- 構成などベストプラクティスが決まっておらず人によってバラバラになりそう。

特に後者はChaplin.jsだとベストプラクティスを定めてくれているので、それに則って作れば誰が作ってもいい感じになります。

# システム構成

フロントエンドをChaplin、バックエンドをRailsで完全に別アプリとします。
RailsはAPIを提供し、それをフロントエンドアプリから利用するという構成にします。

分離する理由はクライアントライブラリの管理とビルドです。
Railsのasset pipelineとbower-railsを使うとか考えたのですが、そこはRailsの得意なところではなくどうも無理がある。

そこで[Brunch](http://brunch.io/)を使用します。Brunchはフロントエンドアプリの雛形自動生成、ライブラリ管理、ビルド、テストを全て行ってくれるフロントエンドアプリのビルドツールです。
これがあるからアプリの分離に踏み切ったとも言えます。これでさらにフロントエンドアプリ開発のレールが定まり、生産性・メンテナンス性が上がります。

# フロントエンドの環境構築手順

第一回の今回はフロントエンドの環境構築です。
Brunchを使って、Chaplinアプリの雛形を作って、Twitter Bootstrapのexampleを表示するところまでやります。

事前にnode.jsとnpmをインストールしておいてください。

brunchインストール

```
$ npm install -g brunch
```

generatorのためにscaffoltをインストール
（これを使ってrails generateみたいのができます）

```
$ npm install -g scaffolt
```

gitリポジトリを作ります。

```
$ mkdir noteapp-chaplin-example
$ cd noteapp-chaplin-example
$ git init
```

以下のようなディレクトリ構成にする予定です。

```
noteapp-chaplin-example
├── frontend
└── backend
```

chaplingのアプリの雛形作成

```
$ brunch new gh:paulmillr/brunch-with-chaplin frontend
$ cd frontend
```

以下のようなディレクトリができあがります。
appがアプリ本体ですが、見ての通り、ぱっと見でも初期化処理はここでコントローラはここでとわかりやすくなってます。

```
.
├── README.md
├── app
│   ├── application.coffee
│   ├── assets
│   │   ├── images
│   │   └── index.html
│   ├── controllers
│   │   ├── base
│   │   └── home-controller.coffee
│   ├── initialize.coffee
│   ├── lib
│   │   ├── utils.coffee
│   │   └── view-helper.coffee
│   ├── mediator.coffee
│   ├── models
│   │   └── base
│   ├── routes.coffee
│   └── views
│       ├── base
│       ├── home
│       ├── site-view.coffee
│       ├── styles
│       └── templates
├── bower.json
├── bower_components
├── config.coffee
├── generators
├── node_modules
└── package.json
```

試しに動かしてみる。

```
$ brunch w -s
```

localhost:3333にアクセスすると、以下の画面が表示されます。

![スクリーンショット 2013-10-30 23.11.40.png](https://qiita-image-store.s3.amazonaws.com/0/27267/c085f9fc-6fed-5083-b3b2-cf93eb92b28f.png)

gitにコミットしておきます。

```
$ git add .
$ git commit -m "フロントアプリの雛形作成"
```

Twitter Bootstrapをインストール
ライブラリの管理には[bower](http://bower.io/)を使うようになっています。

```
$ bower install bootstrap --save
```

Twitter BootstrapのStarter templateサンプルを移植します。

bower_components/bootstrap/examples/starter-templateの下の以下のファイルの内容を

```
index.html
starter-template.css
```

以下のファイルに移植します。
Brunchで構成を作ったChaplin.jsではテンプレートエンジンに[Handlebars.js](http://handlebarsjs.com/)、CSS Preprocessorに[Stylus](http://learnboost.github.io/stylus/)を使います。
あと、Sassで言うCompassに当たる[nib](http://visionmedia.github.io/nib/)のドキュメントも見ながら開発することになります。

```
app/views/home/styles/header.styl
app/views/home/styles/home-page.styl
app/views/home/templates/header.hbs
app/views/home/templates/home.hbs
app/views/styles/application.styl
app/views/templates/site.hbs
```

再度localhost:3333にアクセスすると、Twitter BootstrapのStarter templateが表示されます。

![スクリーンショット 2013-10-31 17.19.09.png](https://qiita-image-store.s3.amazonaws.com/0/27267/a60f6fac-81eb-4785-bd75-85cb617b5e90.png)

# まとめと次回予告

今回の構成のようにフロントエンドとバックエンドは完全に別アプリとして分離する方がそれぞれの得意なところを活かせるのかなと最近思っています。

ここまでのソースはGithubにアップしています。
https://github.com/atskimura/noteapp-chaplin-example/tree/article_1

次回はデータを保存しないノートアプリまで持って行きましょう。

# 参考リンク

- [Chaplin | HTML5 application architecture](http://chaplinjs.org/)
- [Backbone.js](http://backbonejs.org/)
- [Brunch | ultra-fast HTML5 build tool](http://brunch.io/)
 - [Brunchのコマンド一覧](https://github.com/brunch/brunch/blob/stable/docs/commands.md)
- [paulmillr/scaffolt](https://github.com/paulmillr/scaffolt)
- [BOWER: A package manager for the web](http://bower.io/)
- [Stylus](http://learnboost.github.io/stylus/)
- [nib - CSS3 extensions for Stylus](http://visionmedia.github.io/nib/)
- [Handlebars.js: Minimal Templating on Steroids](http://handlebarsjs.com/)