最近、業務系の Web システムでも Ajax での非同期通信が当たり前となってきました。
その際に困るのが DOM をどう書き出すかと言ったところで、昔は javascript から直で DOM を書き出すことを平気でやっていたのですが、そんなことをするとメンテナンスしにくいコードが量産されていくわけで、そろそろクライアントサイドテンプレート導入について真剣に考えないとと思う今日この頃です。



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

1.  JSP で underscore.js のテンプレートを使う方法
2.  JSP でクライアントサイドテンプレートを書き出すメリット

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2013/underscore.png)

まず、手軽にクライアントサイドテンプレートを導入するのであれば、[jQueryTmplate](https://github.com/jquery/jquery-tmpl)か[Underscore.js](http://underscorejs.org/)を使うのが良いと思います。
特に、Underscore.js は Java でいう apache commons のような、かゆいところに手が届く系の Utility 関数の詰め合わせなので、template 以外でも使いどころがありオススメです。

## JSP で underscore.js のテンプレートを使う際に少しハマッたこと

まず、JSP で underscore.js のテンプレートを使う際に少しハマッたので、その話をします。

underscore.js の template()のデリミタ（区切り文字）はデフォルトで`「<%」「%>」`となっています。
これは、JSP のスクリプトレットと同じなので、そのまま使った場合、JSP プリコンパイル時に落ちます。
（まぁ、当たり前と言えばそうです。）

幸い、underscore.js にはデリミタをカスタマイズできる I/F を持っているので、別のデリミタに置きかえましょう。
サンプルコードは次の通りです。

JSP 側のコード

```
<script type="text/template" id="tmpl_hoge">
<li>
  {{hoge}}
</li>
</script>
```

javascript 側のコード

```js
/**
 * _.templateSettingsにてテンプレートの区切り文字を変更してます。
 * デフォルトは<%%>なので、Mustache.jsのような{{}}に変えてます。
 */
_.templateSettings = {
  interpolate: /\{\{(.+?)\}\}/g,
};

var tmpl = _.template($("#tmpl_hoge").html());

$("ul.some").append(tmpl({ hoge: "Hello" }));
```

なにはともあれ、これで無事に JSP にて書き出したクライアントサイドのテンプレートを Underscore.js の.template()で使用することができました。

## JSP でテンプレートを出力することのメリットについての雑感

で、ここから本題です。
ちなみに最近の業務では、JSP でクライアントサイドのテンプレートの書き出しを行ってます。
実際に使ってみていろいろメリットがあると感じて、現状の Java の Web 開発における現実解だと思っています。
そのあたりのメリットについてつらつら書き出してみます。

### サーバ側の実装担当者との分業がしやすい

クライアントサイドテンプレートを JSP にするメリットは、なんといってもサーバ側実装者との分業促進です。
私の場合、テンプレートだけ外部 JSP にして、`<c:import>`でサーバ側でインクルードしています。
これでリポジトリにコミットする際の不要なコンクリフトが減りました。

### 管理がしやすい

JSP 一本なので･･･あちこちに点在するよりはいいです。

### 仕組みが簡単

サーバ側でインクルードするので、Java エンジニアにとって分かりやすいこと極まりない。

### 上を説得しやすい

「クライアントサイド～」とか言い出すと話がややこしくなるので、とにかく JSP というオブラートに包んでしまいましょう。

### サーバー側で動的にクライアントサイドのテンプレートを作成することが可能

はっきり言ってリーサルウエポンです。
Taglib とか EL 式とか自由に使えますので、JSP にカスタム Taglib を 1 つ書いて、後はすべて Java でテンプレートを構築するなんていう荒業も可能です。

私は、サーバ側で保持しているマスタ情報の書き出しなどに限定して使用してます。
良く使うのはコードマスタ系のプルダウン作成などです。

```
<%--
 Taglibも使うことで結構なんでもできるww
 でも、ロジックが分散するのでご利用は計画的に
--%>
<script type="text/template" id="tmpl_hoge">
{{hoge}}
<html:select property="hogeKbn"/>
  <html:options colection="hogeKbnList" property="kbn" labelProperty="kbnName" />
</html:select>
</script>
```

## まとめ

という訳でだらだら書いてしまいましたが、JSP とクライアントサイドテンプレートをうまく融合するために大事なことは 2 つです。

1.  テンプレート側のデリミタが、JSP のスクリプトレットや EL 式とバッティングしないようにすること。
2.  テンプレートを外部 JSP とし、サーバ側実装者との分業を促すこと。

JSPでUnderscore.jsの.template()を使いながら、クライアントサイドテンプレートとJSPの融合について思いを馳せる

先日めでたく 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 を使った場合、どのようにガイドを作成したら均一に作れるか思索したものの残骸です。

April, 2013

JSPでUnderscore.jsの.template()を使いながら、クライアントサイドテンプレートとJSPの融合について思いを馳せる

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