EJSテンプレートエンジンを使おう! (5/5)
作成:2013-04-20 10:29
更新:2013-04-20 10:29
更新:2013-04-20 10:29
■配列データを繰り返し出力する
EJSのテンプレートでは、<% %>タグを使ってJavaScriptのスクリプトを実行させることができます。これは、レンダリング時に実行される(つまりサーバー内で実行される)ため、ブラウザに実際に表示されるページには現れません。スクリプトの実行結果が表示されるのみです。
この<% %>によるスクリプトを作成する場合、注意すべき点がいくつかあります。まとめておきましょう。
1. <% %>内では、何かを書き出して表示することはできません。その場合は一度タグを抜け、<%= %>タグなどで値を出力する必要があります。<% %>タグの中で<%= %>タグを使うことはできません。
2. JavaScriptのスクリプトですが、一般的なJavaScriptの機能には利用できないものもあります。例えば、DateやMathなどのオブジェクトは使えますが、alertのようなブラウザ依存機能は使えません。またdocumentなどDOMを操作する機能も使えません。
3. スクリプトからレンダリング時に渡される変数などの値は、そのまま<% %>内で変数として使うことができます。
では、実際に簡単なサンプルを作ってみましょう。まず、content1.ejsの内容を下のリスト欄のように書換えてみてください。ここでは、dataの内容を取り出して表示させる処理を<% %>利用で作成しています。
続いて、Node.jsのスクリプトを、下のリスト欄にあげたように修正します。そして実際にアクセスしてみましょう。配列に用意したデータがリストとして表示されます。
ここでは、renderメソッドの引数に「data」という値を用意しています。これは、見ればわかるようにテキストの配列が設定されています。この配列の値を順に取り出して表示しよう、というわけです。出力されている部分を見ると、
この<% %>によるスクリプトを作成する場合、注意すべき点がいくつかあります。まとめておきましょう。
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();
}
※関連コンテンツ