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

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

ITエンジニア特化の転職サイト！
自社内開発求人に強い【クラウドリンク】

先輩くん

年収、休日数、労働環境等クラウドリンクが審査し、これらを通過した優良求人情報のみ紹介しているよ！

後輩ちゃん

100％自社内開発の求人だから、SESのように職場環境が変わらないのがいいね！

簡単30秒で無料登録！

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

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

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

posted with カエレバ

楽天市場

Amazon

Yahooショッピング

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