【Node.js】フォームでPOSTした値を別のページから取得する方法

##前提・実現したいこと
Node.jsとExpressを使用したサイトを作成しています。
/registerというパスにあるフォームに入力した値を取得し/homeというパスのページに表示する予定です。
Postメソッドを利用して入力した値を取得するのだと思うのですが、調べても実装してもうまくいかず、アドバイスをいただきたいです。

よろしくお願いたします。

##試したこと①

・ドットインストールのExpress講座、Expressの公式ドキュメント（https://expressjs.com/en/guide/routing.html）を参考に実装

・app.js

'use strict'
const path = require('path');
const express = require('express');
const app = express();
//POSTのミドルウェア
app.use(express.json());
app.use(express.urlencoded());
//テンプレートエンジンの設定
const viewsPath = path.join(__dirname, './views')
const publicDirectoryPath = path.join(__dirname, './public')
app.set('view engine', 'ejs');
app.set('views', viewsPath)
app.use(express.static(publicDirectoryPath));

app.get('/register', (req, res) => {
 res.render('./register.ejs')
});
app.get('/home', (req, res) => {
 res.render('./home.ejs')
});
app.post('/home', (req, res)=>{
 res.send(req.body.username);
})
app.listen(3001, () => {
 console.log('server is up on port 3001')
})

・register.ejs（フォームの箇所）

<form action="/home" method="post">
    <dl>
     <dt>Name:　</dt>
     <dd><input type="text" id="name" name="username"></dd>
     <dt>E-Mail Address:　</dt>
     <dd><input type="text" id="email"></dd>
     <dt>Password:　</dt>
     <dd><input type="password" id="password"></dd>
     <dt>Confirm Password:　</dt>
     <dd><input type="password" id="passConfirm"></dd>
    </dl>
   </form>

結果
画面遷移しても、usernameの値が/homeの画面に反映されない。
Console, Morgan に動きなし

##試したこと②

【初心者でもOK】Node+Expressで簡単なフォームを実装！（https://qiita.com/watsuyo_2/items/327b74d68f921dbdd524）を参考に実装

・app.js

'use strict'
const path = require('path');
const express = require('express');
const app = express();
const router = express.Router();
//POSTのミドルウェア
app.use(express.json());
app.use(express.urlencoded());
//テンプレートエンジンの設定
const viewsPath = path.join(__dirname, './views')
const publicDirectoryPath = path.join(__dirname, './public')
app.set('view engine', 'ejs');
app.set('views', viewsPath)
app.use(express.static(publicDirectoryPath));
app.use(morgan({format: 'dev', immediate: true}));

router.get('/register', (req, res, next) => {
  res.render('./register.ejs')
});
router.post('/home', (req, res) => {
  var name = req.body['username'];
  var data = {
    username: name
  }
  res.render('./home.ejs')
});
app.listen(3001, () => {
  console.log('server is up on port 3001')
})

結果
/registerにアクセスすると、
Cannot GET /register
というエラーが出てしまう

##試したこと③
試したこと③
Node.js: request モジュールを使って POST リクエストを行う（https://blog.sarabande.jp/post/52117191060）
こちらのサイトで紹介されているように
var options = {
uri: 'http://localhost:9000/',
form: { name: 'テストユーザー' },
json: true
};
という形で/homeに引き渡す情報を書くのかとも思ったのですが、
/registerに入力された情報の反映方法が分からず止まってしまっております。

よろしくお願い致します。

hoshi-takanori

2020/06/02 12:45

HTTP の仕組み上、POST /register の内容を GET /home で受け取ることはできませんし、そもそも複数の人が POST /register したら GET /home でそれを区別することができません。このため、POST /register の内容をデータベースか何かに保存して、かつ session id か何かを cookie で送ってその人が POST /register した内容を他の人が POST /register したものを区別する必要があります。

moritat-222

2020/06/03 14:01

コメントありがとうございます。 POST/registerしたものからGET/homeで値を受け取ることはできない、ということですね。ただ、私の参考にしたサイト（【初心者でもOK】Node+Expressで簡単なフォームを実装！（https://qiita.com/watsuyo_2/items/327b74d68f921dbdd524）、Node.js: request モジュールを使って POST リクエストを行う（https://blog.sarabande.jp/post/52117191060）など）を見る限り、データベースを使用しなくても、HTTPで値を送る方法があるようです。それを実装したいのですが、サイトから実装を再現できず困っています・・・

