2014年9月30日火曜日

【JsRender】基本表示機能

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

本日よりJavaScriptによる画面レンダリングツール「JsRender」について本格的に連載を開始します。
最初の今日は導入編です。

ダウンロード

さて、まずは必要なJSファイルをゲットする所から始まります。

「JsRender」は単体でも機能するライブラリのようですが、普通はjQueryと組み合わせて使うものかと思います。
なので、本連載ではjQueryも併用することを前提で進めてまいります。

それぞれ、ダウンロード元は以下になりますので、各自ダウンロードして下さい。




取得したら、普通にHTMLのヘッダー部分でインポートしてあげればＯＫ。
簡単ですね。

<head>
  <script src="./js/jquery-1.11.1.js"></script>
  <script src="./js/jsrender.js"></script>
</head>

表示箇所を定義

次に、HTML上のどこにJsRenderの結果を出力したいのかどうかを意味する場所を定義します。

DIVタグでIDを記述すれば良いでしょう。

<div id="result"></div>

「id="result"」と定義しました。この場所にJsRenderを使って文字列を流し込みます。

ちなみに、これはHTMLを作成する上では常識ですが「ID」とは画面上で一意にするのがルールです。

HTMLはいい加減な言語なので、IDが重複しようがタグを閉じ忘れようが、かなりテキトーに書いても
そこそこちゃんと表示されてしまいます。

しかし、本件の処理は「JavaScript」ですから、こっちはそういい加減に書くわけにはいきません。
ID属性は常に一意。
その他、可能な限りHTMLの記述ルールを守って実装して頂けますよう、お願い致します。

テンプレートを定義

では、この辺りからJsRenderならではの要素に入ります。
テンプレート定義です。

例えば、「私の名前は○○です。」という文章を表示したいと思います。
この○○の部分だけは動的に変更して、それ以外は固定値、というテンプレートにしたい。
そのテンプレートが以下になります。

<script id="jsRenderTmpl" type="text/x-jsrender">
私の名前は{{:name}}です。
</script>

これでもう何となくお察し頂けたかと思いますが、「{{:name}}」で、「画面上に文字を記述する」という
意味を持つJsRenderの定義なのです。

Strutsで言う所の以下みたい記述ものです。

<bean:write name="usrdata" property="name" />

もう一つの特徴が「type」です。普通であれば「type="text/javascript"」と書くところ、
JsRenderの場合は「type="text/x-jsrender"」となります。

「このスクリプトはJsRenderの記述だ」と宣言しているわけですね。

これにより、


  • scrpitタグで括っているのでHTMLには表示されない。
  • 「type="text/x-jsrender"」なので、JavaScriptとは認識されない。


この特性が得られて、純粋な外部定義のように扱うことが出来るのです。


JsRenderを実行
さて、上記でテンプレート定義が出来ました。
後はJavaScriptとしてJsRenderを実行するのみです。

そのスクリプトはこちら。

<script>
var data = {"name": "遠藤　太志郎"};

var template = $.templates("#theTmpl");

var htmlOutput = template.render(data);

$("#result").html(htmlOutput);
</script>

まず最初にJSONを読み込みます。

「var data = {"name": "遠藤　太志郎"};」

ここではサンプルなのでJSONは固定値ですが、本番ではこのJSONを非同期通信により
サーバから動的に持ってくることになります。
キー値としましては、上記のテンプレートと合わせて「name」としました。

JSONはAjaxとは切っても切れない基本要技術です。
ご存じ無い方はぜひ習得して下さい。

次に、テンプレートを読み込みます。

「var template = $.templates("#jsRenderTmpl");」

これはJsRender独自の記述ですね。
「type="text/x-jsrender"」のID「jsRenderTmpl」を指定してテンプレートを読み込みます。

そして次に、テンプレートとJSON定義を合体させて、描画する文字列を作成。
ここもJsRenderの機能です。

「var htmlOutput = template.render(data);」

最後に、jQueryの機能で描画して終わり。

「$("#result").html(htmlOutput);」

なので、JsRenderは描画する文字列を出力する機能に絞っており、
それを描画する機能はjQueryの標準機能で行うという関係にあるわけです。

機能毎の独立性が担保された良い設計だと思います。

ほら、簡単に表示されました。


まとめると以下のようなソースになっています。

<!DOCTYPE html>

<html>
<head>
  <script src="./js/jquery-1.11.1.js"></script>
  <script src="./js/jsrender.js"></script>
</head>
<body>

<div id="result"></div>

<script id="jsRenderTmpl" type="text/x-jsrender">
私の名前は{{:name}}です。
</script>

<script>
var data = {"name": "遠藤　太志郎"};

var template = $.templates("#jsRenderTmpl");

var htmlOutput = template.render(data);

$("#result").html(htmlOutput);
</script>

</body>
</html>

どってことは無い簡単なスクリプトで実現可能であることがお分かり頂けるでしょう。

終わりに

以上で、基本の基本。
「ただ描写するだけ」という機能についてのご紹介は終わりです。

ハッキリ言って、JsRenderが無くても描画は出来るって言えば出来るんですが、
「type="text/x-jsrender"」によって外部定義することにより、
ロジックとテンプレートを独立させることが出来るようになっています。

これはソースの可読性を高める為には大変効果的です。すばらしい！！

次回から順次、if文やfor文などの機能についてもご紹介していきます。
投稿者 時刻:
ラベル:

0 件のコメント:

コメントを投稿

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