テンプレートエンジン を使用すると、アプリケーションで静的なテンプレートファイルを使用できます。実行時に、テンプレートエンジンはテンプレートファイルの変数を実際の値に置き換え、テンプレートをクライアントに送信する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
Pug などの Express 対応テンプレート・エンジンは、__express(filePath, options, callback)
という関数をエクスポートします。この関数は、テンプレート・コードをレンダリングするために res.render()
関数によって呼び出されます。
一部のテンプレート・エンジンは、この規則に従いません。Consolidate.js ライブラリーは、すべての一般的な Node.js テンプレート・エンジンをマップすることで、この規則に従います。そのため、Express 内でシームレスに動作します。
ビュー・エンジンが設定された後は、アプリケーションでエンジンを指定したり、テンプレート・エンジンをロードしたりする必要はありません。(上記の例に対応した) 下記のように、Express がモジュールを内部的にロードします。
app.set('view engine', 'pug')
以下の内容で index.pug
という Pug テンプレート・ファイルを views
ディレクトリーに作成します。
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 としてレンダリングされます。
注:view engine のキャッシュは、テンプレートの出力内容をキャッシュしません。基本となるテンプレート自体だけです。このビューは、キャッシュがオンの場合でも、すべてのリクエストで再レンダリングされます。
Express でのテンプレート・エンジンの動作について詳しくは、Express 用のテンプレート・エンジンの開発を参照してください。