Node.js

【Node.js】MVCに沿って、コントローラーを作成する

作成日：2021年10月23日

更新日：2021年10月23日

MVC は、Model View Controller の略です。

Model がデータ取扱の部分にあたり、View がブラウザを表示する部分にあたります。

Controller は、Model と View を繋げる役割にあたります。

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

【Node.js】EJSを使って、ブラウザにデータを表示する方法

views/index.ejs

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.menuTitle %></p>
      <%} %> <% } else { %>
      <p>注文がありません</p>
      <% } %>
    </main>
  </body>
</html>

views/menu.ejs

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">
        <input type="text" name="title" />
        <button type="submit">メニューを追加する</button>
      </form>
    </main>
  </body>
</html>

index.js

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

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

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

routers/menu.js

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

const menus = [];

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

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

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

routes/index.js

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.render("index", {
    pageTitle: "メニュー一覧",
    menus: menuData.menus,
  });
});

module.exports = router;

routes フォルダの中の index.js や menu.js にある、req, res, nextを、controller として管理します。

まずは、controllers フォルダを作成し、menus.js を作成します。

menu にある router.get の req, res, next の部分をコピーして、controller フォルダの menus.js に貼り付けます。

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

貼り付けたコードを getAddMenu 関数としてエクスポートします。

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

menu.js に menus.js を呼び出します。

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

menu.js でコピーした部分に、geaAddMenu をインポートします。

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

menu.js のrouter.getもrouter.postと同様に修正します。

この時、menu.js のconst menus = [];を、menus.js にコピーします。

controllers/menus.js

js
const menus = [];

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

routes/menu.js

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

exports.routes = router;とexports.menus = menus;を削除し、module.exports = router;を入力します。

routes/index.js の router.get の部分も routes/menu.js と同様に修正します。

controllers/menus.js

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

routes/index.js

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

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

index.js の routes を修正します。

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

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

サーバーを起動して、確認してみます。

サーバーが立ち上がりました。

データ送信を確認します。

データの送信も機能しています。

お知らせ

私事ですが、Udemyで初心者を対象にしたReactの動画コースを作成しました。

Reactについて興味がありましたら、ぜひ下のリンクからアクセスしてください。

詳しくはこちら（Udemyの外部サイトへ遷移します）

【Node.js】MVCに沿って、コントローラーを作成する

お知らせ

カテゴリ

最新順

【React】Zustandで、簡単に状態管理する

【Ruby on Rails】登録フォームを作成し、データベースを保存する

【Ruby on Rails】ルーティングを設定する

【Ruby on Rails】データベースの内容をブラウザに表示する

【Ruby on Rails】rails consoleを使い、データベースを追加する