2017を教科書にフロントエンド周りの技術を習得する連載。Templates)を紹介します。JSテンプレートについて学ぶの説明です。JSテンプレートについて学ぶJavaScriptテンプレートとは、データとテンプレートを合体させ、文字列を作る仕組みのことです。テンプレートエンジン自体は、JavaScriptのライブラリです。これはJavaScriptの複雑さを解消する方法としてJavaScriptから、HTML作成部分を切り離すということが可能になります。JavaScriptテンプレートは基本的には使用されますが、ロジックとモデル(データやJSON)からビューの部分(UI)を分離するMV*ソリューションで必ず使用されているわけではありません。テンプレートエンジンの使いどころ2017年現在、テンプレートエンジンを探したところ以下の5つが有名なようです。実際にはReact+JSX(JavaScriptの文法拡張)や、フレームワーク自体に備わったテンプレート要素の使用でその役割を補う傾向が強いようです。2015(ES6)には、テンプレート文字列という固有のテンプレートメカニズムも備わったので、テンプレートエンジンが使われる機会は開発者の好みに依ります。主なテンプレートエンジンHandlebars.jsUnderscore.jsJsRenderHogan.jsnunjucksHandlebarsHandlebarsは、mustacheの機能強化版です。mustacheと比べロジックを定義出来ます。以下にHandlebarsの基本的な使用方法のサンプルを示していますが、JavaScriptのロジックがわかりやすいようにjQueryも一緒に読み込んでいます。CodePen.サンプルでは、テンプレートに対してJavaScriptで定義したデータオブジェクト渡しているだけですが、他にも以下のことが行なえます。[読み物][日本語]NunjucksNunjucksはmozilla謹製テンプレートライブラリです。先程のHandlebarsの時と同じものをNunjucksで作ってみました。%``%}で囲むなど、表現が多少違います。今回はjQueryを使用せずに素のJavaScriptで記述しています。最後にES6のテンプレート文字列です。ES6で追加された機能なので、上記2つの様にライブラリを読み込む必要はありませんが、ブラウザ対応状況を確認する必要があります。useを確認すると、よく使用されるブラウザは大体テンプレート文字列に対応しているようです。インターネットエクスプローラには対応していないので、IEをサポートする予定があるならば、HandlebarsかNunjucksを使いましょう。2019年12月月19日午後3時58分PSTもじゃげくらぶQooQ。