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

Question

##前提・実現したいこと
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に入力された情報の反映方法が分からず止まってしまっております。

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

Comments

[hoshi-takanori]

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

[moritat-222]

コメントありがとうございます。
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]

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

Answer 1

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

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

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

• テスト環境

name	version
macOS Catalina	v10.15.3
node	v10.20.1

• フォルダ構造

$ tree -I node_modules
├── app.js
├── routes
│   └── home
│       └── index.js
└── views
    ├── home.ejs
    └── register.ejs

• app.js

'use strict'
/***
 * 共通変数
 */
const path    = require('path');
const express = require('express');
const app     = express();
const route_home = require('./routes/home')

/***
 * 設定
 */

//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')
});

// ページの表示(レスポンス)をrouter(/routes/home/index.js)に任せる
app.use('/home', route_home);

app.listen(3001, () => {
 console.log('server is up on port 3001')
})

• routes/home/index.js

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

/* GETアクセスの時に使用 */
router.get('/', function(req, res) {
    // views/home/index.jsを参照する
    res.render('home');
});

/* POSTアクセスの時に使用 */
router.post('/', function(req, res) {
  const _username = req.body.username;
  // usernameを渡す + views/home/index.jsを参照する
  res.render('home', {username: _username});
});

// 上記routerを別フォルダから参照できるようにする
module.exports = router;

• view/home.ejs

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

• views/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>
    <dd><input type="submit" value="Send Request"></dd>
</dl>
</form>

次につながるヒント

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

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

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

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

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

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

Comments

[moritat-222]

amezousan様

丁寧な回答をいただき本当にありがとうございます。
無事実装できました。

expressとrouteの違い
Viewとrouteのパスの役割の違い
getとpostの違い

をちゃんと理解して、さらなる学習に努めます。

「3分間ネットワーキング」のサイトも教えていただきありがとうございます。
HTTPのリクエストやネットワークについて、まだちゃんと理解できていないため、
こちらのサイトで勉強したいと思います。

[amezousan]

お役に立てて光栄です。これからも応援しています。