EJSテンプレートエンジンを使おう! (2/5)
作成:2013-04-20 10:17
更新:2013-04-20 10:17
更新:2013-04-20 10:17
■テンプレートで使える特殊なタグ
EJSでは、テンプレートとなるHTMLのコード内に、特殊なタグを使って必要な情報を埋め込むことができます。用意されているタグは以下の2つです。
これらのタグは、閉じる部分はすべて共通して%>となっていますが、これを-%>というように半角マイナスをつけて記述すると、値の出力後、改行するようになります。
実際にこれらのタグをどう使いこなすかは、やってみないとわかりませんね。では、簡単なサンプルを作ってみましょう。下にリストを掲載しておきます。これを「hello.ejs」というファイル名で、Node.jsのスクリプトファイルと同じ場所に保存してください。
これが、EJSのテンプレートファイルです。テンプレートファイルは、通常、「.ejs」という拡張子で作成します。ここでは、HTMLの中に以下のようなタグを埋め込んであります。
<%= 値 %>
記述した値をその場に書き出します。スクリプト側で用意した変数などを表示するのに使います。HTMLタグなどが含まれていた場合、それらはエスケープ処理されます。<%- 値 %>
同じように値をその場に書き出します。ただし、こちらはHTML関連のタグはエスケープ処理されず、そのまま書きだされます。<% スクリプト %>
スクリプトを記述し、それをレンダリングする際に実行します。これは、HTMLに<script>タグで書かれているスクリプトとは違います。<script>タグはクライアント側(ブラウザ内)に送られ、そこで実行されますが、この<% %>で書かれたタグはサーバー側(Node.js内)で実行され、その結果がクライアントへと送られます。これらのタグは、閉じる部分はすべて共通して%>となっていますが、これを-%>というように半角マイナスをつけて記述すると、値の出力後、改行するようになります。
実際にこれらのタグをどう使いこなすかは、やってみないとわかりませんね。では、簡単なサンプルを作ってみましょう。下にリストを掲載しておきます。これを「hello.ejs」というファイル名で、Node.jsのスクリプトファイルと同じ場所に保存してください。
これが、EJSのテンプレートファイルです。テンプレートファイルは、通常、「.ejs」という拡張子で作成します。ここでは、HTMLの中に以下のようなタグを埋め込んであります。
<%=title %>これらは、それぞれtitle、contentという変数を出力していることになります。ということは、スクリプト側で、これらの変数を用意し、テンプレート側に渡すことができればいいわけですね。<%= %>と<%- %>は、テンプレートのもっとも基本となるものといってよいでしょう。(なお、contentの出力は<%=ではなく、<%-を使っています。これは、もう少し後になって理由がわかります)
<%-content %>
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。
●プログラム・リスト●
<!DOCTYPE html> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title><%=title %></title> <style> body { font-size:12pt; color:#006666; } h1 { font-size:18pt; background-color:#AAFFFF; } pre { background-color:#EEEEEE; } </style> </head> <body> <header> <h1 id="h1"><%=title %></h1> </header> <div role="main"> <p><%-content %></p> </div> </body> </html>
※関連コンテンツ