Cannot read property 'message' of undefinedが表示されうまく動作しない。

Node.jsの入門書を読み進めていき自力で解決できないエラーに出くわしました。
動作としては、helloページにメッセージを送信するフォームを作成し、hogeと入力して送信ボタンをクリックすると、postページにhogeが表示されるプログラムです。
環境はexpress generatorです。

ejs
1    <body>
2        <head>
3            <h1><%= title %></h1>
4        </head>
5        <div role="main">
6            <p><%- content %></p>
7            <form method="post" action="/hello/post">
8                <input type="text" name="message">
9                <input type="submit" value="send">
10            </form>
11        </div>
12    </body>
13

javascript
1var express = require('express');
2var router = express.Router();
3
4router.get('/', (req, res, next) => {
5    var data = {
6        title: 'Hello!',
7        content: 'Please write a something.'
8    };
9    res.render('hello', data);
10});
11
12router.post('/post',(req, res, next) => {
13    var msg = req.body['message'];
14    var data = {
15        title: 'Thank you for the message',
16        content: 'You send [' + msg + '].'
17    };
18    res.render('hello', data);
19});
20
21module.exports = router;
22

このプログラムを実行しwebページで動作を確認したところ、メッセージの入力フォームは動作しているのですがメッセージを送信するとエラーが出ます。

このフォームにhogeと入力し、sendボタンをクリックします。

するとこのようなメッセージが表示されます。

ejs側でundefindなのか、javascript側でundefindなのかよくわからず、原因と解決方法を教えていただきたいです。

行動規範の内容に同意します

回答1件

ベストアンサー

express express-test --view=ejs
でインストールして
cd express-test
npm install

app.js

js
1var createError = require('http-errors');
2var express = require('express');
3var path = require('path');
4var cookieParser = require('cookie-parser');
5var logger = require('morgan');
6
7var indexRouter = require('./routes/index');
8var usersRouter = require('./routes/users');
9var helloRouter = require('./routes/hello');
10
11var app = express();
12
13// view engine setup
14app.set('views', path.join(__dirname, 'views'));
15app.set('view engine', 'ejs');
16
17app.use(logger('dev'));
18app.use(express.json());
19app.use(express.urlencoded({ extended: false }));
20app.use(cookieParser());
21app.use(express.static(path.join(__dirname, 'public')));
22
23app.use('/', indexRouter);
24app.use('/users', usersRouter);
25app.use('/hello', helloRouter);
26
27// catch 404 and forward to error handler
28app.use(function(req, res, next) {
29  next(createError(404));
30});
31
32// error handler
33app.use(function(err, req, res, next) {
34  // set locals, only providing error in development
35  res.locals.message = err.message;
36  res.locals.error = req.app.get('env') === 'development' ? err : {};
37
38  // render the error page
39  res.status(err.status || 500);
40  res.render('error');
41});
42
43module.exports = app;

routes/hello.js

js
1var express = require('express');
2var router = express.Router();
3
4router.get('/', (req, res, next) => {
5    var data = {
6        title: 'Hello!',
7        content: 'Please write a something.'
8    };
9    res.render('hello', data);
10});
11
12router.post('/post',(req, res, next) => {
13    var msg = req.body['message'];
14    var data = {
15        title: 'Thank you for the message',
16        content: 'You send [' + msg + '].'
17    };
18    res.render('hello', data);
19});
20
21module.exports = router;

views/hello.ejs

ejs
1<body>
2  <head>
3      <h1><%= title %></h1>
4  </head>
5  <div role="main">
6      <p><%- content %></p>
7      <form method="post" action="/hello/post">
8          <input type="text" name="message">
9          <input type="submit" value="send">
10      </form>
11  </div>
12</body>

で問題なく動きました・・・再現しないですね・・・

package.json

json
1{
2  "name": "express-test",
3  "version": "0.0.0",
4  "private": true,
5  "scripts": {
6    "start": "node ./bin/www"
7  },
8  "dependencies": {
9    "cookie-parser": "~1.4.3",
10    "debug": "~2.6.9",
11    "ejs": "~2.5.7",
12    "express": "~4.16.0",
13    "http-errors": "~1.6.2",
14    "morgan": "~1.9.0"
15  }
16}

投稿2018/11/14 09:39

編集2018/11/14 10:11

rururu3

総合スコア5545

WK_ZAKK

2018/11/14 09:46

回答ありがとうございます。 Express Generatorを使ってアプリを作成しているため、body Parserは標準で組み込まれているようです。なので、困っております...

rururu3

2018/11/14 09:52

var bodyParser = require('body-parser') app.use(bodyParser.urlencoded({ extended: false })) この設定されてますか？

rururu3

2018/11/14 09:56

あ、express generatorですか・・・ちょっと試してみます

WK_ZAKK

2018/11/14 10:00

私がexpress generatorをインストールした際に var bodyParser = require('body-parser') app.use(bodyParser.urlencoded({ extended: false })) はapp.jsのコード内に書かれていなかったため書き足しましたが同じエラーが出力されました。初期状態では var bodyParser = require('body-parser') 及び app.use(bodyParser.urlencoded({ extended: false})) は書かれておらず、代わりに app.use(express.json()); app.use(express.urlencoded({ extended: false })); このコードが書かれていました。

WK_ZAKK

2018/11/14 10:01

すみませんありがとうございます！

WK_ZAKK

2018/11/14 10:25

そうですか...わざわざお時間を割いていただきありがとうございました。頂いたコードを参考に書き直してみます。ありがとうございました！

rururu3

2018/11/14 10:31

同じバージョン入れて試してみたいのでpackage.jsonの中身教えていただければ助かります

WK_ZAKK

2018/11/14 10:35

大変お恥ずかしいのですが、rururu3様より頂いた、app.jsのコードを書いてみた結果無事に動作いたしました。これからコードの中身がどのように動いているのか勉強させていただきます。