前回は、Express と JSON データを使って、一覧画面から詳細画面に遷移する方法を紹介しました。

今回は、JSON データを削除する方法を紹介します。

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

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><%= pageTitle %></title>
  </head>
  <body>
    <main>
      <h1>メニュー</h1>
      <p>メニュー一覧</p>
      <% if(menus.length > 0) { for (let menu of menus){ %>
      <p><%= menu.title %></p>
      <%} %> <% } else { %>
      <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><%= pageTitle %></title>
  </head>
  <body>
    <main>
      <form action="/menu" method="POST">
        <div class="form-control">
          <label for="title">メニュー名</label>
          <input type="text" name="title" />
        </div>
        <div class="form-control">
          <label for="description">内容</label>
          <input type="text" name="description" />
        </div>
        <button type="submit">メニューを追加する</button>
      </form>
    </main>
  </body>
</html>

views/menu-detail.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><%= pageTitle %></title>
  </head>
  <body>
    <main>
      <h1><%= menu.title %></h1>
      <p><%= menu.description %></p>
    </main>
  </body>
</html>

index.js

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

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

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);
app.use(menuRoutes);

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

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

models/menu.js

const fs = require("fs");
const path = require("path");

const menus = [];

module.exports = class Menu {
  constructor(id, title, description) {
    this.id = id;
    this.title = title;
    this.description = description;
  }

  save() {
    this.id = (Math.random() + 1).toString(36).slice(2, 8);
    const menuPath = path.join(
      path.dirname(require.main.filename),
      "data",
      "menus.json"
    );
    fs.readFile(menuPath, (err, fileContent) => {
      let menus = [];
      if (!err) {
        menus = JSON.parse(fileContent);
      }
      menus.push(this);
      fs.writeFile(menuPath, JSON.stringify(menus), (err) => {
        console.log(err);
      });
    });
  }

  static fetchAll(data) {
    const menuPath = path.join(
      path.dirname(require.main.filename),
      "data",
      "menus.json"
    );
    fs.readFile(menuPath, (err, fileContent) => {
      if (err) {
        data([]);
      }
      data(JSON.parse(fileContent));
    });
  }

  static fetchMenu(id, data) {
    const menuPath = path.join(
      path.dirname(require.main.filename),
      "data",
      "menus.json"
    );

    fs.readFile(menuPath, (err, fileContent) => {
      if (err) {
        data([]);
      }
      const menuData = JSON.parse(fileContent);
      const menuDetail = menuData.find((menu) => menu.id === id);
      data(menuDetail);
    });
  }
};

controllers/menus.js

const Menu = require("../models/menu");

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

exports.postAddMenu = (req, res, next) => {
  const id = req.body.id;
  const title = req.body.title;
  const description = req.body.description;
  const menu = new Menu(id, title, description);
  menu.save();
  res.redirect("/");
};

exports.getAddMenus = (req, res, next) => {
  Menu.fetchAll((menus) => {
    res.render("index", {
      pageTitle: "メニュー一覧",
      menus,
    });
  });
};

exports.getMenu = (req, res, next) => {
  const id = req.params.menuId;
  Menu.fetchMenu(id, (menu) => {
    res.render("menu-detail", {
      menu: menu,
      pageTitle: "詳細画面",
    });
  });
};

routes/index.js

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

const menuController = require("../controllers/menus");

router.get("/", menuController.getAddMenus);

module.exports = router;

routes/menu.js

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

const menuController = require("../controllers/menus");

router.get("/menu", menuController.getAddMenu);

router.get("/menu/:menuId", menuController.getMenu);

router.post("/menu", menuController.postAddMenu);

module.exports = router;

削除ボタンを作成

index.ejs に削除ボタンを作成します。

JSON データの削除を処理するために、delete-menu へ遷移するようにします。

<div>
  <form action="/delete-menu" method="POST">
    <button type="submit">削除</button>
  </form>
</div>

削除する際メニューの ID が必要になるので、削除ボタンを押したら、value に EJS でメニュー ID を設定します。

また、input タグの中身が見えないように、type="hidden"にしておきます。

<div>
  <form action="/delete-menu" method="POST">
    <input type="hidden" value="<%= menu.id %>" name="menuId" />
    <button type="submit">削除</button>
  </form>
</div>

削除モデルを作成

models フォルダの menu.js にある Menu クラスに、deleteMenuを作成します。

static deleteMenu(id) {

}

前回作成した、fetchMenuの内容をdeleteMenuにコピーしましょう。

static deleteMenu(id) {
const menuPath = path.join(
    path.dirname(require.main.filename),
    "data",
    "menus.json"
  );

  fs.readFile(menuPath, (err, fileContent) => {
    if (err) {
      data([]);
    }
    const menuData = JSON.parse(fileContent);
    const menuDetail = menuData.find((menu) => menu.id === id);
    data(menuDetail);
  });
}

今回はfindではなく、削除したい ID に当てはまらない JSON データを取得するために、filterを使います。

削除したい ID がmenu.idなので、『!==』で削除したい ID 以外を取得します。

menuDetailの名前もupdatedMenusにしておきましょう。

static deleteMenu(id) {
  const menuPath = path.join(
    path.dirname(require.main.filename),
    "data",
    "menus.json"
  );
  fs.readFile(menuPath, (err, fileContent) => {
    if (err) {
      data([]);
    }
    const menuData = JSON.parse(fileContent);
    const updatedMenus = menuData.filter((menu) => menu.id !== id);
  });
}

updatedMenusの一覧を JSON ファイルに書き込みます。

static deleteMenu(id) {
  const menuPath = path.join(
    path.dirname(require.main.filename),
    "data",
    "menus.json"
  );
  fs.readFile(menuPath, (err, fileContent) => {
    if (err) {
      data([]);
    }
    const menuData = JSON.parse(fileContent);
    const updatedMenus = menuData.filter((menu) => menu.id !== id);
    fs.writeFile(menuPath, JSON.stringify(updatedMenus), (err) => {
      console.log(err);
    });
  });
}

これで、モデルの作成は、一通り完了しました。

削除コントローラを作成

削除ボタンを押した時に処理するためのコントローラを作成します。

名前は、postDeleteMenuにします。

exports.postDeleteMenu = (req, res, next) => {

};

メニュー ID を取得し、Menu クラスのdeleteMenuへ渡します。

exports.postDeleteMenu = (req, res, next) => {
  const id = req.body.menuId;
  Menu.deleteMenu(id);
};

処理後は、ホーム画面に戻るよう、リダイレクトします。

exports.postDeleteMenu = (req, res, next) => {
  const id = req.body.menuId;
  Menu.deleteMenu(id);
  res.redirect("/");
};

routes フォルダの menu.js にルート設定します。

index.ejs の削除ボタンで設定した URL と、postDeleteMenuのコントローラを指定しましょう。

router.post("/delete-menu", menuController.postDeleteMenu);

一通り設定が完了しましたので、ブラウザで確認します。

image2

image3

image4

image5

image6

メニュー追加は、うまく機能しています。

では、『野菜炒め定食』の削除ボタンを押してみます。

image7

image8

『野菜炒め定食』を削除することができました。

ブログ一覧