ejsでレイアウト機能を使う

3898 ワード
Express JavaScript ejs Node.js Layout JavaScript テキストリンク

最近個人プロジェクトでExpress x ejsを使っています。
viewファイルを作っていて、当然ですけど絶対レイアウト機能を使ったほうが修正も楽だろうと思って調べました。

  • express v4.16.3
  • ejs v2.5.9

レイアウト機能使用に必要なもの

これだけです

手順

express-ejs-layoutsインストール

$ yarn add express-ejs-layouts Or npm i express-ejs-layouts --save

app.js修正

app変数作成後に、expressLayoutsをrequire、app.useを実行します。

app.js
const app = express();
+ const expressLayouts = require('express-ejs-layouts');
+ app.use(expressLayouts);

layout.ejs作成

ポイントは<%- body %>です。このタグ内にejsファイルの中身が展開されます。

views/layout.ejs
<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <h1>Layout Page</h1>
    <%- body %>
  </body>
</html>

個ページごとのejsファイルを作成

views/index.ejs
<h2>index.ejs</h2>

結果

以下のように表示されました。

ソースコードを表示
<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <h1>Layout Page</h1>
    <h2>index.ejs</h2>
  </body>
</html>

しっかりとlayoutテンプレートが適用されていることが確認できたかと思います。
これで、テンプレートファイルの共通部分（ヘッダー、フッターとか）は一箇所で管理できますね。

ejs本体にレイアウト機能が無いのは意外でした（過去にはあった？）。
とはいえnpm PKG１つ追加でサクッと実現できました。
みなさんの参考になれば幸いです。