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

テンプレートの基本的な使い方はこれでわかりました。が、これだけではテンプレートとしての機能は十分ではありませんね。ページを表示するのに、テンプレートをレンダリングして書き出す。これだけです。

例えば、いくつものページが有るサイトでは、全体の構成を記したテンプレートを用意し、ここに必要に応じてコンテンツ用のテンプレートをはめ込んで表示させたりします（このlibroもそのような形で作られています）。こうした「全体のテンプレート内に、コンテンツのテンプレートを嵌めこみ表示する」といったことは行えるのでしょうか。やってみましょう。

ベースとなるテンプレートには、先ほど作成したhello.ejsをそのまま使うことにします。このテンプレートでは、コンテンツを表示する部分に<%- content %>というタグを用意しておきました。ということは、実際に表示する内容のテンプレートを用意しておき、それをここにはめ込んで出力すれば、コンテンツだけをいろいろと変更してページを作れるようになります。

では、コンテンツ用のテンプレートとして、「content1.ejs」というファイルを作成しましょう。内容は下のリスト欄に掲載しておきます。作成後、Node.jsのスクリプトファイルと同じ場所に廃しておいてください。

このファイルでは、コンテンツとして表示する内容をHTMLで記述してあります。また、<%= message %>というようにテンプレート用のタグも用意しておきました。

このcontent1.ejsを、先ほどのhello.ejsの<%- content %>にはめ込んで表示させてみます。スクリプトを下に掲載しておきましたので書き換えて試してみてください。ここでは、以下の手順で表示を作成しています。

1. サーバーを作成する前に、あらかじめ２つのテンプレートを変数に読み込んでおく。

2. まず、コンテンツ用のテンプレート（content1.ejs）をrenderでレンダリングする。

3. ページ全体のテンプレート（hello.ejs）をrenderでレンダリングする。この際、content1.ejsをレンダリングしたデータをオプションの値として渡す。

4. レンダリングされたデータを書き出す。

複数のテンプレートを組み合わせて使う場合の基本は、「中にあるものを先にレンダリングし、その結果をオプションに指定して外側のレンダリングを行う」ということです。

あるテンプレート内に別のテンプレートをはめ込む場合、「レンダリング済み」のデータを嵌めこむのが基本です。はめ込んだ後でレンダリングすれば……と思っていると、はめ込んだテンプレート内のタグがレンダリングされずに表示されてしまったりするので気をつけてください。

(by. SYODA-Tuyano.)

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

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

※content1.ejsの内容

<p>※サンプルで作ったコンテンツです。</p>
<p>別ファイルとして用意したものを読み込んで使います。</p>
<p><%= message %></p>


※sampleapp.jsのスクリプト

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

var hello = fs.readFileSync('./hello.ejs', 'utf8');
var content1 = fs.readFileSync('./content1.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: ejs.render(content1,{
            message:"テストメッセージ"
        })
    });
    res.writeHead(200, {'Content-Type': 'text/html'});
    res.write(hello2);
    res.end();
}