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){ %>このようになっていますね。<% %>タグを使い、繰り返し処理を記述しています。「forEach」という見慣れないメソッドが使われていますが、これは配列(Arrayオブジェクト)にあるメソッドで、配列から要素を順に取り出して引数の関数を実行するものです。取り出された値は、引数の関数に引数として渡されます。働きがよくわからない人は、以下のように書換えて考えると良いでしょう。
<li><%= val %></li>
<% }) %>
<% 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(); }
※関連コンテンツ