Help us understand the problem. What is going on with this article?

EJSの基本的な書き方

More than 1 year has passed since last update.

<% %>

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>
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした