JavaScriptテンプレートエンジンJsRender 基本のキ

CodeZine / 2013年8月7日 14時0分

図4:+演算子を使って連結したテキストを表示

 本連載では数回にわたって、JsRenderとJsViewsの使い方に触れていきます。今回はJsRenderの概要と基本的な使い方を、サンプルを交えて紹介します。

■はじめに

 JsRenderは高速、軽量、高性能なJavaScriptテンプレートエンジンです。JsRenderを使うと、ブラウザ側で動的にテキストやHTMLを生成できます。

 JsRenderはoutlook.comなどのサイトですでに使われており、今後利用者が増えることが期待されています。先日、JsRenderの正式版のリリースが近いことが、作者であるボリス・ムーア氏のブログで発表されました。そこで、正式リリースに先立ちJsRenderの使い方を紹介していきます。

■対象読者

JavaScriptテンプレートエンジンに興味のある方 JavaScript、jQueryの基本を理解している方 ■必要な環境と準備

 JsRenderとjQueryを以下のサイトからダウンロードしてください。JsRenderは単体でも動きますが、jQueryのプラグインとしても機能します。

 JsRenderのダウンロードページでは、jsrender.jsとjsrender.min.jsの2種類のjsファイルをダウンロードできます。jsrender.min.jsは圧縮版と呼ばれるもので、jsrender.jsに比べてファイルサイズが小さくなっています。圧縮版では、変数の名前を機械的に短いものに置き換えてるなどしてファイルを小さくしているため、デバッグには向きません。開発中はjsrender.jsを使用し、公開前にjsrender.min.jsに切り替えるとよいでしょう。

 jQueryのダウンロードページでも、非圧縮版と圧縮版の2種類のjsファイルをダウンロードできます。

JsRenderjQuery■JsRenderとは

 これまでJavaScript上で動くテンプレートエンジンは数多く開発されてきました。その流れを受け、2010年10月にjQueryプロジェクトは公式プラグインとして、テンプレートエンジンであるjQuery Templateを提供すると発表しました。しかし、残念ながら2011年4月にこの発表は撤回され、開発は頓挫してしまいます。jQuery Templateの開発者であるボリス・ムーア氏はその後も開発を続け、テンプレートエンジンであるJsRenderとJsRender上で動くMVVMフレームワークであるJsViewsを発表しました。それと並行して、jQueryプロジェクトのプランニングWikiではテンプレートエンジンについて議論されていましたが、今のところ目立った成果はありません。JsRenderは公式プラグインではないものの、jQuery Templateの後継者と言って差し支えないでしょう。

 JsRenderは高機能なテンプレートエンジンというだけではなく、JsViewsを動かすために必要不可欠なテクノロジーです。JsViewsを学ぶにあたりJsRenderの理解は欠かせません。そこで、本連載の前半ではJsRenderの基本と使い方を紹介し、後半でJsViewsを取り上げます。

図1:JsRenderの依存関係


■テンプレートエンジンとは

 JsRenderはJavaScriptで実装されたテンプレートエンジンです。テンプレートエンジンは、テンプレートとデータモデルを組み合わせて、成果となるドキュメントを生成します。

図2:テンプレートエンジン概要


 JsRenderにおけるテンプレートは、二重ブレース{{}}で囲まれたJsRenderのタグを持つテキストです。そして、データモデルはJavaScriptのオブジェクトです。JsRenderはテンプレートとなるテキストと、データモデルとなるJavaScriptのオブジェクトを組み合わせて、成果ドキュメントであるテキストやHTMLを生成します。

図3:JsRender概要


JsRenderにおける構成要素 構成要素 JsRenderの構成要素 例 テンプレート JsRenderタグを持つテキスト {{:name}}の値段は{{:price}}円です データモデル JavaScriptのオブジェクト var item = { name: "みかん", price: 100 } 成果ドキュメント テキストやHTML みかんの値段は100円です。

CodeZine

トピックスRSS

ランキング