最近、私の中で Backbone.js と共に注目の Jasmine のドキュメントを和訳しました。 
<a href="http://pivotal.github.com/jasmine/">本家のドキュメント</a>はこちらです。
和訳したものはこちらです。 
（もし、訳で怪しいところがあればご指摘ください。）
<a href="http://mitsuruog.github.com/jasmine/">http://mitsuruog.github.com/jasmine/</a>
ちなみに Jasmine は Javascript のテスティングフレームワークの 1 つです。 
他のフレームワークを満足に扱ったことがないので、あまり偉そうなことは言えませんが、特徴として次のようなことを挙げておきます。
<ul>
<li>standalone 版（JS ファイル）があり、ブラウザのみでテスト実行と結果の確認ができる。</li>
<li>テストケースのネストが可能、（Java で言うことの）setUp、tearDown 機能がある。</li>
<li>豊富な matcher。</li>
<li>Mock（Spy）が割と簡単に作れる。</li>
<li><a href="https://github.com/velesin/jasmine-jquery">jasmine-jquery</a>プラグインが素晴らしい。</li>
</ul>
<a href="https://github.com/velesin/jasmine-jquery">jasmine-jquery</a> については、後日機会があれば触れたいと思いますが、とにかく DOM やイベント周辺のテストがさらにやりやすくなり、もっと便利になります。
ちなみに Google で「Jasmine」で検索すると、まだ 4 番目ですね。もっと上位になるように頑張って情報発信していきたいです。
<img src="https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2012/jasmine.png" alt="">

Jasmineを和訳しました

[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する方法

[子育てエンジニアがお役立ち育児グッズをひたすら紹介する Advent Calendar 2012](http://www.adventar.org/calendars/45) の 22 日目のエントリです。ちょっとおもしろそうなので参加してみました。 
タイトルは少し釣りっぽいです。



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

1. お食事エプロンはポリエチレンとかシリコン製に限る！
2. 毎日の小さな努力を続けること。
3. 人生は長いので、とにかくあせらず頑張る。

このアドベントカレンダーの趣旨として、まず育児グッツを紹介することになっているので、我が家でおそらく一番活躍している育児グッツの「お食事エプロンを」紹介します。

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2012/OGYU.jpg)

「OGYU」というメーカー（ブランド？）のお食事エプロンです。ポリエチレン製で食器感覚で洗えます。これは「PLATINUMBABY」とのコラボ品なので現在は購入することはできませんが、類似品は[Amazon](https://www.amazon.co.jp/dp/B001QOAS2Y/ref=as_li_qf_sp_asin_til?tag=mitsuruog-22&camp=243&creative=1615&linkCode=as1&creativeASIN=B001QOAS2Y&adid=00QK31KGT3T3CED7A7W9&)などで購入可能です。

購入から約 1 年間毎日使っていますが、本当に丈夫で、嫌なにおいが一切しません。 
もう一度生まれ変わって子育てしても購入したいほどです。本当にオススメです。

で、ここからが本題です。

## 子育てエンジニアが感じる焦り

まず、「子育てエンジニア」と言っても私が専業主夫として育てている訳ではありません。 
妻と共働きですので、あくまで家事と育児の分担はフェアで行きたいというのが、私のポリシーです。

ただ、独身の自由な頃と比べると、自分の時間というものは確実に減っています。
という訳で、やりたいことのタスクが消化できず、塩漬け状態のものが溜まってくると、少し焦りや苛立ちを感じることも少なくありません。

このような感覚は、子供を持つエンジニアが 1 度は持つ感覚だと思います。

## 今年 1 年どれくらい時間を使えたのか？

とは言っても、時間がまったくないわけではありません。
少しずつであっても毎日努力しているはずです。 
せっかく、この（アドカレ）機会を得ましたので、毎日の努力時間を明確にして、客観的に判断することにしました。

私の場合、一日の自由時間は PM22:00 ～の 2 時間です。
休日も家事をほとんど受け持つので、週を通して変化は無い前提で計算しました。
また、年間通してほぼ休まずできたので年間で計算した場合、次の通りでした。

自由時間（時間単位）

- 2（h/日）
- 14（h/週）
- 60（h/月）
- 730（h/年）

少し分かりやすくするため、日単位にします。

自由時間（日単位）

- 0.08（日/日）
- 0.58（日/週）
- 2.50（日/月）
- 30.42（日/年）

計算してみると（当たり前の事実なのですが・・・）私が感じている感覚よりも遥かに大きい値が出て驚きました。

この時間に対する考え方は個人差があると思いますが、私は今年 1 年間のアウトプットを考えたとき、時間に対して少ないなと感じました。（だって、年間で 1 ヶ月もあったのですから。）

と言うわけで、結論としては

- 時間は充分あった。
- 時間に対してのアウトプットの量が少なかった
- 焦っていたのは時間ではなく、アウトプットの量。

という訳で、目線がミクロになってしまって焦ってしまったようです。
（それにまだまだ、スキルが足りてませんね・・・）
とは言っても、改めて計算してみると、毎日の少しずつの努力の積み重ねが大事だと言うことが、本当に痛いほど分かりました。

## まとめ

1. 人生で焦った時ほどマクロな目線を意識すること。
2. 1 日少しの努力を続けること。（1 日 2 時間で年間 30 日！！）

来年もこのペースを維持しながら、さらにレベルアップして行きたいと思います。 
それから、来年はもう少しアウトプットの量を増やしていきます。