StrongLoop / IBMによって提供されるこの翻訳.

本書は、英語の資料と比較すると古くなっている可能性があります。最新の更新については、英語版の資料を参照してください。

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

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 用のテンプレート・エンジンの開発を参照してください。