はじめに
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ファイルをダウンロードできます。
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を取り上げます。
テンプレートエンジンとは
JsRenderはJavaScriptで実装されたテンプレートエンジンです。テンプレートエンジンは、テンプレートとデータモデルを組み合わせて、成果となるドキュメントを生成します。
JsRenderにおけるテンプレートは、二重ブレース{{}}で囲まれたJsRenderのタグを持つテキストです。そして、データモデルはJavaScriptのオブジェクトです。JsRenderはテンプレートとなるテキストと、データモデルとなるJavaScriptのオブジェクトを組み合わせて、成果ドキュメントであるテキストやHTMLを生成します。
| 構成要素 | JsRenderの構成要素 | 例 |
|---|---|---|
| テンプレート | JsRenderタグを持つテキスト | {{:name}}の値段は{{:price}}円です |
| データモデル | JavaScriptのオブジェクト | var item = { name: "みかん", price: 100 } |
| 成果ドキュメント | テキストやHTML | みかんの値段は100円です。 |
