libro
www.tuyano.com
初心者のための Node.jsプログラミング入門

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

作成:2013-04-20 10:17
更新:2013-04-20 10:17

■テンプレートで使える特殊なタグ

EJSでは、テンプレートとなるHTMLのコード内に、特殊なタグを使って必要な情報を埋め込むことができます。用意されているタグは以下の2つです。

<%= 値 %>
記述した値をその場に書き出します。スクリプト側で用意した変数などを表示するのに使います。HTMLタグなどが含まれていた場合、それらはエスケープ処理されます。

<%- 値 %>
同じように値をその場に書き出します。ただし、こちらはHTML関連のタグはエスケープ処理されず、そのまま書きだされます。

<% スクリプト %>
スクリプトを記述し、それをレンダリングする際に実行します。これは、HTMLに<script>タグで書かれているスクリプトとは違います。<script>タグはクライアント側(ブラウザ内)に送られ、そこで実行されますが、この<% %>で書かれたタグはサーバー側(Node.js内)で実行され、その結果がクライアントへと送られます。

これらのタグは、閉じる部分はすべて共通して%>となっていますが、これを-%>というように半角マイナスをつけて記述すると、値の出力後、改行するようになります。

実際にこれらのタグをどう使いこなすかは、やってみないとわかりませんね。では、簡単なサンプルを作ってみましょう。下にリストを掲載しておきます。これを「hello.ejs」というファイル名で、Node.jsのスクリプトファイルと同じ場所に保存してください。

これが、EJSのテンプレートファイルです。テンプレートファイルは、通常、「.ejs」という拡張子で作成します。ここでは、HTMLの中に以下のようなタグを埋め込んであります。
<%=title %>
<%-content %>
これらは、それぞれtitlecontentという変数を出力していることになります。ということは、スクリプト側で、これらの変数を用意し、テンプレート側に渡すことができればいいわけですね。<%= %><%- %>は、テンプレートのもっとも基本となるものといってよいでしょう。(なお、contentの出力は<%=ではなく、<%-を使っています。これは、もう少し後になって理由がわかります)

※プログラムリストが表示されない場合

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>
※関連コンテンツ

「初心者のための Node.jsプログラミング入門」に戻る