過去記事でも一部触れた箇所がありますが、EJSで使用できる構文をまとめます
あわせて読みたい
EJSにおけるmeta情報の設定方法
僕は静的ページコーディングの際はejsを使用しています。 ejsでファイルを分割することでWordPressのようにheaderとfooterを共有でどのページでも呼び出せるようになり...
この記事の目次
EJSで何ができるか
- 変数・配列が使える
- 繰り返し処理
- 条件分岐
- 外部ファイルを読み込みできる。また値を渡すこともできる
<% %>
<% %>内でJavaScriptを書くことができる
<% var hoge = 'i am hoge'; %><%= %>, <%- %>
-と=の違いは変数の値をエスケープするかしないかの違い
<% const hoge01 = '<span>i am hoge</span>'; %>
<!-- エスケープしない -->
<p><%- hoge01 %></p>
<!-- エスケープする -->
<p><%= hoge01 %></p><!-- エスケープしない -->
<p>
<span>i am hoge</span>
</p>
<!-- エスケープする -->
<p><span>i am hoge</span></p><%# %>
EJSでコメントアウトしたいときに使用する
<%# const hoge01 = '<span>i am hoge</span>'; %>include()
別にファイルを読み込むことができます
第一引数に読み込むファイルの相対パス、拡張子.ejsは省略可
第二引数で渡す値を指定することが出来ます
<% const indexMeta = { //meta情報
title: 'トップページのタイトル',
description: 'トップページのディスクリプション',
keywords: 'hoge, huga, huga',
};
%>
<%- include('./common/_head', { meta: indexMeta } ) %><head>
<!-- meta情報 -->
<title><%= meta.title %></title>
<meta name="description" content="<%= meta.description %>" />
<meta name="keywords" content="<%= meta.keywords %>" />
</head><head>
<!-- meta情報 -->
<title>トップページのタイトル</title>
<meta name="description" content="トップページのディスクリプション" />
<meta name="keywords" content="hoge, huga, huga" />
</head>for()
繰り返し処理を行うことができる
<ul class="list">
<% for( let i = 0; i < 5; i++ ) { %>
<li class="list__item">
<p class="list__item-text"><%- i %>番目の要素</p>
</li>
<% } %>
</ul><ul class="list">
<li class="list__item">
<p class="list__item-text">0番目の要素</p>
</li>
<li class="list__item">
<p class="list__item-text">1番目の要素</p>
</li>
<li class="list__item">
<p class="list__item-text">2番目の要素</p>
</li>
<li class="list__item">
<p class="list__item-text">3番目の要素</p>
</li>
<li class="list__item">
<p class="list__item-text">4番目の要素</p>
</li>
</ul>for( ... in ...), for( ... of ...)
繰り返し処理を行うことができる
単純な配列の場合
<% var ary = [
'アイテム1', 'アイテム2', 'アイテム3'
];
%>
<p>for in</p>
<% for (var key in ary) { %>
<p><%= ary[key] %></p>
<% } %>
<p>for of</p>
<% for (var item of ary) { %>
<p><%= item %></p>
<% } %><p>for in</p>
<p>アイテム1</p>
<p>アイテム2</p>
<p>アイテム3</p>
<p>for of</p>
<p>アイテム1</p>
<p>アイテム2</p>
<p>アイテム3</p>配列内でキーと値を設定している場合
<% var ary = [
{
fruits: 'みかん',
vegetable: 'きゅうり',
},
{
fruits: 'バナナ',
vegetable: 'ごぼう',
},
{
fruits: 'いちご',
vegetable: '玉ねぎ',
},
];
%>
<p><b>for in</b></b>
<ul class="list">
<% for (var key in ary) { %>
<li class="list__item">
<p>key：<%= key %></p>
<% var number = Number([key]) + 1; %>
<p><%= number %>つ目の果物：<%= ary[key].fruits %></p>
<p>野菜：<%= ary[key].vegetable%></p>
</li>
<% } %>
</ul>
<p><b>for of</b></p>
<ul class="list">
<% for (var item of ary) { %>
<li class="list__item">
<p>果物：<%= item.fruits %></p>
<p>野菜：<%= item.vegetable %></p>
</li>
<% } %>
</ul><p><b>for in</b></b>
<ul class="list">
<li class="list__item">
<p>key：0</p>
<p>1つ目の果物：みかん</p>
<p>野菜：きゅうり</p>
</li>
<li class="list__item">
<p>key：1</p>
<p>2つ目の果物：バナナ</p>
<p>野菜：ごぼう</p>
</li>
<li class="list__item">
<p>key：2</p>
<p>3つ目の果物：いちご</p>
<p>野菜：玉ねぎ</p>
</li>
</ul>
<p><b>for of</b></p>
<ul class="list">
<li class="list__item">
<p>果物：みかん</p>
<p>野菜：きゅうり</p>
</li>
<li class="list__item">
<p>果物：バナナ</p>
<p>野菜：ごぼう</p>
</li>
<li class="list__item">
<p>果物：いちご</p>
<p>野菜：玉ねぎ</p>
</li>
</ul>forEach()
繰り返し処理を行うことができる
<p><b>forEach</b></p>
<% var ary = ['アイテム1P', 'アイテム2N', 'アイテム3M']; %>
<% ary.forEach(function (value, key) { %>
<p><%= key %>: <%= value %></p>
<% }); %>
<p><b>forEach</b></p>
<% var ary = [
{
fruits: 'みかん',
vegetable: 'きゅうり',
},
{
fruits: 'バナナ',
vegetable: 'ごぼう',
},
{
fruits: 'いちご',
vegetable: '玉ねぎ',
},
];
%>
<% ary.forEach(function (value, key) { %>
<% key = key += 1 %>
<p><%= key %>つ目の果物: <%= value.fruits %></p>
<p><%= key %>つ目の野菜: <%= value.vegetable %></p>
<% }); %><p><b>forEach</b></p>
<p>0: アイテム1P</p>
<p>1: アイテム2N</p>
<p>2: アイテム3M</p>
<p><b>forEach</b></p>
<p>1つ目の果物: みかん</p>
<p>1つ目の野菜: きゅうり</p>
<p>2つ目の果物: バナナ</p>
<p>2つ目の野菜: ごぼう</p>
<p>3つ目の果物: いちご</p>
<p>3つ目の野菜: 玉ねぎ</p>while()
繰り返し処理を行うことができる
<h3>whileテスト</h3>
<%
var counter = 1;
while (counter <= 5) {
%>
<p>ループ<%= counter %>回目</p>
<% counter++; %>
<% } %><h3>whileテスト</h3>
<p>ループ1回目</p>
<p>ループ2回目</p>
<p>ループ3回目</p>
<p>ループ4回目</p>
<p>ループ5回目</p>if()
条件分岐を行うときに記述する
<h3>ifテスト</h3>
<% const if_test = 'test01' %>
<% if(if_test == 'test01') { %>
<p>変数はtest01です</p>
<% } else if(if_test == ''test02) { %>
<p>変数はtest02です</p>
<% } else { %>
<p>変数はtest01ではありません</p>
<% } %><h3>ifテスト</h3>
<p>変数はtest01です</p>
