HTML: よく使う EJS のサンプルコード

必要に迫られ、今さらですが Node.js で HTML テンプレートエンジンの EJS を導入しました。
今回は EJS のよく使うサンプルコードをメモしておきます。

目次

  • よく使う EJS のサンプルコード
  • まとめ

よく使う EJS のサンプルコード

基本

<% %> の中で JavaScript コードを実行することができます。

<% %>

<%
  var date = new Date();
%>

コメント

EJS コメントです。コンパイル時 HTML には出力されません。

<%# %>

<%# ここは EJS コメントです %>

インクルード

静的 HTML 出力として EJS を使う場合、主な用途はインクルードだと思います。
以下は index.ejs から _include フォルダ内の head.ejs (ejs 拡張子は省略可)をインクルードし headValue の値を渡すサンプルです。

index.ejs

<html>
<%
  var headValue = {
    title: 'sirochro',
    desc: 'This is sirochro page.',
    author: 'sirochro'
  };
%>
<%- include('_include/head', {value: headValue}) %>
<body>
</body>
</html>

head.ejs

<head>
  <title><%= value.title %></title>
  <meta name="description" content="<%= value.desc %>">
  <meta name="author" content="<%= value.author %>">
</head>
<%
  if (typeof value === 'undefined') {
    var value = {
      title:'default',
      desc:'default',
      author:'default'
    };
  } 
%>

出力

文字列を出力する場合と、HTML 要素を出力する場合で2つの記法に分かれます。

<%= %>(文字列を出力したい場合)

<body>
<% var str = 'This is string'; %>
<p><%= str %></p>
</body>

<%- %>(html 要素を出力したい場合)

<body>
<% var el_h1 = '<h1>This is h1 title</h1>'; %>
<%- el_h1 %>
</body>

ループ

おもにリスト等で利用する機会が多いかと思います。

<% for %>

<ul>
  <% for (var i = 0; i < 3; i++) { %>
  <li>listNumber<%= i+1 %></li>
  <% } %>
</ul>

<% forEach %>

<ul>
  <% var fruits = ['apple', 'banana', 'cherry', 'orange', 'peach']; %>
  <% fruits.forEach(function (value) { %>
  <li><%= value %></li>
  <% }); %>
</ul>

まとめ

ウェブサイトやウェブアプリの仕様等を HTML でプレゼンしたい場合、EJS のような HTML テンプレートエンジンが役に立ちます。
あらかじめ EJS で再利用性の高い要素をコンポーネント化しておけば、少ないコーディングで HTML 出力ができ、作業効率アップ、コストダウンにつながるかと思います。

この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

siro:chro 無料ゲーム SQN をリリースしました

img_sqn_00

sirochro 初の無料ゲームアプリ SQN をリリースしました。
記事:SQN: iOS 無料ゲームアプリ SQN - Sequential Numbers をリリース
ちょっとした時間に楽しめる完全無料のゲームなっていますので、是非ダウンロードして遊んでみてください。

↓SQN のダウンロードはこちらから

Related Contents

Pickup Contents