テンプレートエンジンを使用すると、アプリケーションで静的なテンプレートファイルを使用できます。実行時に、テンプレートエンジンはテンプレートファイル内の変数を実際の値に置き換え、テンプレートをクライアントに送信されるHTMLファイルに変換します。このアプローチにより、HTMLページのデザインが容易になります。
Expressで動作する一般的なテンプレートエンジンには、Pug、Mustache、EJSなどがあります。Expressアプリケーションジェネレーターは、デフォルトとしてJadeを使用しますが、他のいくつかのエンジンもサポートしています。
Expressで使用できるテンプレートエンジンの一覧については、テンプレートエンジン(Express wiki)を参照してください。また、JavaScriptテンプレートエンジンの比較:Jade、Mustache、Dustなども参照してください。
注意:JadeはPugに名称変更されました。アプリでJadeを使い続けることもでき、問題なく動作します。ただし、テンプレートエンジンの最新のアップデートを入手するには、アプリでJadeをPugに置き換える必要があります。
テンプレートファイルをレンダリングするには、以下のアプリケーション設定プロパティを設定します。これはジェネレーターによって作成されたデフォルトのアプリのapp.js
に設定されています。
views
:テンプレートファイルが置かれているディレクトリ。例:app.set('views', './views')
。これはデフォルトではアプリケーションのルートディレクトリにあるviews
ディレクトリになります。view engine
:使用するテンプレートエンジン。たとえば、Pugテンプレートエンジンを使用するには、app.set('view engine', 'pug')
のようにします。次に、対応するテンプレートエンジンのnpmパッケージをインストールします。たとえば、Pugをインストールするには、
$ npm install pug --save
JadeやPugなどのExpress互換のテンプレートエンジンは、res.render()
関数がテンプレートコードをレンダリングするために呼び出す__express(filePath, options, callback)
という名前の関数をエクスポートします。
一部のテンプレートエンジンは、この規約に従っていません。Consolidate.jsライブラリは、すべての一般的なNode.jsテンプレートエンジンをマッピングすることで、この規約に従っており、Express内でシームレスに動作します。
ビューエンジンが設定されたら、アプリでエンジンを指定したり、テンプレートエンジンモジュールをロードしたりする必要はありません。Expressは、以下に示すように(上記の例の場合)、内部的にモジュールをロードします。
app.set('view engine', 'pug')
views
ディレクトリにindex.pug
という名前のPugテンプレートファイルを作成し、次の内容にします。
html
head
title= title
body
h1= message
次に、index.pug
ファイルをレンダリングするルートを作成します。view engine
プロパティが設定されていない場合は、view
ファイルの拡張子を指定する必要があります。それ以外の場合は、省略できます。
app.get('/', (req, res) => {
res.render('index', { title: 'Hey', message: 'Hello there!' })
})
ホームページにリクエストを送信すると、index.pug
ファイルがHTMLとしてレンダリングされます。
注意:ビューエンジンキャッシュは、テンプレートの出力の内容ではなく、基になるテンプレート自体のみをキャッシュします。キャッシュがオンの場合でも、ビューはリクエストごとに再レンダリングされます。
Expressでのテンプレートエンジンの動作の詳細については、「Expressのテンプレートエンジンの開発」を参照してください。