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

徹底解説JsRender／JsViews 第1回

　本連載では数回にわたって、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ファイルをダウンロードできます。

• JsRender
• jQuery

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円です。