2014年9月17日水曜日

【JsRender】始めに

株式会社ジェニシス　技術開発事業部の遠藤　太志郎(Tacy)です。

ここ最近は、クラウド基盤「Google App Engine(以下、GAE)」の連載していますが、
本日からは少し趣向を変えてAjax関連のお話に行こうと思います。

jsp禁止

さて、なぜ急にGAEからAjaxに話が触れたかと言いますと、こちらの回でご紹介しましたとおり、GAEというのはフルAjaxで開発するのがベストなのです。

jspを使うと画面がホワイトアウトしている時間が発生してしまいますからね。
まあ、機能を果たすという意味ではjspを使っても良いんですけど、やっぱり何秒もホワイトアウトしているのは心象が悪いでしょう。
私は断固としてAjaxを推したいと思います。

しかしですね、jspが使えないとなると、一体どうやって画面上の分岐を表現すれば良いのでしょう？
例えば、「検索結果がある時は一覧を表示する。無い時は赤文字でエラーメッセージを表示する」とか。

jspが使えればifタグで一発なのですが、使えないとなるとこれは厳しい。

そこをAjaxを使って動的に……。
って、もちろんやろうと思えば自前でAjaxを作って実現出来ますけれども、その度にロジックを組むのは効率悪過ぎです。

jspと比較しての生産性の低下が深刻です……。

そこで私が考えたのが、「AJaxでjspみたいなことが出来る便利なライブラリは無いの？」でした。
そう、Ajaxによるテンプレートエンジンです。

テンプレートエンジン

さて、Ajaxで困った時はjQueryに限ります。

十年ほど前ははAjaxライブラリが群雄割拠していましたが、今はjQueryが支配的になりました。
「何かAjaxで良い機能無いかな？」と思った時は、とりあえずjQueryから着手するのが一番効率的です。

そして私が探した所、ありました！！


  • jQuery Template


まさに期待通り、jspタグみたいな機能をAjaxでやる為のjQuery公式プラグインです。
jQuery公式なら安心ですね。早速導入を、と思いきや。

何と開発停止。(泣)




作り始めたは良いものの、途中で方針を変更して、まだ諦めずに頑張ると言いつつも、そのうち頓挫したというオチのようですね……。

残念な限りですが、その代わりに台頭してきたのが「JsRender」です。


JsRender

JsRenderはjQuery公式ではありませんが、jQuery Templateの後継のようなポジションにあるライブラリです。
公式サイトはこちらです。


公式サイトに解説も沢山載っていますので習得も捗ります。

フライングになりますが、例として『検索結果一覧の表示』のサンプルをご紹介すると、以下になります。

まず、HTMLにテンプレートとなるタグを書いて、

<script id="shohinListTemplate" type="text/x-jsrender">

<table class="shohinList">
 <tr>
  <th class="no">NO</th>
  <th class="shohinId">商品ＩＤ</th>
  <th class="shohinName">商品名</th>
  <th class="action"></th>
 </tr>
 {{for shohinList}}
 <tr>
  <td class="no">{{>seqNo}}</td>
  <td class="shohinId">{{>shohinId}}</td>
  <td class="shohinName">{{>shohinName}}</td>
  <td class="action">詳細　編集</td>
 </tr>
 {{/for}}
</table>

</script>

後はJavaScript部に「$("#shohinList").html($("#shohinListTemplate").render(json));」を一発書くだけでＯＫ。
(json変数にはもちろんjsonのデータが入ります)

「{{for shohinList}}」を見ただけでも、何となくfor文でループしていることがお分かりになるでしょう。
直感的に使いやすい良いデザインのライブラリですね。

終わりに

このJsRender作戦はGAEに限ったことではありません。
私は別業務でAndroidの開発も行った事があるのですが、その時に「HTML5アプリ」と「ネイティブアプリ」の良い所取りをする「ハイブリット型」の設計を採用しました。

その時に、ネイティブ機能で整形したデータをHTMLに表示する時に使ったのも、この「JsRender」でした。

とても使い勝手の良いライブラリなのでぜひオススメです。

次回から各種機能について順次ご紹介していきます。
投稿者 時刻:
ラベル:

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)