hoshi-takanori

2020/06/03 14:35

リンク先を見る限り、受け取ったデータをそのまま表示してるだけですね。その後別のページに遷移したら情報は消えますよ。

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

回答1件

ベストアンサー

質問者さんが実践したい内容を、

/registerというパスにあるフォームに入力した値を取得し/homeというパスのページに表示する

と解釈した上で説明します。質問者さんの「試したこと①」のコードをもとに自分なりに付け加えてみました。手元の環境で動作確認済みですがいかがでしょうか。

テスト環境

name	version
macOS Catalina	v10.15.3
node	v10.20.1

フォルダ構造

bash
1$ tree -I node_modules
2├── app.js
3├── routes
4│   └── home
5│       └── index.js
6└── views
7    ├── home.ejs
8    └── register.ejs

app.js

js
1'use strict'
2/***
3 * 共通変数
4 */
5const path    = require('path');
6const express = require('express');
7const app     = express();
8const route_home = require('./routes/home')
9
10/***
11 * 設定
12 */
13
14//POSTのミドルウェア
15app.use(express.json());
16app.use(express.urlencoded());
17//テンプレートエンジンの設定
18const viewsPath = path.join(__dirname, './views')
19const publicDirectoryPath = path.join(__dirname, './public')
20app.set('view engine', 'ejs');
21app.set('views', viewsPath)
22app.use(express.static(publicDirectoryPath));
23
24/***
25 * メイン処理
26 */
27app.get('/register', (req, res) => {
28 res.render('./register.ejs')
29});
30
31// ページの表示(レスポンス)をrouter(/routes/home/index.js)に任せる
32app.use('/home', route_home);
33
34app.listen(3001, () => {
35 console.log('server is up on port 3001')
36})

routes/home/index.js

js
1const express = require('express');
2const router  = express.Router();
3
4/* GETアクセスの時に使用 */
5router.get('/', function(req, res) {
6    // views/home/index.jsを参照する
7    res.render('home');
8});
9
10/* POSTアクセスの時に使用 */
11router.post('/', function(req, res) {
12  const _username = req.body.username;
13  // usernameを渡す + views/home/index.jsを参照する
14  res.render('home', {username: _username});
15});
16
17// 上記routerを別フォルダから参照できるようにする
18module.exports = router;

view/home.ejs

こんにちは！
<% if (locals.username) { %>
<%= username %> さん
<% } %>

views/register.ejs

html
1<form action="/home" method="post">
2<dl>
3    <dt>Name:　</dt>
4    <dd><input type="text" id="name" name="username"></dd>
5    <dt>E-Mail Address:　</dt>
6    <dd><input type="text" id="email"></dd>
7    <dt>Password:　</dt>
8    <dd><input type="password" id="password"></dd>
9    <dt>Confirm Password:　</dt>
10    <dd><input type="password" id="passConfirm"></dd>
11    <dd><input type="submit" value="Send Request"></dd>
12</dl>
13</form>

次につながるヒント

初心者の頃は何も分からずに色んなサイトのコードをコピペしがちです。(自分もそうでした)自分がやりたいことを「コードを書く前に明確にする」ことをオススメします。

自分もこの手のコードを書くのが初めてだったので、まずは

「express」と「route」の違いを理解する
viewとrouteの役割を理解する
具体的にどのような書き方ができるのかを理解する

の順で今回の回答を書いています。

またDBはこの先コードがしっかりと書けるようになってから取り組むのが良いと思われます。HTTPメソッド(GET, POST)の理解はネットワークの基礎を含めて「3分間ネットワーキング」http://www5e.biglobe.ne.jp/aji/3min/で学ぶことができます。

これから更に難しい内容に挑戦されることと思いますがぜひ楽しみながら学んで見てください。成長した際には後輩やこの手のサイトで分からない人に説明して見てください、きっとその人の役に立つと思います。

投稿2020/06/03 17:26

amezousan

総合スコア9

moritat-222

2020/06/04 14:23

amezousan様丁寧な回答をいただき本当にありがとうございます。無事実装できました。 expressとrouteの違い Viewとrouteのパスの役割の違い getとpostの違いをちゃんと理解して、さらなる学習に努めます。「3分間ネットワーキング」のサイトも教えていただきありがとうございます。 HTTPのリクエストやネットワークについて、まだちゃんと理解できていないため、こちらのサイトで勉強したいと思います。