2013-04-26

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

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

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

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

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

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

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

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

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

JSP側のコード

javascript側のコード

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

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

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

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

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

管理がしやすい

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

仕組みが簡単

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

上を説得しやすい

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

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

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

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

まとめ

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

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