EJSの基本的な書き方

## `<% %>`
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">&lt;span&gt;出力します&lt;/span&gt;</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>
```