EJSの使い方

2022.07.07 2023.12.13

ExpressのテンプレートエンジンEJSの使い方です。

EJSのインストール

npm install ejs

使い方

サーバサイド(抜粋)

viewsディレクトリにテンプレートファイルを置く場合。

/
- views
    - main.ejs
- index.js

const express = require('express');
const app = express();

app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

app.get('/', (request, response) => {
    response.render('main', { name: 'dragon'});
});

クライアントサイド

<!doctype html>
<html>
<head>
    <meta charset="charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test ejs</title>
</head>
<body>
    <div>
        <%= name %>
    </div>
</body>
</html>

書式

変数の出力

<%= 変数名 %>

HTMLエスケープせずに出力

<%- 変数名 %>

サンプル

サーバサイド

const param = {
    html: '改行のある<br />文字列',
}
response.render('main', param);

クライアントサイド

<div>
    <%- html %>
</div>
<div>
    <%= html %>
</div>

クライアントの表示

別ファイルの読み込み

<%- include('ファイル名', パラメータ ) %>

サンプル

<%- include('header', { title: "main page" } )  %>
<body>
    <div>
        include test.
    </div>
</body>
</html>

header.ejs

<!doctype html>
<html>
<head>
    <meta charset="charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><%= title %></title>
</head>

出力

<!doctype html>
<html>
<head>
    <meta charset="charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>main page</title>
</head>

<body>
    <div>
        include test.
    </div>
</body>
</html>

ループ

<% for %>の中にJavaScriptのループ処理を記述できます。

<% for (初期値; ループ継続条件; カウンタ変数の更新) { %>
    // 処理.
<% } %>

<% for (let i = 0; i < history.length; i++) { %>
    <%= history[i].datetime %><br />
<% } %>

や

<% for (let item of history) { %>
    <%= item.datetime %><br />
<% } %>

出力

2022/7/7 15:12<br />

2022/7/7 15:13<br />

2022/7/7 15:14<br />

2022/7/7 15:16<br />

上記のように出力は１行ごとに改行コードが追加されます。これを抑制したい場合はループの終了タグを次のようにします。(末尾を-%>にする)
<% for (let item of history) { -%>

出力

2022/7/7 15:12<br />
2022/7/7 15:13<br />
2022/7/7 15:14<br />
2022/7/7 15:16<br />

条件判定

<% if (条件) { %>
    // 
<% } else { %>
    //
<% } %>

サンプル

<% let historyNum = history.length; %>
<% if (historyNum < 10) num = 10; else if (historyNum > 20) num = 20; else num = historyNum; %>

scriptタグ内での使用

サーバから受け取った変数をクライアントの<script>タグ内で使う方法です。
数値や文字列であれば以下で取得可能です。

const id = "<%= id %>";

配列・オブジェクトの場合は、次のようにします。
<%= %>ではなく、<%- %>で指定します。<%= %>の場合、JSON.parse()でエラーとなります。

// rowsはオブジェクトの配列.
const rows = JSON.parse('<%- JSON.stringify(rows) %>');
for (let i = 0; i < rows.length; i++) {
    console.log(${rows[i].id});
}

// rangeはオブジェクト.
const range = JSON.parse('<%- JSON.stringify(range) %>');
if (range.start) {
    :
}

HTML内から関数をコールする方法

同一ファイルに関数がある場合

関数定義部分

<%
    selectValue = (item) => {
        return item.value;
    }
%>

実行例

<% for (let i = 0; i < myList.length; i++) { %>
    <p><%- selectValue(myList[i]) %></p>
<% } %>

別ファイルにある関数をコールする場合

関数定義側(select-value.ejs)

<%
    selectValue = (item) => {
        return item.value;
    }
%>

呼び出し側

<%- include('./select-value') %>

<% for (let i = 0; i < myList.length; i++) { %>
    <p><%- selectValue(myList[i]) %></p>
<% } %>

コメントコメントをキャンセル

npm エラー(npm破損時)の対処方法

Node.jsからPythonを実行する

EJSの使い方

EJSのインストール

使い方

サーバサイド(抜粋)

クライアントサイド

書式

変数の出力

HTMLエスケープせずに出力

サンプル

サーバサイド

クライアントサイド

クライアントの表示

別ファイルの読み込み

サンプル

出力

ループ

出力

出力

条件判定

サンプル

scriptタグ内での使用

HTML内から関数をコールする方法

同一ファイルに関数がある場合

別ファイルにある関数をコールする場合

関連記事

コメント コメントをキャンセル

コメントコメントをキャンセル