先日は一覧を取得するAPIを作りましたので今日はPOSTしたデータを登録するAPIを作ります。登録機能は認証も必要ですが後回しにしてまずは登録を優先します。

やりたいこと

・画面上に入力フォームを設置してボタンを押下でPOSTリクエストを送る
　登録APIのエンドポイントは /api/work
・POSTリクエストを受け取りBODYの内容をDBにINSERTする

画面の作成

ソースコードが長くなってきたので要点だけ記載します。ファイルが確認したい場合はgitを参照お願いいたします。ボタンを押下すると入力内容をPOSTでリクエスト送付します。レスポンスを受けて画面を更新するなどが通常の動きですがここでは省略します。

pages/work.tsx

const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
  event.preventDefault();
  let data = new FormData(event.currentTarget);
  axios.post("/api/work",{
    name: data.get('textinput')
  }).then((res) => {
    console.log(res);
  });
};
//・・・中略・・・
        <Box component="form" noValidate onSubmit={handleSubmit} >
          <Grid item xs={12}>
                <TextField
                  required
                  name="textinput"
                  label="作業名"
                  type="text"
                  id="textinput"
                  fullWidth
                />
              </Grid>
            <Button
              type="submit"
              fullWidth
              variant="contained"
              sx={{ mb: 2 }}
            >登録</Button>
        </Box>

APIの作成

登録先テーブルのイメージ

CREATE TABLE Test(
  id TEXT PRIMARY KEY,
  name TEXT,
  create_at TEXT
);

API部分です。画面から送付するのはnameだけです。idはUUIDを生成して登録します。create_atは処理時刻を取得して登録します。

api/work.tsx

import { NextApiRequest, NextApiResponse } from "next";
import { v4 as uuidv4 } from "uuid";

export default (req: NextApiRequest, res: NextApiResponse) => {
    const method = req.method;
    const nowtime = new Date();
    const datetime = nowtime.getFullYear() + (nowtime.getMonth() + 1) + nowtime.getDate() + " " + 
				nowtime.getHours() + nowtime.getMinutes() + nowtime.getSeconds();
    switch (method) {
      case 'POST': {
        const { name } = req.body;
        const sqlite3 = require("sqlite3");
        const db = new sqlite3.Database("./test.db");
        const result = db.run("insert into Test(id, name, create_at) values(?,?,?)", uuidv4(), name, datetime);
        res.status(200).json({ result });
        break;
      }
      default: {
        res.status(403).end();
      }
    }
}

画面の動き

入力欄とボタンを設置して入力欄に文字列を入れてボタンを押下します

再度画面をリロードすると登録した内容が表示できます（日付が想定外なので後で直します）

この後で更新と削除も実装できればと思います。Node.jsから直接DB接続するのではなくDB接続用のアプリを作る方がマイクロサービスっぽいかと思いますが、規模の小さい開発なのでこれでいきます。

AWSの知識を棚卸ししていましたがaurora serverlessみたいな機能もあることを初めて知りました・・・！NodeにはNodeの長所を生かして、他のソフトウェアも長所を生かした美味しいとこどりの構成を作れるか？が特に重要ですし、パブリッククラウドなど色々な機能やソフトウェアを利用しやすい現代において実力差が出やすいと改めて感じます。

独自環境に慣れすぎてその環境の標準しか選択肢がない場合、その環境から外に出ると選択肢が少なすぎてすごく苦労しますし、常に理想の構成を追い求めていきたいですね！環境によってはコスパを重視したり、パフォーマンスを重視したり、と評価基準も異なるので落とし所を見極める視野の広さも身につけたい。。