Express – テンプレートエンジンPugを使用する

投稿日: by keruu

Node.js + ExpressでテンプレートエンジンのPugを使用する方法です

1.インストール

Pugはnpmでインストールします

$ npm install pug

2. ビューエンジンの設定

app.jsでPugを使用してみます。まず app.set で view engine を Pugに設定します。

@app.js

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

3. テンプレートファイルの記法

Pugは次のような感じでテンプレートを作ります。タグ名をインデントすると入れ子になります。#{変数名} は文字列と変数を組み合わせたいときに使用します。タグ名= は変数で値を可変したいときに使います。

タグ名
  タグ名 文字列 #{変数名}
  タグ名= 変数名

例えば次のようになります。titleとcontentは変数です。

section
  h1 目次1 #{title}
  p= content

これをHTMLとして変換すると次のようになります。titleは’テスト’、contentは’Hello’として与えます。

<section>
  <h1>目次1 テスト</h1>
  <p>Hello</p>
</section>

4. テンプレートファイルの作成

Node.jsプロジェクトの直下に views フォルダを作成してそこにindex.pug を作成します。

@views/index.pug

html
  head
    title My name is #{name}
  body
    h1= content

5. テンプレートファイルを使う

app.js でテンプレートをファイルを使うには response.render を使います。第一引数にテンプレートファイルを拡張子なしで指定し、第二引数にテンプレートに渡す変数を指定します。

@app.js

app.get('/', (req, res) => {
  res.render('index', {
    'name': 'jon',
    'content': 'Hello World'
  });
});

以上です。

express Node.js