ホーム / JavaScript /

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

2020年7月25日土曜日

Front-end Developer Handbook JavaScript

t f B! P L

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

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

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


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)



参照元 :


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.

参照元 :


QooQ