次の試みへの下準備回です。
Expressのview engine を JavaScriptにしてみます。
言い換えるとJavaScriptの実行結果として得たHTML文字列をExpressでレンダリングするように設定します。
ファイル構成
以下のファイルを今回は同一フォルダに置くことにします。
- index.html.js
- app.js
テンプレート index.html.js
index.html.js
module.exports = function(){
return "<html><head></head><body>AAA</body></html>"
}
はい。見たまんまですね。簡単なHTMLを返す関数をモジュールとしてエクスポートしています。このようにrequire可能なモジュール関数としてテンプレートを定義します。今回はとりあえず直書きのHTMLを返しますが、もっと高度なJavaScriptも記述できるでしょう。
Expressの設定 app.js
app.js
var express = require('express');
var app = express();
app.set('views',".");//viewディレクトリを今回はカレントに設定
app.set('view engine', 'html.js');//テンプレートの拡張子を今回はhtml.jsに設定
//今回の本題
//view engine に javascriptを設定
app.engine('html.js', function(path, options, fn){
try{
var js = require(path);
var html = js(options);
fn(null, html);
}catch(err){
fn(err);
}
});
app.get('/index', function(req, res){
res.render('index');
});
app.listen(process.env.PORT);
先に全体を示しましたが重要なのはここです。
app.engine('html.js', function(path, options, fn){
try{
var js = require(path);
var html = js(options);
fn(null, html);
}catch(err){
fn(err);
}
});
エンジンには関数を設定します。形式は
function(path, options, fn)
です。optionsにはres.render(name, options)で渡したオプションが入ります。
成功した場合はfn(null, html)を呼び出し、失敗した場合はfn(err)を呼び出すそうです。
正直try-catchなくても、外部でちゃんとキャッチしてるらしく動作あまりかわらないんですけど一応書いてます。
今回は関数を返すモジュールをrequireして実行、htmlを取得する形式をとっています。この辺りはお好みでカスタマイズできると思います。
これでとりあえずJavaScriptをテンプレートエンジンに設定することができました。/indexにアクセスすればindex.html.jsのJavascriptが実行され、その結果がレンダリングされます。
次回はこれを基礎に自作のJSテンプレートエンジンでも作ろうかと思います。