【Amazon】人気の商品が日替わりで登場!
毎日お得なタイムセール!商品をみる

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

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

Node.jsの学習におすすめ書籍
Node.js超入門[第4版]
総合評価
( 5 )
メリット
  • 今月出版されたNode.js超入門 第3版の改訂版
  • 最新のNode.jsを学ぶことができる
楽天ブックス
¥3,300 (2024/03/25 18:22時点 | 楽天市場調べ)
先輩くん

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

後輩ちゃん

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

全プログラマー必見!
変数名/関数名にもう悩まない!
リーダブルコード
総合評価
( 5 )
メリット
  • 美しいコードが書けるが自然と書けるようになる
  • 他の開発者が理解しやすいコードになる
著:Dustin Boswell, 著:Trevor Foucher, 解説:須藤 功平, 翻訳:角 征典
¥2,640 (2023/07/23 02:48時点 | Amazon調べ)
目次

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

  • 引数:viewsディレクトリに配置したファイル名を指定。今回の場合は、top.ejsファイルを返したいので、topを指定。

以上で設定が完了です。最後に正しく表示がされているかローカルサーバーを立ち上げ確認してみましょう。

node index.js
http://localhost:8080/
表示結果
表示結果

すると、top.ejsで作成した内容がページに表示されていることが確認出来ます。

お疲れ様でした。以上でExpressにEJSを導入する手順の解説が終了です。

ブログランキング・にほんブログ村へ PVアクセスランキング にほんブログ村 FC2 Blog Ranking

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次