概要

Expressにおけるwebページのテンプレート化の方法をまとめてみる。
使用するパッケージは以下の通り。
・express
・express-ejs-layouts

作成するファイルは以下の通り。
(1) /main.js
テンプレート化に必要なパッケージの読み込み、レスポンスのロジックを実装

(2) /views/layout.ejs
テンプレートエンジンが使用するレイアウトのウェブページのテンプレート。このファイルでページのレイアウトとコンテンツの埋め込み箇所を定義する。

(3) /views/index.ejs
テンプレートエンジンがレイアウトに埋め込むファイル。
ここではindexのページを定義しているが、ユーザーのアクセスするパスに応じて他のejsファイルも作成する。

Step1. main.jsの実装

まず、以下のようにmain.jsを実装する。
(1) パッケージのインポート
以下3つの定数を定義する。

const express =require(“express”)
const layouts = require(“express-ejs-layouts”)
const app = express()

(2) view engineの指定
appに対して、view engineの属性設定。

app.set(“view engine”,”ejs”)

(3) リクエストパスに対するレスポンスロジックの実装
以下のようにrenderに/view/index.ejsのファイルをテンプレートとして読み込むことを指定する。拡張子指定不要。

app.get(“/”, (req, res) => {
    res.render(“index”)
})

layout.ejsはページ間で共通のコンテンツを定義する。
その上で、各ページ固有のコンテンツを埋め込む場所を定義する。

<html>
<head> ... </head>
<body> 
レイアウトのコンテンツを記載

<%- body %>

</body>
</html>

上記でも記載のあるように、以下の記述が各ページのコンテンツの埋め込み先になる。

<%- body %>

index.ejsには、laytout.ejsの<%- body %>に埋め込むコンテンツを定義することになる。

<h1>これがhttp://xxxxxx.xx.xx/にアクセスした際に表示されるページのコンテンツ部分です</h1>

ポイントは、HTMLを記載しているのだが、お決まりのから始まるタグの記載をするのではなく、layout.ejsに埋め込まれることを想定したhtmlの記述をする必要がある。