EJS - Express

EJS とは?

EJSとは主にJavaScriptで使用されるテンプレートエンジンです

アプリケーションの作成

「 Express Generator 」を使ってアプリケーションを作成します。

routes/index.js

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express', value: 'hello, world' });
});

module.exports = router;

views/index.ejs

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <h1><%= title %></h1>
    <p>Welcome to <%= title %></p>
    <p>ルーターから渡された値:<%= value %></p>
  </body>
</html>

ejs のファイル内で使うタグ

<% %>

Javascript のコードを ejsファイル内で実行します。

<%= %>

Javascript のコードを表示します。出力するテキストに HTMLタグがある場合はエスケープされます。

<%- %>

Javascript のコードを表示します。出力するテキストはエスケープされません。

Javascript のコードを実行する

ejs ファイル内で Javascript のコードを実行するには、次のようにします。

routes/index.js

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express', value: 'hello, world' });
});

module.exports = router;

views/index.js

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <h1><%= title %></h1>
    <p>Welcome to <%= title %></p>
    <% if(value == "true") { %>
      <p>value：<%= value %></p>
    <% } else { %>
      <p>false</p>
    <% } %>
  </body>
</html>