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

投稿日: 2022-04-20 2022-10-09
タグ: Node.js

過去に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

そのビューは、最終的にHTMLテンプレートを作成します。 h2 テキストを折り返すタグ「これはホームページです」、および p 「これはテストビューです」というテキストをラップするタグ。

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 下のディレクトリ views/home.ejs. 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>

このコードを使用すると、 .forEach ループオーバー animals 配列し、各動物の名前を内に出力します 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>

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

シンプルで効率的

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

getdocs

13036