--- title: ejsでレイアウト機能を使う tags: Express ejs Layout Node.js JavaScript author: kanye__east slide: false --- 最近個人プロジェクトでExpress x ejsを使っています。 viewファイルを作っていて、当然ですけど絶対レイアウト機能を使ったほうが修正も楽だろうと思って調べました。 * express v4.16.3 * ejs v2.5.9 ## レイアウト機能使用に必要なもの * [express-ejs-layouts](https://www.npmjs.com/package/express-ejs-layouts) これだけです ## 手順 ### express-ejs-layoutsインストール ```shell $ yarn add express-ejs-layouts Or npm i express-ejs-layouts --save ``` ### app.js修正 app変数作成後に、expressLayoutsをrequire、app.useを実行します。 ```javascript:app.js const app = express(); + const expressLayouts = require('express-ejs-layouts'); + app.use(expressLayouts); ``` ### layout.ejs作成 ポイントは`<%- body %>`です。このタグ内にejsファイルの中身が展開されます。 ```html:views/layout.ejs

Layout Page

<%- body %> ``` ### 個ページごとのejsファイルを作成 ```html:views/index.ejs

index.ejs

``` ## 結果 以下のように表示されました。 ejs-layout.png ```html:ソースコードを表示

Layout Page

index.ejs

``` しっかりとlayoutテンプレートが適用されていることが確認できたかと思います。 これで、テンプレートファイルの共通部分(ヘッダー、フッターとか)は一箇所で管理できますね。 ejs本体にレイアウト機能が無いのは意外でした(過去にはあった?)。 とはいえnpm PKG1つ追加でサクッと実現できました。 みなさんの参考になれば幸いです。