Expressでテンプレートエンジンを使う

テンプレートエンジンを使用すると、アプリケーションで静的なテンプレートファイルを使用できます。実行時に、テンプレートエンジンはテンプレートファイル内の変数を実際の値に置き換え、テンプレートをクライアントに送信されるHTMLファイルに変換します。このアプローチにより、HTMLページのデザインが容易になります。

Expressで動作する一般的なテンプレートエンジンには、PugMustacheEJSなどがあります。Expressアプリケーションジェネレーターは、デフォルトとしてJadeを使用しますが、他のいくつかのエンジンもサポートしています。

Expressで使用できるテンプレートエンジンの一覧については、テンプレートエンジン(Express wiki)を参照してください。また、JavaScriptテンプレートエンジンの比較:Jade、Mustache、Dustなども参照してください。

注意:JadeはPugに名称変更されました。アプリでJadeを使い続けることもでき、問題なく動作します。ただし、テンプレートエンジンの最新のアップデートを入手するには、アプリでJadeをPugに置き換える必要があります。

テンプレートファイルをレンダリングするには、以下のアプリケーション設定プロパティを設定します。これはジェネレーターによって作成されたデフォルトのアプリのapp.jsに設定されています。

次に、対応するテンプレートエンジンの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のテンプレートエンジンの開発」を参照してください。