【Node.js Express】Node.js Expressアプリケーションにフラッシュメッセージを実装する方法

※当方駆け出しエンジニアのため、間違っていることも多々あると思いますので、ご了承ください。また、間違いに気付いた方はご一報いただけると幸いです。

フラッシュメッセージを使うには、connect-flash パッケージを用います。
フラッシュメッセージはリクエスト間で渡されるため、セッションとクッキーに依存します。

よって下記の３つのインストールが必要となります。

npm i connect-flash cookie-parser express-session -S

インストールしたモジュールをロードし、設定します。

main.js

"use strict";

//モジュールロード
const express = require("express"),
  app = express(),
  router = express.Router(),
  expressSession = require("express-session"),
  cookieParser = require("cookie-parser"),
  connectFlash = require("connect-flash"),

//cookie-parserをミドルウェアとして設定
router.use(cookieParser("secret_passcode"));

//express-sessionをミドルウェアとして設定
router.use(
  expressSession({
    secret: "secret_passcode",
    cookie: {
      maxAge: 4000000
    },
    resave: false,
    saveUninitialized: false
  })
);

//connect-flashをミドルウェアとして設定
router.use(connectFlash());

//フラッシュメッセージをresのローカル変数のflashMessagesに代入　※１
router.use((req, res, next) => {
  res.locals.flashMessages = req.flash();
  next();
});

express-sessionについてはこちらも参考
【Node.js express】express-validatorでバリデーションを実装し、通過した値をセッションに格納する。

コントローラーにフラッシュメッセージの処理を組み込み（Userモデルcreateの例)

usersController.js

module.exports = {
  create: (req, res, next) => {
    let userParams =  {
      name: req.body.name,
      email: req.body.email,
    };
    User.create(userParams)
      .then(user => {
        req.flash("success", "account created successfully!");
        res.redirect("users"); //上記の※１ミドルウェアを経由する。
        //success型
      })
      .catch(error => {
        req.flash("error", `Failed ${error.message}.`); //セッションを経由して表示
        res.redirect("users/new"); //フォームに戻す//上記の※１ミドルウェアを経由する。
        //error型
      });
  },
};

ビュー側でフラッシュメッセージを組み込み

layout.ejs

	<div class="flashes">
          <% if (flashMessages) { %>  //flashMessagesがあった場合
           <% if (flashMessages.success) { %>　//success型があった場合
             <div class="flash success">
	       <%= flashMessages.success %>
	     </div>
           <% } else if (flashMessages.error) { %> //error型があった場合
	     <div class="flash error">
	       <%= flashMessages.error %>
	     </div>
	   <% } %>
	 <% } %>
	</div>