フロントエンドの世界では、日々新しいフレームワークやライブラリが生まれています。
初めてそういった新しいものを習得する場合に、なるべくなら近道したいと思うのが人の気持ちだと思います。  
まず大変なのが、Hello World から実際のプロダクトやプロトタイプで利用する場合で、これは初めてで何もわからない土地を一人で散策するような感覚にも似ています。

今日、紹介するのは私が進化の早いフロントエンドの世界で、より早く未開の土地に慣れるために**スタイルガイド**を有効活用しているという話です。



ちなみにこの記事は[Frontrend Advent Calendar 2014 - Qiita](http://qiita.com/advent-calendar/2014/frontrend)の 6 日目の記事です。

- 5 日目[はじめての CSS 設計 - Qiita(@moschann)](http://qiita.com/moschann/items/c7cbf62056d77cbc1d66)
- 7 日目[CSS のプリプロセスとポストプロセス、そして Rework と PostCSS(@morishitter)](http://morishitter.hatenablog.com/entry/2014/12/07/000205)

## 良いスタイルガイドとは

巷にはスタイルガイド(コーディング規約)と銘打ったものがあふれています。
そのため有効に活用できるスタイルガイドを自身で見極めなければなりません。  
頼りにするスタイルガイドが大雑把で必要なことが書いてなかったり、1000 ページもあってすぐ必要な場所が探せないようでは使えません。

私がスタイルガイドを見たときに良さそうだなと思うのは次のような場合です。

- 目次をみて言語やフレームワークの機能を網羅しているか
- `Bad`と`Recommended`の両方のスタイルが提示されているか
- そのスタイルに至った理由や背景が書かれているか
- スタイルの提示だけではなく、具体的なユースケースが提示されているか

このようなことを頭の片隅に置きながら、自分にあったスタイルガイドを探すといいと思います。

## なぜスタイルガイド？

私がスタイルガイドを読む理由はいくつかあるので紹介しますね。

### 良いコードを書くために悩む時間を短縮

例えば、Javascript でのオブジェクトや配列の定義の仕方については、通常`{}`と`[]`が使われると思いますが、Javascript の言語自体あまり普段やらない人にとってはそれすらわからないと思います。

```js
// bad
var item = new Object();

// good
var item = {};

// bad
var items = new Array();

// good
var items = [];
```

> [mitsuruog/Javacript-style-guide | オブジェクト](http://mitsuruog.github.io/javacript-style-guide/#objects)より

スタイルガイドを読むことで基本的な部分では悩まなくなります。基本的なことで悩まないということは、本当にやるべきところで悩むことに集中するために大切なことです。

様々な書き方存在する中で良いコードを書くために悩む時間を少なくしたいですね。  
(とはいえ、悩むのですが。。。)

### 地雷源を早期に把握

良いスタイルガイドには、先人達がその言語やフレームワークにて発見した地雷源が記載されています。

例えば、AngularJS で controller などを作成する際に、複数の書き方ができるのですが、スタイルガイドを読むことで悩むことなく自分が書くべきコードを見つけることができました。

> 世の中のサンプルは avoid で実装されていることが多いです。それを疑わないままそのまま覚えてしまうことは危険です。

```js
/* avoid */
angular
  .module("app")
  .controller("Dashboard", [
    "$location",
    "$routeParams",
    "common",
    "dataservice",
    function Dashboard($location, $routeParams, common, dataservice) {},
  ]);

/* recommended */
angular.module("app").controller("Dashboard", Dashboard);

Dashboard.$inject = ["$location", "$routeParams", "common", "dataservice"];

function Dashboard($location, $routeParams, common, dataservice) {}
```

> [johnpapa/angularjs-styleguide | Manually Identify Dependencies](https://github.com/johnpapa/angularjs-styleguide#style-y091)より

また、DI の部分を以下のように省略して書いてしまうとソースコードを Minify したときにエラーになるという地雷も発見することができました。

```
/* avoid - not minification-safe*/
angular
    .module('app')
    .controller('Dashboard', Dashboard);

function Dashboard(common, dataservice) {
}

/* recommended - minification-safe*/
angular
    .module('app')
    .controller('Dashboard', Dashboard);

Dashboard.$inject = ['common', 'dataservice'];

function Dashboard(common, dataservice) {
}
```

> [johnpapa/angularjs-styleguide | UnSafe from Minification](https://github.com/johnpapa/angularjs-styleguide#style-y090)より

これらの先人たちの地と涙を汗の結晶である**地雷源情報**を参考にしない手はありませんね。

### コードリーディング時間の短縮

チームで作業する場合に、同じスタイルガイドを参照することで統一感のあるコードを書くことができます。

これは OSS でも同じことで同じスタイルガイドに習うことで他人のコードも読みやすく、また自分のコードも読んでもらいやすくなります。

例えば、Nodejs では API 呼び出しの最後の引数に function を渡すことで、API 呼び出し後に callback を実行させることが慣例となっています。(引数が 1 つの場合はそれが callback になることが多いです。)

express のサーバー作成のコードを例として提示します。

```js
// Setup server
var app = require("express")();
var server = require("http").createServer(app);

// Start server
// [MEMO]3番目のfunctionがcallback
server.listen(port, ip, function () {
  console.log("Express server listening on %d", port);
});
```

> どこかでこんな内容のガイド見たのですが、忘れてしまいました。知っているかたいましたら教えてください。

自分が作成した node 製モジュールの API で、最初の引数を callback にしてしまった場合はどうでしょうか。
他人が読む場合とてもストレスを感じると思います。

**Go に入れば Go に従えで**はないですが、そのコミュニテイ内でのルールは守ったほうがいいですよね。

## スタイルガイドの紹介

私がよく参照するスタイルガイドを紹介します。これからフロントエンド習得しようと思う方は参照してみてください。  
(よく利用しているフレームワークに偏りあるので、全ては網羅していませんが。。。)

### Javascript

airbnb のスタイルガイドを私が翻訳したものです。(本家はこちら[airbnb/javascript](https://github.com/airbnb/javascript))  
有名なスタイルガイドは他にもいくつかあるのですが、内容とボリュームがちょうどいいと思います。

- [mitsuruog/Javacript-style-guide](http://mitsuruog.github.io/javacript-style-guide/)

もうちょっと手が動く様になるとこちらも読むといいです。

- [JavaScript Garden](http://bonsaiden.github.io/JavaScript-Garden/ja/)

### Backbone

スタイルガイドというかパターン集ですね。最近の Backbone は[Marionette.js](http://marionettejs.com/)を併用することが多いので、これはもうあまり出番がないかも。。。

- [rstacruz/Backbone patterns](http://ricostacruz.com/backbone-patterns/)

### AngularJS

AngularJS はこれを読んでおけばいいです。

- [johnpapa/angularjs-styleguide](https://github.com/johnpapa/angularjs-styleguide)

### CSS

基本ですね。

- [idiomatic-css/translations/ja-JP](https://github.com/necolas/idiomatic-css/tree/master/translations/ja-JP)

本格的に勉強したい場合はまずこちらを読むといいです。

- [SMACSS E-book 日本語](http://shop.smacss.com/products/smacss-e-book)

### HTML

結構マークアップで悩む事が多いので、参考になります。

- [hail2u/html-best-practices](https://github.com/hail2u/html-best-practices)

## まとめ

進化の早いフロントエンドの世界ですが、私が進化に追いつくためにスタイルガイドを有効活用しているという話をしました。  
特に最近は特定のフレームワークや言語のスタイルガイドが付属するようなトレンドになってきたような気がしています。  
(ここで言うスタイルガイドは、従来のスタイルガイドとは違うジャンルの新しいタイプのものなのかもしれませんね。)

他の習得方法として、書籍を読む方法もいいと思いますが、スタイルガイドで特性などを把握してから本を読み進んだほうが、途中で挫折しないような気がしています。  
スタイルガイドは面倒な前置きなどないので、忙しいエンジニアは普段使いするには向いていると思いますし。
(書籍の内容は StackOverflow で参照できる内容もおおくありますし。。。)

良いスタイルガイドを知ることは、自分の組織やプロダクトでどのようなスタイルガイドを作成すればいいか、重要なヒントが隠されていると思います。

進化の早いフロントエンドの世界についていくために、スタイルガイドを有効活用しているという話

先日めでたく 1.0.0 をリリースした Backbone.js ですが、よくも悪くも「どう作るか」について、作成者側の思いで自由にできるため、始めの取っ掛かりとして、どう作ればよいかと言うことで結構悩む方も多いかと思います。

そこで、同じように悩んでいる人になんらかのヒントを与えられればと思い、シングルページアプリケーションを題材にチュートリアルを作成して公開してみました。
また、私が Backbone.js でアプリケーションを作成する上で、特に View について注意するポイントを幾つか紹介します。



何かの参考になれば幸いです。

### このエントリでお伝えしたいこと。

1.  Backbone.js のチュートリアル作りました。
2.  Backbone.View を扱う際に注意するポイントについていくつか紹介します。

## チュートリアル

早速ですが、Backbone.js でシングルページアプリケーションを作成するチュートリアルの紹介です。

このチュートリアルでは、よくある Tweet 検索アプリケーションを作成しています。

[https://github.com/mitsuruog/SPA-with-Backbone](https://github.com/mitsuruog/SPA-with-Backbone)

次からは、View について注意するポイントを幾つか紹介します。

## 1. 異なる View 間の連携はイベントベースで行う

Backbone.js でアプリケーションを作成する場合、いつくか View を分ける場合が多いのですが、次のようにトップレベルの View にて、他の View のイベントをハンドリングして処理を振り分けるコントローラ的なロジックを実装している例を時々に見かけます。

アプリケーション自体が比較的大きくない場合は、この実装方法でも大丈夫だと思います。
しかし、規模が大きくなり関係する View が増えた場合、コントローラのロジックが肥大化して View のサイズが大きくなる要因となりますので、私はあまりおススメしません。

```js
initialize: function () {

  //他のViewのイベントをハンドリングしてレンダリングする
  this.someView.on('chage:some', this.render);

},

render: function(){

  //他のViewへレンダリング指示
  this.anotherView.render();

}
```

Backbone.js には`Backbone.Events`というカスタムイベントをバインドしたり、発火させたりできる強力な仕組みが備わっていますので、これを使いましょう。
実装する際は、`Backbone.Events`を`_.extend()`して使います。

```js
//Backbone.Eventsのクローン
_.extend(mediator, Backbone.Events);

//イベントの発火
mediator.trigger("change:some", param);

//イベントのハンドリング
mediator.on("change:some", this.behavior);
```

このように View 間の連携をイベントベースで行うことの忘れてはならないメリットは、View 間の不要な依存関係を排除することで、各 View にてイベントを起点にユニットテストを行うことが出来ることです。

## 2. レンダリングはデータの変更を先に行う

レンダリングに際しては、順序に一貫性を持って行います。

> ユーザの操作 →Collection や Model の変更 →View のレンダリング

チュートリアルの検索ボタンクリックから検索履歴表示部分を例としてお話すると、次のような流れになります。

1.  検索ボタンをクリックする。
2.  検索キーワードを Collection に追加（データの変更）
3.  検索履歴 View をレンダリング

```js
initialize: function () {

  //他のViewからのModel追加依頼
  mediator.on('add', this.addSome);

  //Collectionのaddイベントをハンドリングしてレンダリング処理を呼び出す
  this.listenTo(this.collections, 'add', this.render);

},

addSome: function (some) {
  //CollectionにModelを1件追加する
  //追加した場合、addイベントが発火する
},

render: function () {
  //レンダリング処理
},
```

このように、ユーザの操作からレンダリングする間にデータの変更を挟むことによって、やってしまいがちな、ユーザの操作とレンダリングが 1 つになった、テストしにくいスパゲッティ function の作成を抑止できます。

## 3. その他、細々したこと

その他、知っておいたほうがいいポイントを紹介します。

### 3-1. Collection や Model のイベント監視には.listenTo()を使う

View が管理する Collection や Model のイベントハンドリングには従来`.on()`を使用してきましたが、0.9.9 以降は`.listenTo()`を使います。

```js
//.on()を使ったバージョン
this.collections.on("reset", this.render);

//.listenTo()を使ったバージョン
this.listenTo(this.collections, "reset", this.render);
```

これは、`.on()`でバインドしたイベントが（Model などを）`.remove()`した際に、アンバインドされずメモリリークを起こしてしまうためです。

### 3-2. initialize で\_.bindAll(this)を使う

1.のようにイベントベースで実装を進めた場合、結構ストレスに感じるのが javascript 特有の`this`の問題です。View の`initialize()`で`_.bindAll(this)`することで、View の中の this がすべて View 自身を指し示すようになるので、実装が楽になります。

```js
initialize: function () {

  bindAll(this);

  //なにかの処理

},
```

## 最後に

私が考える Backbone.js でのアプリケーション方について一通り説明しました。

最近のフロント系勉強会の動向を見ていても、Backbone.js はかなり注目されているクライアント MVC フレームワークの 1 つだと感じています。
また、先日 Backbone.js の 1.0.0 リリースしたこともあり、これから 2 ～ 3 年でネットサービス系を中心に普及期に入ると思います。  
これから始める方にとって、このエントリの内容が有意義なものであることを願っています。

**（余談）**  
このチュートリアルは、SI の中規模の開発案件にて Backbone.js を採用しよう夢見ていた時期があり（諸事情にて断念・・・orz）、大勢のエンジニアで Backbone.js を使った場合、どのようにガイドを作成したら均一に作れるか思索したものの残骸です。

Backbone.jsともっと仲良くなるためのヒント

Backbone.js でアプリケーションを作る場合、ついつい手軽さを求めて[Underscore.js の template()](http://underscorejs.org/#template)を使うことが多いのですが、少し凝った造りのページを作る場合、より専門的なテンプレートエンジンを使いたくなります。

そこで今回は、最近マイブームの[Handlebars.js](http://handlebarsjs.com/)を Backbone と組み合わせて使ってみました。



### このエントリでお伝えしたいこと。

1.  Backbone.js with Handlebars.js!!
2.  ここでもやっぱり Grunt 最高

## Handlebars.js とは

詳細は Google 先生の方が詳しいです（ごめんなさい）。  
数あるクライアントサイドのテンプレートエンジンの 1 つです。個人的にはプリコンパイルすることでパフォーマンス的に優位なところを注目しています。

[[jsperf]Precompiled Templates](http://jsperf.com/precompiled-hogan-handlebars-ejs)

最近話題の twitter の[Horgan.js](http://twitter.github.com/hogan.js/)ともいい感じに渡り合ってます。

> とは言っても、プリコンパイル前は激遅なんですが。。。

## アプリケーション構成

まず、アプリケーションの構成は次のようなものだと仮定して話を進めます。

```
app
 ├ Gruntfile.js
 ├ hbs
 │ └ partial.hbs //テンプレート
 └ js
   ├ views
   │ └ partial.js //テンプレートをレンダリングするView
   ├ collections
   ├ models
   ├ template.js //テンプレートがプリコンパイルされたJS
   ├ namespace.js
   └ app.js
```

namespace.js

```js
var MyApp = {
  Views: {},
  Collections: {},
  Models: {},
  Templates: {},
};
```

## なにはともあれ最初は Grunt!!

まず、なにか新しいことを始めるためには準備と計画が大事です。  
特に Handlebars.js の場合は、プリコンパイルしない事には使い物にならないので、ビルドプロセスが必須です。
ということで Grunt のタスクを使います。

[grunt-contrib-handlebars](https://github.com/gruntjs/grunt-contrib-handlebars)

Gruntfile.js は次のように書きます。

```js
module.exports = function (grunt) {
  grunt.initConfig({
    //some...

    handlebars: {
      compile: {
        options: {
          namespace: "MyApp.Templates",
          processName: function (filepath) {
            // input -> app/hbs/partial.hbs
            var pieces = filepath.split("/");
            return pieces[pieces.length - 1].replace(/.hbs$/, ""); //output -> partial
          },
        },
        files: {
          "app/js/template.js": "app/hbs/*.hbs",
        },
      },
    },
  });

  // Load the plugin.

  //some tasks...

  grunt.loadNpmTasks("grunt-contrib-handlebars");

  // Default task(s).
  grunt.registerTask("default", ["handlebars"]);
};
```

普段 Grunt 使っている人だったら、さっと見ただけで分かると思うので、compile オプションの大事な所だけ補足します。

#### namespace

プリコンパイルされたテンプレート関数が割り当てられます。デフォルトだと`JST`となるので必要な場合、設定してください。

#### processName

processName とは、（上の）namespase オブジェクトに格納された、プリコンパイル済みテンプレート関数を取り出すためのキーです。デフォルトではファイルパスが設定されるようになっており、次のように取り出すようになっています。`var tmpl = MyApp.Templates["app/hbs/partial.hbs"];`  
個人的には`var tmpl = MyApp.Templates.partial;`と backbone 側から利用したいので、override しています。

これで Grunt の watch タスクと組み合わせることで、hbs ファイルに変更があった際に template.js として自動でプリコンパルされます。Grunt ってほんと便利！

## Backbone と使う

さて本題です。
今回は、Backbone でありがちな、render()で Collection の中身を出力する場合を例に説明します。

まずは、Handlebars.js のテンプレート部分

```
{{#each models}}
<ul>
  <li class="id">{{this.id}}</li>
  <li class="name">({{this.name}})</li>
</ul>
{{/each}}
```

Backbone の View からは次のように呼び出します。

```js
MyApp.Views.partial = Backbone.View.extend({

  //partial.hbsで定義したテンプレート
  tmpl: MyApp.Templates.partial,

  //some...

  render: function() {

    this.$el.html(
      this.tmpl({
        models: this.collection.toJSON()
      })
    );

  },

  //some...
```

Handlebars.js のテンプレート関数にデータを渡す際に、1 回オブジェクトにラップして名前を付ける手間がありますが、これで`BackboneでHandlebars.js`を使うことができました。
Handlebars.js には他にも色々な Expressions があるのですが、同じ原理で大丈夫なはずです。

Backbone.jsとHandlebars.jsを組み合わせる

[Backbone.js Advent Calendar 2012](http://www.adventar.org/calendars/15)の 22 日目の記事です。

今見たら 22 日目の担当がいなかったので、慌てて書いています。ネタが無くなってきました（汗）。

本日は Backbone.Events について Jasmine で機能テストを書いたので公開します。
Jasmine 使った Backbone のテストの書き方について、参考になれば幸いです。



コードはこちらにあります。
（1 時間くらいで書きました。Jasmine だからできたと言っておきます ww）

[https://github.com/mitsuruog/Learning_JS/tree/master/backbone/functional_test](https://github.com/mitsuruog/Learning_JS/tree/master/backbone/functional_test)

一式ダウンロードして「SpecRunner ～」をブラウザで実行すると Jasmine のテストが実行されます。
ちなみに「0.9.2」とかは Backbone の Version です。
（0.9.9 のみ once をテストしてます。）

で、きっかけは
[@ahomu](http://twitter.com/ahomu "http://twitter.com/ahomu")さんの「[render と presenter の分離パターン](http://havelog.ayumusato.com/develop/javascript/e541-backbone_patterns_tips.html)」を読んで、いいなと思ったのですが、その前に Backbone.Events 自体あまり理解して無いと思ったので、自分の認識が合っているかテストをして確認してみた次第です。

テストしてみた結果、少し知っていると便利だなと思ったところを 2 つだけ紹介します。

1.  イベント名フラグ値のようなものを付けて、別のイベントのように発火できる。
2.  イベント名の間にスペースを入れて、複数のイベントを発火できる。

こちらが、コードのサンプルです。

```js
var obj = {};

//Mixin
_.extend(obj, Backbone.Events);

//on
obj.on("hello:me", callback);
obj.on("hello:you", callback);

//フラグのようなものを付けた呼び出し
obj.trigger("hello:me");
obj.trigger("hello:you");

//スペース区切りで複数呼び出し
obj.trigger("hello:me hello:you");
```

Backbone の 0.9.9 では Events 周辺でも機能の追加がありました。「once」以外については時間切れでテストできていません、時間があったらテスト追加しておきます。

Backbone.Eventsの機能テスト

[Backbone.js Advent Calendar 2012](http://www.adventar.org/calendars/15)と[青森アドベントカレンダー](http://aomori-web-advent-calendar-2012.blogspot.jp/2012/12/aomori-web-adevent-calendar-2012.html)17 日目の記事です。青森ネタは最後のほうに気持ち程度あります。
SAStruts+Seaser2 構成のバックエンドに対して、Backbone.Sync から Form を POST して ActionForm で受け取る方法です。  
（青森とは関係ありませんのであしからず。。。）



### このエントリでお伝えしたいこと。

1.  Backbone.Sync の POST は emulateJSON を知らないとちょっとハマる。
2.  SAStruts は JSP 切り離しても、Good なフレームワークだ。
3.  そろそろ SAStruts の中の人とお友達になりたい。
4.  青森はいいところだ。

## はじめに

きっかけは仕事で久しぶりに SAStruts を使うことになったことです。

現在、新しいプロジェクトのアプリケーションアーキテクトっぽいことをやっているます。  
それなりに画面数があり、タブが多く複雑な画面が結構あったので、JSP 使った場合の世紀末的な光景を思い浮かべ、思い切ってサーバ側のロジックを WebAPI 化して、Backbone と組み合わせてみようかと考えています。  
さらに、SAStruts の恩恵を最大限享受したいので、いろいろ試行錯誤しながら現在プロトタイプを作っています。

## SAStruts -> Backbone.Sync GET の場合

Backbone の Collection や Model にて fatch を呼び出すと、Backbone.Sync がサーバに対して GET で URL リソースを取得します。この部分は比較的簡単で、以下のように SAStruts の Action 側の実装を少し変えるのみで JSON でレスポンスを返すことができます。
（ちなみに、JSON のライブラリは[jsonic](http://jsonic.sourceforge.jp/)を使用しています。）

サーバ側(IndexAction.get.java)

```java
public class IndexAction {

  @Execute(validator = false)
  public String index() {

    List<Model> models = new LinkedList<Model>();
    models.add(new Model("aomori", "good place"));

    //JSONでレスポンスを返す
    ResponseUtil.write(JSON.encode(models), "application/json");
    return null;
  }
}
```

フロント側(Backbone.Sync.get.js)

```js
PROTO.Views.view = Backbone.View.extend({
  //中略

  read: function () {
    this.collection.fetch({
      success: this.render,
    });
  },

  //中略
});
```

## Backbone.Sync -> SAStruts POST の場合

今度は Backbone から Form の内容を POST でサーバ側へ送信する場合ですが、これは一筋縄ではいきませんでした。

結論から言うと、SAStruts 側で Backbone.Sync の Form 内容を POST で受け取るためには、Ajax リクエストをあたかも Form を Submit したリクエストかのように偽装する必要があります。

そう、**backbone.emulateJSON = true**の出番です。（本当に[このパート](https://github.com/enja-oss/Backbone/blob/master/docs/Sync.md)翻訳しといて良かったな w。）

これで Content-Type を「`application/x-www-form-urlencoded`」にすることは出来たのですが、リクエストパラメータは Ajax.options の data 属性で渡さないと受け取れません。結果、次のようなコードとなります。

フロント側(Backbone.Sync.post.js)

```js
PROTO.Views.view = Backbone.View.extend({
  //中略

  create: function () {
    var param = {};
    _.each($("form").serializeArray(), function (v) {
      param[v.name] = v.value;
    });

    //Content-Typeを偽装
    Backbone.emulateJSON = true;
    var model = new PROTO.Models.model(param);
    //リクエストパラメータはAjaxのdata属性で渡す
    this.collection.create(model, { data: param, success: this.render });
  },

  //中略
});
```

サーバ側(IndexAction.post.java)

```java
public class IndexAction {

  //TODO ActionForm
  //ActionFormでリクエストパラメータを受け渡し
  @Required
  public String name;
  @Required
  public String age;

  //TODO エラーの戻りをJSON化
  @Execute(validator = true, input="index.html")
  public String index() {

    List<Model> models = new LinkedList<Model>();
    models.add(new Model(name, age));

    ResponseUtil.write(JSON.encode(models), "application/json");
    return null;
  }
}
```

これで、サーバ側で Backbone.Sync の POST 値を受け取ることができました。

さらに、ActionForm も受け取れるだけではなく、アノテーションによる validation も効きます。ここでエラーが JSON で帰ってくると理想的なのですが、今日時点ではそこまで作れてません。
作っている最中のコードはこちらです。気力が続けば少しずつブラッシュしてくかも。

[https://github.com/mitsuruog/SAStruts-Backbone](https://github.com/mitsuruog/SAStruts-Backbone)

ちなみに本題とは別件なんですが、同じ仕事で Bootstrap のカスタムもやっていて、なかなか Less も面白いなと思っています。世の中には Bootstrap のテーマを公開している人も多いので、青森ゆかりのデザイナーさん、青森っぽいテーマ一緒に作ってみませんか？  
（と、無理やり青森アドベントカレンダーネタにしてみた w。）

**Backbone.js Advent Calendar 2012**

- ← 前日　[Node.js + WebSocket + Backbone.js のすすめ](http://takesy.cocolog-nifty.com/atico/2012/12/nodejs-websocke.html)[](http://www.blogger.com/)（@takeshy）
- → 後日　[おさわり。backbone の ajax 周りの処理とか。](http://1000ch.net/2012/12/18/AjaxOfBackbone/)（@1000ch）

**Aomori Advent Calendar 2012**

- ← 前日　[茄子的　今年一番ヒットしたツールは・・・](http://nasunoblog.blogspot.jp/2012/12/blog-post.html)（@nasunotw）
- → 後日　[なぜ Facebook は僕の中で今年一番ヒットしたのか？](http://aomori-web-advent-calendar-2012.blogspot.jp/2012/12/facebook.html)（@kzki）

Backbone.SyncでSAStrutsにFormをPOSTする方法

このエントリは[Backbone.js Advent Calendar 2012](http://www.adventar.org/calendars/15)の 5 日目の記事です。

[前回](2012/12/backbonelocalstoragejsbackbonesync)の Backbone.Sync と backbone.localstorage.js の話の続きで、Backbone.Model から見る Backbone.Collection との関連性についてお話します。



### このエントリでお伝えしたいこと。

1.  何をすると Backbone.Model と Backbone.Collection の結びつくか。

## はじめに

前回のテストコードですが、[Backbone.localstorage.js 本家](http://goo.gl/v1gFX)のテストコードを見たところ、どうやら Backbone.Collection の create()を使うのが正しい使い方ようなので、次のように書き直しました。  
（ちなみにユニットテストは[Jasmine](http://goo.gl/IUtf)を使ってます。）

```js
describe("test localstorage", function () {
  beforeEach(function () {
    this.collection = new collection();
  });

  it("test collection create", function () {
    this.collection.create({
      title: "hello",
    });

    var model = this.collection.at(0);
    expect(this.collection.localStorage.find(model)).not.toBe(null);
    expect(this.collection.localStorage.find(model).title).toBe("hello");
  });
});
```

なんだ Collection の create()を使えば良いのか。一件落着！  
と思いたいのですが。。。

確か、model.localStorage か model.collection.localStorage が存在しない場合、デフォルトの Ajax が動くのは前回確認済みです。上のテストコードのどこを見てもそのようなことはしていませんね。
なにやら黒魔術的な臭いがします。

## Backbone.Model と Collection の近しい関係

黒魔術的な臭いがする場合は、ソースコードを読むのが一番です。まず、Collection の`create()`を読みました。

```js
// Create a new instance of a model in this collection. Add the model to the
// collection immediately, unless `wait: true` is passed, in which case we
// wait for the server to agree.
create: function(model, options) {
  var coll = this;
  options = options ? _.clone(options) : {};
  model = this._prepareModel(model, options);
  if (!model) return false;
  if (!options.wait) coll.add(model, options);
  var success = options.success;
  options.success = function(nextModel, resp, xhr) {
    if (options.wait) coll.add(nextModel, options);
    if (success) {
      success(nextModel, resp);
    } else {
      nextModel.trigger('sync', model, resp, options);
    }
  };
  model.save(null, options);
  return model;
},
```

上は Backbone.js の 766 行目辺り。ざっと目を通してすぐ分かりました。

```js
model = this._prepareModel(model, options);
```

怪しすぎる ww。  
なので、`_prepareModel()`を読みました。

```js
// Prepare a model or hash of attributes to be added to this collection.
_prepareModel: function(model, options) {
  options || (options = {});
  if (!(model instanceof Model)) {
    var attrs = model;
    options.collection = this;
    model = new this.model(attrs, options);
    if (!model._validate(model.attributes, options)) model = false;
  } else if (!model.collection) {
    model.collection = this;
  }
  return model;
},
```

上は Backbone.js の 809 行目辺り。ありました。見たかったのはこれです。

```js
model.collection = this;
```

なるほど、こんなところで Model に Collection がセットされていましたね。
これで、上のテストコードがパスできる理由も分かりました。これですっきりです。

他にも Collection の中で`_prepareModel()`呼んでいる場所を調べたところ、`create()`も含めて 4 箇所ありました。

- [add](http://backbonejs.org/#Collection-add)
- [push](http://backbonejs.org/#Collection-push)
- [unshift](http://backbonejs.org/#Collection-unshift)
- [create](http://backbonejs.org/#Collection-create)

まだ Backbone の全体を見通せてないので、作ってて所々（？）となることがあります。ソースコード印刷して電車で読むことにしました。

**Backbone.js Advent Calendar 2012**

- ← 前日　[Backbone.js の MVC について](http://goo.gl/J28KM)（@tomof）
- → 後日　[Backbone.js 日本語リファレンス](http://ando19721226.github.com/Backbone/)[](http://www.blogger.com/blogger.g?blogID=5596737312884238083)（@ando）

Backbone.Modelから見るBackbone.Collectionとの関連性

このエントリは[Backbone.js Advent Calendar 2012](http://www.adventar.org/calendars/15)の 2 日目の記事です。

Backbone.js には[Backbone.Sync](http://goo.gl/xIbI9)という Model とサーバ側のリソースを常に同期させる仕組みがあり、これを Override することで同期させる仕組みを自体を柔軟に変えることができます。  
今回は[backbone.localstorage.js](http://goo.gl/qBk6P)のユニットテストを通じて、Backbone.Sync を Override する仕組みについて少しお話したいと思います。



### このエントリでお伝えしたいこと。

1.  backbone.localstorage.js はどのように Backbone.Sync と Override しているか。
2.  backbone.localstorage.js は Backbone.Sync を Override するコードの良いお手本だと思う。。

## はじめに

まず、きっかけですが、backbone.localstorage.js を使って localstorage に Backbone.Model を保存する簡単なサンプルを作ってユニットテストしたところ、思わぬところで fail してしまったことです。  
Backbone.js 側のコードとユニットテストのコードは次のとおりです。
（ちなみにユニットテストは[Jasmine](http://goo.gl/IUtf)を使ってます。）

app.js

```js
var model = Backbone.Model.extend({
  title: "",
});

var collection = Backbone.Collection.extend({
  model: model,
  localStorage: new Backbone.LocalStorage("backbone-blog-post"),
});
```

test.model.before.js

```js
describe("test localstorage", function () {
  beforeEach(function () {
    this.model = new model();
  });

  it("test model save()", function () {
    //Error: A "url" property or function must be specified
    this.model.save({
      title: "hello",
    });
    expect(this.model.collection.localStorage.find(this.model)).not.toBe(null);
    expect(this.model.collection.localStorage.find(this.model).title).toBe(
      "hello"
    );
  });
});
```

ユニットテストを実行した結果は、次のようなエラーが発生しました。

> Error: A "Url" property or function must be specified

初めは localstorage に保存しているのに、なぜ URL が必要なのかわかりませんでした。

## localstorage に保存するはずなのになぜ URL が必要??

その前に、Backbone.Model の`save()`と`Backbone.Sync`の関係、`Backbone.Sync`のデフォルトの挙動について抑えておく必要があります。

まず、Backbone.Model の`save()`と Backbone.Sync の関係についてですが、Backbone.Model の`save()`を呼び出した際に、内部で`sync`イベントが発生して、Backbone.Sync に定義されている function が実行されるようになっています。  
その際に、Backbone.Sync はデフォルトでサーバサイド側の REST API
(GET/PUT/POST/DELETE)と Ajax（jQuery か Zepto 依存）で通信をするようになっています。

これらの事により、先のエラーは Ajax 通信をしているため発生していることが容易に予想できるのですが、そもそも backbone.localstorage.js は Backbone.Sync を Override しているので、なぜ Ajax のコードが生きているのか分かりませんでした。

## なぜ Ajax が動いているのか?

この問題を理解するために backbone.localstorage.js のソースを読みました。  
（以下、核心部分だけ抜粋します。）

```js
// Override 'Backbone.sync' to default to localSync,
// the original 'Backbone.sync' is still available in 'Backbone.ajaxSync'
Backbone.sync = function (method, model, options, error) {
  return Backbone.getSyncMethod(model).apply(this, [
    method,
    model,
    options,
    error,
  ]);
};
```

上は backbone.localstorage.js の`134行目`辺り。
Backbone.Sync を Override しているところです。中で`Backbone.getSyncMethod()`を return しています。
自分でカスタムする場合は、ここに直接 Override するコードを書いても良さそうです。

```js
Backbone.ajaxSync = Backbone.sync;

Backbone.getSyncMethod = function (model) {
  if (
    model.localStorage ||
    (model.collection && model.collection.localStorage)
  ) {
    return Backbone.LocalStorage.sync;
  }

  return Backbone.ajaxSync;
};
```

上は backbone.localstorage.js の`123行目`辺り。本問題の核心部分です。  
読めば一目瞭然なのですが、デフォルトの Backbone.Sync を`Backbone.ajaxSync`という別名で保存してました。

しかも、`Backbone.getSyncMethod`では

- model.localStorage
- model.collection.localStorage

いずれかのプロパティが存在しない場合、Backbone.ajaxSync が return されます。

これですべての謎が解けました。

## 最初のテストコードはどうあるべきだったのか?

先に結論ですが、次のコードでテストが通りました。

```js
describe("test localstorage", function () {
  beforeEach(function () {
    this.model = new model();
    //collectionをmodelにセットする
    this.collection = new collection();
    this.model.collection = this.collection;
  });

  it("test model save()", function () {
    this.model.save({
      title: "hello",
    });
    expect(this.model.collection.localStorage.find(this.model)).not.toBe(null);
    expect(this.model.collection.localStorage.find(this.model).title).toBe(
      "hello"
    );
  });
});
```

ただ、なんとなく違和感が残ります。

Model だけをテストする目的であればこれも有りだと思いますが、テストを通すためにコードを足したようでなんとなく気持ち悪いですし、何か使い方が間違っている気がします。  
（[次回](/2012/12/backbonemodelbackbonecollection/)はこの違和感を取り除いて行く過程を書きます。）

ちなみに、backbone.localstorage.js はコードが 140 行足らずなので読むのは非常に楽でした。
実際に Backbone.Sync を Override するコードを書く場合は、ぜひ参考にしたいと考えています。

**Backbone.js Advent Calendar 2012**

- ← 前日　[Backbone.js で今つくっている構成について](http://goo.gl/s9JLG)
- → 後日　[Backbone.js が自動でやってくれるところについて](http://goo.gl/WxdVo)