EJSテンプレートエンジンを使おう！ (3/5)

では、用意したテンプレートファイルを読み込んでWebページを表示させてみましょう。これには、いくつかの操作が必要となります。

1. ファイルの読み込み。EJS自体にはファイルを読み込む機能はありません。読み込みは、fsオブジェクトを利用することになります。（ただし、今回は非同期ではなく、同期メソッドを使って前回のreadFileよりシンプルなスクリプトにします）

2. 読み込んだテンプレートデータのレンダリング。これにより、テンプレート内にある<%= %>タグなどの特殊なタグが実際に出力されるテキストに変換されます。

3. 作成されたデータをレスポンスに書き出して完了です。

要するに、EJSというテンプレートエンジンが行なってくれるのは、2のレンダリング部分だけで、後は普通にNode.jsの機能を使って処理する必要がある、というわけですね。

では、先ほど作成したhello.ejsをレンダリングして表示するスクリプトを作成してみましょう。下にサンプルを掲載しておきますので、これを記述して動かしてみてください。タイトルやコンテンツの部分には、スクリプト側で用意しておいたテキストが嵌めこまれ表示されることがわかるでしょう。動作を確認したら、スクリプトのポイントをチェックしましょう。

●ejsの読み込み

var ejs = require('ejs');

最初にEJSのライブラリを読み込みます。これはrequire関数で「ejs」を引数に指定します。ここで取得されたejsオブジェクトを使ってテンプレートのレンダリングなどを行います。

●同期メソッドによるファイルの読み込み

var hello = fs.readFileSync('./hello.ejs', 'utf8');

fsオブジェクトを使い、テンプレートファイルを読み込みます。ここではreadFileではなく、「readFileSync」というメソッドを使っています。基本的にはreadFileと同じですが、非同期ではなく、同期処理で読み込みます。つまり、このメソッドを呼び出すとファイルの読み込みを行い、それが完了してから次に進む、というわけです。

同期処理ですから、読み込み終わったら呼び出す「コールバック関数」はありません。終わったらそのまま続きのスクリプトを実行するのですからコールバックなんて必要ないですね。

「だけど、ファイルの読み込みは時間がかかることもあるから非同期にしないと他の処理が止まってしまうって……」と思った人。その通り、readFileSync実行中は他の処理があったとしても停止中です。が、これを呼び出している場所をよく見てください。http.createServerでサーバーを作る前にファイルの読み込みを済ませているのがわかるでしょう？

テンプレートというのは、リクエストがある度に使うわけで、なら最初からグローバル変数に読み込んでおいて利用したほうが絶対に楽ちんですから。

●テンプレートをレンダリングする

var hello2 = ejs.render(hello, {
    title:"タイトルです",
    content:"これはサンプルで作成したテンプレートです。",
});

テンプレートのレンダリングを行うのが、ejsオブジェクトの「render」メソッドです。これは、整理すると以下のようになります。

ejs.render( テンプレートデータ , オプション );

第１引数――レンダリングする対象データ（＝読み込んだテンプレートの文字列）を指定します。
第２引数――テンプレートに渡す変数などの情報を連想配列にまとめたものを指定します。

ポイントは第２引数です。先ほど、テンプレートにtitleとcontentという変数を出力するようにタグを用意したのを思い出してください。これらの変数が連想配列に用意されていることがわかるでしょう。このように、第２引数に変数などの値を用意してrenderすることで、テンプレート側にあるそれらの変数に値が代入されるのです。

●ヘッダー情報にCintent-Type:text/hemlを設定する

res.writeHead(200, {'Content-Type': 'text/html'});

最後に忘れてはいけないのが、writeHeadによるヘッダーの出力です。Content-Typeに「text/html」を設定します。これにより、レスポンスに書き出される内容がHTMLであることがわかります。

(by. SYODA-Tuyano.)

※リストが表示されない場合

AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。

var http = require('http');
var fs = require('fs');
var ejs = require('ejs');

var hello = fs.readFileSync('./hello.ejs', 'utf8');

var server = http.createServer();
server.on('request', doRequest);
server.listen(1234);
console.log('Server running!');

// リクエストの処理
function doRequest(req, res) {
    var hello2 = ejs.render(hello, {
        title:"タイトルです",
        content:"これはサンプルで作成したテンプレートです。",
    });
    res.writeHead(200, {'Content-Type': 'text/html'});
    res.write(hello2);
    res.end();
}