Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

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

徹底解説JsRender/JsViews 第1回

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2013/08/07 14:00

 本連載では数回にわたって、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とは

 これまで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の依存関係
図1:JsRenderの依存関係

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

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

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

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

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

  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • WINGSプロジェクト やましぎ (ヤマシギ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XMLD...

バックナンバー

連載:徹底解説JsRender/JsViews
All contents copyright © 2005-2018 Shoeisha Co., Ltd. All rights reserved. ver.1.5