ハッカソン開発#4~Express.js での post dataの受け取りと reply data~

１月も終盤に迫りこのアプリケーションの開発期間も1か月を切りそうなのでさらに頑張っていきたいです。

この記事ではハッカソンのために作るアプリケーションの制作過程を記録したく、進捗や作業分を軽く書いてます。

やりたいこと

APIサーバーを Express.js で作ることにしたので記事のタイトルにあるようにpost で送られた data を受け取り、受け取った data に少し言葉を足した文章を返すところまでやりたいと思います。

やったこと

1.post の受け取り

app.js
+ var usersRouter = require("./routes/sample");

+ app.use("/sample", usersRouter);

routes/sample.js
+ var express = require("express");
+ var router = express.Router();

+ router.post("/hello", function (req, res, next) {
+  res.send("hello \n");
+ });

以上のコードを追加しローカルサーバー起動後、curlで確認していきます。

うまくpostを受けることが出来ました。

2.post data を受け取る

次に1のコードを少し変えpost data を受け取ることが出来ているか確認します。

routes/sample.js
var express = require("express");
var router = express.Router();

router.post("/hello", function (req, res, next) {
+ const text = {
+   world: req.body.world,
+ };

-  res.send("hello \n");
+  res.send("hello " + text.world + "\n");
});

こちらも以上のコードを編集しローカルサーバー起動後、curlで確認していきます。

うまくpost data を受けることが出来ました。

3.post json data を受け取る

実際はjson data をやり取りしたいので json data の受け取りを確認していきたいと思います。

以前の Express.js では json を受け取るためには Body-Parser をインストールしなければいけなかったのですが最新版では標準で搭載されているのでインストールする必要がなくなりました。

app.js
app.use(express.json());
app.use(express.urlencoded({ extended: true })); //標準では false なので true に直す
//この２行がBody-Parserの代わり

Express — body-parser and why may not need it

さらに2のコードを少し変え確認します。

routes/sample.js
var express = require("express");
var router = express.Router();

router.post("/hello", function (req, res, next) {
 const text = {
+   hello: req.body.hello,
   world: req.body.world,
 };

-  res.send("hello " + text.world + "\n");
+  res.send(text.hello + " " + text.world + "\n");
});

記述するほどの変更点はなかったですね...

こちらもローカルサーバー起動後、curlで確認していきます。

うまくpost で json data を受けることが出来ました。

これでこの記事での目標は達成できました。

次回やりたいこと

front部分を next.js で作っているのでここから post で data を送って Express.js を通してmongo db に保存していきたいです。