connect-flash - Express

作成日：2025/03/01
最終更新日：2025/03/01

connect-flash とは

connect-flash を使うとフラッシュメッセージを表示することができます。

セッションとクッキーが使われるので、cookie-parser と express-session が必要になります。

Express Generator を使った場合は、cookie-parser 自動的にインストールされます。

インストール

// connect-flash
npm install connect-flash

// express-session
npm install express-session

2025/03/01 現在、利用はできますが「 connect-flash 」を利用すると以下のエラーが表示されます。

(node:13532) [DEP0044] DeprecationWarning: The `util.isArray` API is deprecated. Please use `Array.isArray()` instead. (Use `node --trace-deprecation ...` to show where the warning was created)

インストールした connect-flash（node_modules/connect-flash/lib/flash.js）のファイルを編集して、util.isArray の使わないように書き換えると警告はでなくなります。

Express フォルダ構成

routes/session.js

var express = require('express');
var router = express.Router();

router.get('/', function(req, res, next) {
  res.render('session/index');
});

router.post('/', function(req, res, next) {
  req.flash("text", req.body.message);
  res.redirect('/session/');
});

module.exports = router;

views/session/index.ejs

<!DOCTYPE html>
<html>
  <head>
    <title>connect-flash</title>
  </head>
  <body>
    <form action="/session" method="post">
      <input type="text" name="message">
      <input type="submit" value="送信">
    </form>
    <% if(messages.text){ %>
      <p><%= messages.text %></p>
    <% } %>
  </body>
</html>

app.js

var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');
const session = require("express-session"); // +
const flash = require('connect-flash'); // +

var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
var sessionRouter = require('./routes/session'); // +

var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

// + ルーターの設定の前に記述する必要があります
app.use(session({
  secret: "secret",
  resave: false,
  saveUninitialized: true,
}));
app.use(flash()); // + ルーターの設定の前に記述する必要があります

 // + ルーターの設定の前に記述する必要があります
app.use((req, res, next) => {
  res.locals.messages = req.flash(); // *1
  next(); 
});

// ルーターの設定
app.use('/', indexRouter);
app.use('/users', usersRouter);
app.use('/session', sessionRouter); // +

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  next(createError(404));
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;

※1「 res.locals.messages = req.flash(); 」の messages の部分が、ビューで呼び出している <%= messages.text %> の messages の部分です。

messages の部分は、自由に変更できます。

「 res.locals.msg = req.flash(); 」とした場合、ビューでは <%= msg.text %> とすれば呼び出せます。