テンプレートエンジン「EJS」で効率的にコーディングするためのメモ

変数の使い方

USAGE

<% var title = 'タイトル'; %><h1><%= title %></h1>
HTML

OUTPUT

<h1>タイトル</h1>
HTML

USAGE

<% var meta = { title:'サイトのタイトル', description:'サイトのdescription', keywords:'keyword,keyword,keyword' }; %><title><%= meta.title %></title><meta name="description" content="<%= meta.description %>"><meta name="keywords" content="<%= meta.keywords %>">
HTML

OUTPUT

<title>サイトのタイトル</title><meta name="description" content="サイトのdescription"><meta name="keywords" content="keyword,keyword,keyword">
HTML

エスケープとコメント

USAGE

<% var title = '<h1>タイトル</h1>'; %><div><%= title %></div><div><%- title %></div>
HTML

OUTPUT

<div><h1>タイトル</h1></div><div><h1>タイトル</h1></div>
HTML

USAGE

<%# コメント ejs %><!-- コメント html -->
HTML

OUTPUT

<!-- コメント html -->
HTML

include()関数

USAGE

index.ejs

<% var commonData = { title: 'タイトル', description: 'サイトのdescription', keyword: 'keyword,keyword,keyword', };%><%- include('template-ejs/_head',{common:commonData}); %>
HTML

_head.ejs

<head> <meta name="description" content="<%= common.description %>"> <meta name="keywords" content="<%= common.keyword %>"> <title><%= common.title %></title></head>
HTML

OUTPUT

<head> <meta name="description" content="サイトのdescription"> <meta name="keywords" content="keyword,keyword,keyword"> <title>タイトル</title></head>
HTML

for文

USAGE

<ul> <% for (var i = 0; i < 5; i++) { %> <li>NO,<%= i+1 %></li> <% } %></ul>
HTML

OUTPUT

<ul> <li>NO,1</li> <li>NO,2</li> <li>NO,3</li> <li>NO,4</li> <li>NO,5</li></ul>
HTML

while文

USAGE

<ul> <% var counter = 1; %> <% while (counter <= 5) { %> <li>NO,<%= counter %></li> <% counter++; %> <% } %></ul>
HTML

OUTPUT

<ul> <li>NO,1</li> <li>NO,2</li> <li>NO,3</li> <li>NO,4</li> <li>NO,5</li></ul>
HTML

array.forEach()

USAGE

<% var ary = ['item1', 'item2', 'item3']; %><ul> <% ary.forEach(function (value, key) { %> <li><%= value %></li> <% }); %></ul>
HTML

OUTPUT

<ul> <li>item1</li> <li>item2</li> <li>item3</li></ul>
HTML

read next