107
91

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

EJSの基本的な書き方

Posted at

<% %>

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>
107
91
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
107
91

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?