ExpressにEJSを導入する手順について徹底解説

2022年7月6日2023年7月9日

本記事では、ExpressにテンプレートのエンジンのEJSを導入する手順について徹底解説しています。

Node.jsの学習におすすめ書籍

Node.js超入門［第4版］

総合評価

( 5 )

メリット

今月出版されたNode.js超入門第3版の改訂版
最新のNode.jsを学ぶことができる

Node.js超入門［第4版］ [ 掌田津耶乃 ]

楽天ブックス

¥3,300 （2024/11/14 22:07時点 | 楽天市場調べ）

Amazonで探す

楽天市場で探す

Yahoo!ショッピングで探す

ポチップ

先輩くん

Amazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ！

後輩ちゃん

初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね！

Amazon Kindle Unlimited

全プログラマー必見！
変数名/関数名にもう悩まない！

リーダブルコード

総合評価

( 5 )

メリット

美しいコードが書けるが自然と書けるようになる
他の開発者が理解しやすいコードになる

リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック (Theory in practice)

著:Dustin Boswell, 著:Trevor Foucher, 解説:須藤功平, 翻訳:角征典

¥2,640 （2023/07/23 02:48時点 | Amazon調べ）

Amazonで探す

楽天市場で探す

Yahoo!ショッピングで探す

ポチップ

ExpressにEJSを導入

以下の順で、ExpressにEJSを導入する手順について解説していきます。序盤の方はExpressとEJSをインストールするための下準備のようなものなので、既に設定済みの方は飛ばしてください。

EJS導入の流れ

package.jsonの作成
Expressのインストール
EJSのインストール
ejsファイルの作成
ejsファイルをexpressに読み込む
レスポンスでejsファイルを返す

※ファイル作成やディレクトリ作成でもターミナルを使用しています。GUIでファイルを作成しても問題ないので、個人のやりやすい方で進めてください。

package.jsonの作成

まず始めにプロジェクトの初期化をして、package.jsonを作成します。下記コマンドをターミナルで実行してください。

npm init -y

Expressのインストール

package.jsonの作成が完了したら、Expressのインストールを行います。下記コマンドをターミナルで実行してください。

npm i express

インストールが完了したら、Expressを使用するファイルを一つ作成します。ファイル名は自由に決めて大丈夫ですが、今回は「index.js」というファイル名にします。

touch index.js

index.jsファイルには、インストールしたexpressの読み込みとローカルサーバーの設定までを行います。

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

app.listen(8080, () => {});

ポート番号は8080で設定していますが、使用したいポート番号があれば各自で変更してください。

EJSのインストール

ここからが本題のEJSのインストールになります。まずは下記のコマンドをターミナルで実行させEJSをインストールします。

npm i ejs

ejsファイルの作成

EJSのインストールが完了したら、ejsファイルを作成するのですが、その前にviewsディレクトリを作成します。

viewsディレクトリを作成する理由は、Express側でテンプレート(pug,ejsなど)を使用する際はviewsディレクトリに該当ファイルを配置してくださいと指定されているためです。

mkdir views

viewsディレクトリを作成したら、その中にejsファイルを作成していきます。今回は「top.ejs」のファイルを作成します。

touch views/top.ejs

top.ejsファイルの内容は以下のとおりです。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>TOPページ</title>
  </head>
  <body>
    <h1>TOPページ</h1>
    <p>EJSで作られたTOPページです！！</p>
  </body>
</html>

ejsファイルをexpressに読み込む

作成したejsファイルをexpressを使用しているindex.jsに読み込んでいきましょう。

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

app.set('view engine', 'ejs');

app.listen(8080, () => {});

コードの解説(app.set)

app.setは、テンプレートエンジンを読み込むためのメソッドです。今回はEJSですが、Expressでpugなどの他のテンプレートエンジンを使用する場合もapp.setを使用します。

第一引数：view engineを指定。
第二引数：使用するテンプレートを指定。

今までインストールしたパッケージを使用する時は、require()で読み込みを行なっていましたがExpressでEJSを読み込んでくれるので不要です。

レスポンスでejsファイルを返す

いよいよ最終です。Expressでルーティング設定を行い、ejsファイルをクライアントにレスポンスします。

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

app.set("view engine", "ejs");

app.get("/", (req, res) => {
  res.render("top");
});

app.listen(8080, () => {});

コードの解説(res.render)

app.getメソッドで指定したコールバック関数の第二引数(res)のオブジェクト内にrenderが用意されています。このrenderを使用することでテンプレートエンジンのファイルをレスポンスすることが出来ます。