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

EJSのテンプレートでは、<% %>タグを使ってJavaScriptのスクリプトを実行させることができます。これは、レンダリング時に実行される（つまりサーバー内で実行される）ため、ブラウザに実際に表示されるページには現れません。スクリプトの実行結果が表示されるのみです。

この<% %>によるスクリプトを作成する場合、注意すべき点がいくつかあります。まとめておきましょう。

1. <% %>内では、何かを書き出して表示することはできません。その場合は一度タグを抜け、<%= %>タグなどで値を出力する必要があります。<% %>タグの中で<%= %>タグを使うことはできません。

2. JavaScriptのスクリプトですが、一般的なJavaScriptの機能には利用できないものもあります。例えば、DateやMathなどのオブジェクトは使えますが、alertのようなブラウザ依存機能は使えません。またdocumentなどDOMを操作する機能も使えません。

3. スクリプトからレンダリング時に渡される変数などの値は、そのまま<% %>内で変数として使うことができます。

では、実際に簡単なサンプルを作ってみましょう。まず、content1.ejsの内容を下のリスト欄のように書換えてみてください。ここでは、dataの内容を取り出して表示させる処理を<% %>利用で作成しています。

続いて、Node.jsのスクリプトを、下のリスト欄にあげたように修正します。そして実際にアクセスしてみましょう。配列に用意したデータがリストとして表示されます。

ここでは、renderメソッドの引数に「data」という値を用意しています。これは、見ればわかるようにテキストの配列が設定されています。この配列の値を順に取り出して表示しよう、というわけです。出力されている部分を見ると、

<% data.forEach(function(val){ %>
    <li><%= val %></li>
<% }) %>

このようになっていますね。<% %>タグを使い、繰り返し処理を記述しています。「forEach」という見慣れないメソッドが使われていますが、これは配列（Arrayオブジェクト）にあるメソッドで、配列から要素を順に取り出して引数の関数を実行するものです。取り出された値は、引数の関数に引数として渡されます。働きがよくわからない人は、以下のように書換えて考えると良いでしょう。

<% for (var i = 0;i < data.length;i++){ %>
    <li><%= data[i] %></li>
<% } %>

構文内の、値を書き出す部分は<%= %>タグになっています。<% %>を使うときには、このように「処理部分だけを<% %>内に書き、出力は<%= %>に書く」というように、処理と出力をきちんと切り分けて考える必要がある、ということを忘れないようにしましょう。

(by. SYODA-Tuyano.)

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

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

※content1.ejsの内容

<p>※サンプルで作ったコンテンツです。</p>
<p>配列データを渡してリストにして表示します。</p>
<p><ol>
<% data.forEach(function(val){ %>
    <li><%= val %></li>
<% }) %>
</ol></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, {
            data: [
                "これは最初のデータです。",
                "次のデータだよ。",
                "一番最後のデータなのだ。"
            ]
        })
    });
    res.writeHead(200, {'Content-Type': 'text/html'});
    res.write(hello2);
    res.end();
}