JavaScriptのテンプレートエンジンまとめ

より大型なWebアプリケーションを開発する上でテンプレートエンジンの利用は欠かせません。テンプレートエンジンはビューとロジックを分離し、メンテナンス性の高いシステムを実現してくれるでしょう。

そこで今回は主なJavaScript（Webブラウザ）向けのテンプレートエンジンを紹介します。

Handlebars.js: Minimal Templating on Steroids

ロジックは殆どなく、if文と繰り返し文くらいしかありません。テンプレートの仕組みとしてはパーシャルにも対応しています。ロジックがない分、ビューを適用する前のJavaScript側できちんとデータを整形した上で渡す必要があります。

{{ mustache }}

mustacheもまたロジックの少ないテンプレートですが、JavaScript以外の言語にも対応しているのがポイントです。ロジックが複雑になるとJavaScriptでしか使えなくなりますが、シンプルである分幅広い言語（Ruby/Python/Erlang/PHP/Perl/Java/Objective-C/Swift/Dartなど）をサポートしています。

Underscore.js

Underscore.jsはJavaScriptに便利なロジックを追加してくれるライブラリですが、その一つにテンプレート機能があります。機能は多くありませんが、Underscore.jsが持つ機能でサポートできるでしょう。

JsRender/JsViews

有名なjQuery Template（現在は開発終了）の作者が開発しているテンプレートエンジンです。とは言えjQueryには非依存です。自分でカスタムタグを作ることができるので、ビューとロジックが分離しやすくなっています。

Hogan.js

Twitterの開発しているテンプレートエンジンで、テンプレートをコンパイルするのが一つの特徴となっています。これによってテンプレートがJavaScriptに変換され、実際に描画が高速になります。

EJS – JavaScript Templates

EJSはhifiveでも使っているテンプレートエンジンです。RubyのERBにインスパイアされているので、構文もよく似ています。Railsライクなヘルパー機能、テンプレートキャッシュ、パーシャルなど多機能なエンジンです。

A JavaScript library for building user interfaces | React

Reactは厳密にはテンプレートではありませんが、ビューを作る上で最近注目されています。特徴はVirtualDOMを使い、DOMの状態を意識することなく使えることでしょう。JSXと呼ばれるテンプレートフォーマットになり、この記述に好き嫌いが分かれるようです。

pure.js – Javascript Template Engine

HTMLの中に値を埋め込んでいくようにビューを作成するテンプレートエンジンです。機能は殆どありませんが、シンプルなので習得は容易そうです。

Dust.js by LinkedIn

LinkedIn社が開発しているテンプレートエンジンです。コンパイル機能、ヘルパー、フィルター、パーシャル、ブロックといった機能があります。＠や#など独自のタグ機構が備わっています。

Nunjucks

Mozillaの開発するテンプレートエンジンです。jinja2にインスパイアされて開発しています。軽量で高速、機能拡張サポート、フィルターなどの機能があります。実際、Mozillaプロジェクトの多くで実用されています。

いかがでしょうか。テンプレートエンジンを使いこなせばWebアプリケーションの作業分離がしやすくなり、開発が効率化します。JavaScriptではサーバサイドのものと異なり、多機能さよりも軽量さやシンプルさが求められるようです。ロジック側でのサポートが欠かせないと言えるでしょう。

hifive – HTML5企業Webシステムのための開発プラットフォーム