Expressテンプレートエンジンについて

過去にExpress.jsフレームワークを使用したことがある場合は、Expressがサーバー側のテンプレートエンジンを処理できることをご存知でしょう。 HTMLページにさまざまな情報やデータをビューに直接入力できます。これにより、HTMLを動的に生成できます。

この記事では、Express用の3つの人気のあるテンプレートエンジンであるPug、EJS、Mustacheを紹介します。

Expressについて詳しく知りたい場合は、このリンクをたどってください。

どのテンプレートエンジンを使用する必要がありますか？

Expressで動作するさまざまなテンプレートエンジンがあります。 ExpressにあるデフォルトのテンプレートエンジンはJadeで、現在はPugとして知られています。ただし、ExpressにインストールされているデフォルトのJadeは、引き続き古いバージョンを使用しています。

この内訳では、Pug、EJS、およびMustacheの基本的な構文と使用法を紹介します。

パグの使い方

Pug をインストールしてExpressアプリで使用するには、最初にnpmを使用してインストールする必要があります。

$ npm install pug

次に、アプリを初期化するときにビューエンジンをpugに設定し、get呼び出しを行って、ビューをレンダリングします。

const express = require('express');
const app = express();
app.set('view engine', 'pug');

app.get('/home', (req, res) => {
  res.render('home');
});

Expressアプリでこれを行ったので、viewsディレクトリにviews/home.pugとしてテンプレートを追加し、次のように入力できます。

h2 This is the home page
p It's a test view

そのビューは、テキスト「これはホームページです」をラップするh2タグと、テキスト「これはテストビューです」をラップするpタグを使用してHTMLテンプレートを作成することになります。

Expressアプリケーションからhomeビューにデータを渡したい場合は、次のように変数をレンダリングできます。

app.get('/home', (req, res) => {
  res.render('home', { animal: 'Alligator' });
});

次に、viewは次のようになります。

h2 This is the #{animal} home page
p It's a test view

次に、h2タグが「これはワニのホームページです」というテキストを囲みます。それを超えて、あなたはあなたが適当と思うようにあなた自身のパグファイルを実験して構築することができます！

EJSの使い方

Pugの紹介が終わったので、EJSを試してみましょう。

$ npm install ejs

EJSをインストールしたら、Expressアプリに呼び出すことができます。

const express = require('express');
const app = express();
app.set('view engine', 'ejs');

app.get('/home', (req, res) => {
  res.render('home');
});

ビューエンジンをejsに変更したので、views/home.ejsの下のviewsディレクトリにテンプレートを作成できます。 EJSは、テンプレートに通常のHTMLを使用します。

<h2>This is the home page</h2>
<p>It's a test view</p>

ここで、HTMLページに動物のリストを追加するとします。 Expressアプリケーションを介して一連の動物をEJSテンプレートに渡すことができます。

app.get('/home', (req, res) => {
  let animals = [
    { name: 'Alligator' },
    { name: 'Crocodile' }
  ];
  res.render('home', { animals: animals });
});

views/home.ejsファイルでは、.forEachを使用してデータをループできます。

<h2>This is the home page</h2>
<p>It's a test view</p>
<ul>
  <% animals.forEach((animal) => { %>
  <li><%= animal.name %></li>
  <% }); %>
</ul>

このコードを使用して、animals配列に対して.forEachループを実行し、liタグ内に各動物の名前を出力します。そして、それがすべてです！ EJSテンプレートでJavaScriptを直接呼び出して、好きなように使用できます。

口ひげの使い方

最後のテンプレートエンジンでは、MustacheをインストールしてExpressアプリケーションで使用する方法について説明します。

$ npm i mustache-express

次に、Expressアプリケーションでビューエンジンを設定できます。

const express = require('express');
const mustacheExpress = require('mustache-express');
const app = express();
app.engine('mustache', mustacheExpress());
app.set('view engine', 'mustache');

app.get('/home', (req, res) => {
  res.render('home');
});

口ひげのファイル拡張子は次のようになります：views/home.mustache：

<h2>This is the home page</h2>
<p>It's a test view</p>

また、Expressアプリケーションのデータをテンプレートに表示するには、データをルートに渡します。

app.get('/home', (req, res) => {
  res.render('home', { animal: 'Alligator' });
});

次に、mustacheテンプレート内で、変数を直接呼び出すことができます。

<h2>This is the {{ animal }} home page</h2>
<p>It's a test view</p>

次に、.mustacheファイルのanimalに「ワニ」と表示されます。 Mustacheの使用方法の詳細については、こちらのページをご覧ください。

シンプルで効率的

Expressのテンプレートエンジンは、アプリケーションで静的テンプレートファイルを提供するための優れた方法です。テンプレートを介してデータを簡単に表示できる柔軟性があります。次回Expressプロジェクトを作成するときは、これらのテンプレートエンジンを確認して、試してみてください。