<% %>
EJS内でjavascriptのコードを記入する
index.ejs
<% const print = "出力はされません" %>
index.html
出力なし
<%= %>
html内で変数などの出力を行う(文字列)
index.ejs
<% const print = "出力します" %>
<p class="print"><%= print %></p>
index.html
<p class="print">出力します</p>
<%- %>
html内で変数などの出力を行う(HTML用)
inedx.ejs
<% const print = "出力します" %>
<p class="print"><%- print %></p>
index.html
<p class="print">出力します</p>
<%- %>
と<%= %>
の違い
htmlの要素として出力したいか、文字として出力したいかで使い分ける
→基本的には<%= %>
で、子要素の出力を一緒に使いたいときには<%- %>
を使用する
index.ejs
<% const print = "<span>出力します</span>" %>
<p class="print_single"><%- print %></p>
<p class="print_double"><%= print %></p>
index.html
<p class="print_single"><span>出力します</span></p>
<p class="print_double"><span>出力します</span></p>
<%# %>
EJS内だけでコメントアウトを使いたいときに記入する
index.ejs
<%# const print = "<span>はされません</span>" %>
<p class="print_html"><%# print %></p>
<!-- <p class="comment_html"><%# print %></p> -->
<!-- <p class="comment">これはhtmlに表示されます</p> -->
index.html
<p class="print_html"></p>
<!-- <p class="comment_html"></p> -->
<!-- <p class="comment">これはhtmlに表示されます</p> -->
※注意
<!-- <%= const print = "<span>出力します</span>" %> -->
<!-- <p class="print"><%= print %></p> -->
などEJSでコメントアウトしないまま<!-- -->
でコメントするとEJSでエラーになってしまいます。
include()
別のEJSファイルを読み込むときに記入する
第一引数に読み込むEJSファイルのディレクトリ(相対パス)
第二引数に渡すパラーメータを記述する
index.ejs
<%
var localmeta = {
title: 'サイトタイトルです',
desc: 'ここでサイト説明文を記入します'
};
%>
<%- include('include/_head', {meta: localmeta}) %>
※includeを行うときには拡張子(.ejs)を省略できる
include/_head.ejs
<head>
<title><%= meta.title %> | EJS-sample</title>
<meta name="description" content="<%= meta.desc %>">
</head>
index.html
<head>
<title>サイトタイトルです | EJS-sample</title>
<meta name="description" content="ここでサイト説明文を記入します。">
</head>
for
html上で繰り返し処理を行いたい時に記入する
index.ejs
<ul>
<% for (var i = 0; i < 5; i++) { %>
<li class="item<%= i+1 %>"><%= i+1 %>つ目の要素です</li>
<% } %>
</ul>
index.html
<ul>
<li class="item1">1つ目の要素です</li>
<li class="item2">2つ目の要素です</li>
<li class="item3">3つ目の要素です</li>
<li class="item4">4つ目の要素です</li>
<li class="item5">5つ目の要素です</li>
</ul>
while
html上で繰り返し処理を行いたい時に記入する
index.ejs
<ul>
<% var count = 1; %>
<% while (count <= 10) { %>
<li class="loop<%= count %>"><%= count %>回目の処理です。</li>
<% count++; %>
<% } %>
</ul>
index.html
<ul>
<li class="loop1">1回目の処理です。</li>
<li class="loop2">2回目の処理です。</li>
<li class="loop3">3回目の処理です。</li>
<li class="loop4">4回目の処理です。</li>
<li class="loop5">5回目の処理です。</li>
<li class="loop6">6回目の処理です。</li>
<li class="loop7">7回目の処理です。</li>
<li class="loop8">8回目の処理です。</li>
<li class="loop9">9回目の処理です。</li>
<li class="loop10">10回目の処理です。</li>
</ul>
foreach
配列の中身を使ってhtmlに表示したいときに使う
index.ejs
<ul>
<% const array = ['ハンバーガー', 'カレー', 'パスタ', 'ラーメン', 'チャーハン']; %>
<% array.forEach(function (value) { %>
<li><%= value %></li>
<% }); %>
</ul>
index.html
<ul>
<li>ハンバーガー</li>
<li>カレー</li>
<li>パスタ</li>
<li>ラーメン</li>
<li>チャーハン</li>
</ul>
if
HTMLで条件の分岐を使いたいときに記入する
index.ejs
<%
var page_id = {
id: '02'
}
%>
<%- include('include/_if', {page: page_id}) %>
include/_if.ejs
<% if (page.id == '01') { %>
<p id="page01">こちらはページ1になります。</p>
<% } else if (page.id == '02') { %>
<p id="page02">こちらはページ2になります。</p>
<% } else { %>
<p>その他ページです。</p>
<% } %>
index.html
<p id="page02">こちらはページ2になります。</p>