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

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

Node.js / Expressの学習におすすめ参考書
Node.js超入門第3版

本書情報
著者	掌田津耶乃
発売日	2020/7/18
ページ数	480ページ
Kindle版 (電子書籍)	◯
レビュー (Amazon)	(44件)

Node.js超入門第3版 [ 掌田津耶乃 ]

posted with カエレバ

楽天市場

Amazon

Yahooショッピング

参考書が苦手な人はUdemyの動画がおすすめ
【初心者向け】初めてのNode.js入門。Expressフレームワークを用いた本格Webサーバー構築やJSONを学ぼう！

動画情報
作成者	浜田篤
学習時間	2.5時間
受講者数	1,104人
レビュー	(203件)

動画の詳細はこちら

Contents

1 ExpressにEJSを導入

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を使用することでテンプレートエンジンのファイルをレスポンスすることが出来ます。