フロントエンド技術を学ぼう 2-18.JSテンプレートについて学ぶ

Front-end Developer Handbook 2017を教科書にフロントエンド周りの技術を習得する連載。

www.mojage.club

第28回はPart II: Learning Front-End Devから、
18項のLearn JS Templates)を紹介します。

JSテンプレートについて学ぶの説明です。

Sponsored Link

JSテンプレートについて学ぶ

JavaScriptテンプレートとは、データとテンプレートを合体させ、文字列を作る仕組みのことです。テンプレートエンジン自体は、JavaScriptのライブラリです。これはJavaScriptの複雑さを解消する方法としてJavaScriptから、HTML作成部分を切り離すということが可能になります。 JavaScriptテンプレートは基本的には使用されますが、ロジックとモデル(データやJSON)からビューの部分(UI)を分離するMV*ソリューションで必ず使用されているわけではありません。

テンプレートエンジンの使いどころ

2017年現在、テンプレートエンジンを探したところ以下の5つが有名なようです。しかし、実際にはReact+JSX(JavaScriptの文法拡張)や、フレームワーク自体に備わったテンプレート要素の使用でその役割を補う傾向が強いようです。また、JavaScript 2015(ES6)には、テンプレート文字列という固有のテンプレートメカニズムも備わったので、テンプレートエンジンが使われる機会は開発者の好みに依ります。

主なテンプレートエンジン

Handlebars

Handlebarsは、mustacheの機能強化版です。mustacheと比べロジックを定義出来ます。
以下にHandlebarsの基本的な使用方法のサンプルを示していますが、JavaScriptのロジックがわかりやすいようにjQueryも一緒に読み込んでいます。

See the Pen handlebars_test by mojage (@mojage) on CodePen.

サンプルでは、テンプレートに対してJavaScriptで定義したデータオブジェクト渡しているだけですが、他にも以下のことが行なえます。

  • {{{}}}でhtmlを文字列として表示
  • ヘルパーという関数が使用可能#each#withなど
  • registerHelper関数でヘルパーの定義も可能
書籍

Instant Handlebars.js(即席 Handlebars.js)

参照元 :
Learn Handlebars in 10 Minutes or Less [読み物]
(Handlebarsを10分以内で学ぶ)
JavaScriptのテンプレートエンジンHandlebars入門 [読み物][日本語]

Nunjucks

Nunjucksはmozilla謹製テンプレートライブラリです。 先程のHandlebarsの時と同じものをNunjucksで作ってみました。基本的な記述方法や出来ることは殆ど変わりませんが、変数名に-が使用できない、マクロや関数を呼び出す時は{ %``%}で囲むなど、表現が多少違います。今回はjQueryを使用せずに素のJavaScriptで記述しています。

See the Pen nunjucks_test by mojage (@mojage) on CodePen.

参照元 : Getting Started with nunjucks [読み物]
(始めよう nunjucks)

ES6のテンプレート文字列

最後にES6のテンプレート文字列です。ES6で追加された機能なので、上記2つの様にライブラリを読み込む必要はありませんが、ブラウザ対応状況を確認する必要があります。Can I useを確認すると、よく使用されるブラウザは大体テンプレート文字列に対応しているようです。ただしインターネットエクスプローラには対応していないので、IEをサポートする予定があるならば、HandlebarsかNunjucksを使いましょう。

See the Pen templateLiteral_test by mojage (@mojage) on CodePen.

参照元 :
ES6 Template Literals, the Handlebars killer? [読み物]
(ES6テンプレートリテラル、Handlebarsキラー?)
JavaScript の テンプレートリテラル を極める! [読み物][日本語]