Express で取得したデータを、EJS を使ってブラウザに表示させてみます。

前回のコードを使用します。

views/index.html

<!DOCTYPE html>
<html lang="ja">
  <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>Menu</title>
  </head>
  <body>
    <main>
      <h1>メニュー</h1>
      <p>メニュー一覧</p>
    </main>
  </body>
</html>

views/menu.html

<!DOCTYPE html>
<html lang="ja">
  <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" />
    <link rel="stylesheet" href="/css/styles.css" />
    <title>Menu</title>
  </head>
  <body>
    <main>
      <form action="/menu" method="POST">
        <input type="text" name="title" />
        <button type="submit">メニューを追加する</button>
      </form>
    </main>
  </body>
</html>

index.js

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

const menuRoutes = require("./routes/index.js");
const menus = require("./routes/menu.js");

app.use(express.urlencoded({ extended: true }));

app.use(express.static(path.join(__dirname, "public")));

app.use("/", menus.routes);
app.use(menuRoutes);

app.use((req, res, next) => {
  res.status(404).send("<h1>ページが見つかりません</h1>");
});

app.listen(8000, () => console.log("Server is running ..."));

routes/index.js

const express = require("express");
const router = express.Router();
const path = require("path");

const menuData = require("./menu");

router.get("/", (req, res, next) => {
  console.log(menuData.menus);
  res.sendFile(path.join(__dirname, "../", "views", "index.html"));
});

module.exports = router;

routes/menu.js

const express = require("express");
const router = express.Router();
const path = require("path");

const menus = [];

router.get("/menu", (req, res, next) => {
  res.sendFile(path.join(__dirname, "../", "views", "menu.html"));
});

router.post("/menu", (req, res, next) => {
  menus.push({ menuTitle: req.body.title });
  res.redirect("/");
});

exports.routes = router;
exports.menus = menus;

EJS とは、html の中に JavaScript を混ぜて使用しながら、ウェブサイトを表示することができるソフトです。

早速、EJS をインストールします。

ターミナルで、npm install --save ejsを実行します。

まずは、EJS が使えるように、app.setで index.js に設定します。

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

さらに、views フォルダ内で使用するので、index.js に設定します。

app.set("views", "views");

views フォルダ内に index.ejs と menu.ejs を作成します。

コードは、index.html と menu.html をコピーしましょう。

views/index.ejs

<!DOCTYPE html>
<html lang="ja">
  <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>Menu</title>
  </head>
  <body>
    <main>
      <h1>メニュー</h1>
      <p>メニュー一覧</p>
    </main>
  </body>
</html>

views/menu.ejs

<!DOCTYPE html>
<html lang="ja">
  <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" />
    <link rel="stylesheet" href="/css/styles.css" />
    <title>Menu</title>
  </head>
  <body>
    <main>
      <form action="/menu" method="POST">
        <input type="text" name="title" />
        <button type="submit">メニューを追加する</button>
      </form>
    </main>
  </body>
</html>

まずは、head 内の title を修正します。

routes フォルダの menu.js にあるrouter.getsendFileからrenderにします。

render 内に title 内の表示内容を指定します。

router.get("/menu", (req, res, next) => {
  res.render("menu", { pageTitle: "メニュー追加" });
});

menu.ejs にある title タグの中に<%= %>と書きます。

<%= %>の中に、先程 menu.js で設定した pageTitle を指定します。

<title><%= pageTitle %></title>

サーバーを起動して、ブラウザで確認すると、

image2

ページのタイトルが『Menu』から『メニュー追加』へ変更されました。

menu.ejs と同様に、index.ejs も設定します。

routes フォルダ内の index.js にあるrouter.getを修正します。

menu.js と同様に、router.getsendFileからrenderにします。

今回は、メニューの内容を表示したいので、menu.js の menus を取得します。

const menuData = require("./menu");

router.get("/", (req, res, next) => {
  console.log(menuData.menus);
  res.render("index", {
    pageTitle: "メニュー一覧",
    menus: menuData.menus,
  });
});

index.ejs の title タグ内を修正します。

<title><%= pageTitle %></title>

メニュー一覧の下に、menus のデータを出力します。

ejs 内では JavaScript が使えるので、if でメニューがない場合、『注文がありません』と表示するようにします。

<main>
  <h1>メニュー</h1>
  <p>メニュー一覧</p>
  <% if(menus.length > 0) { %>

  <% } else { %>
  <p>注文がありません</p>
  <% } %>
</main>

メニューがある場合は、for を使って、menu 内の配列を順に表示するようにします。

<main>
  <h1>メニュー</h1>
  <p>メニュー一覧</p>
  <% if(menus.length > 0) { for (let menu of menus){ %>
  <p><%= menu.menuTitle %></p>
  <%} %> <% } else { %>
  <p>注文がありません</p>
  <% } %>
</main>

ブラウザで確認してみます。

image3

まだメニューを追加していないので、『注文がありません』と表示されます。

メニューを追加してみます。

image4

image5

メニューを追加すると、『唐揚げ定食』が追加されました。

さらにメニューを追加してみます。

image6

『唐揚げ定食』の下に『しょうが焼き定食』が表示されました。

ブログ一覧