【Node.js + Express】ExpressでREST APIを開発してみる〜登録・更新・削除

2021.10.11(Mon)

データベースにデータを登録するAPI

まず、データベースにデータを登録するAPIを作っていきます。

前回のデータを引き続き使います。

meibo.jsを開いて、下記を記述してください。

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

const pool = require("../db/pool");

//データ全件取得API
router.get("/", function (req, res, next) {
  pool.query("SELECT * FROM meibo", function (error, result) {
    if (error) {
      throw error;
    }
    res.status(200).json({
      data: result.rows,
    });
  });
});

//データid検索API
router.get("/:id", function (req, res, next) {
  const id = req.params.id;
  pool.query("SELECT * FROM meibo where id = $1", [id], function (
    error,
    result
  ) {
    if (error) {
      throw error;
    }
    res.status(200).json({
      data: result.rows,
    });
  });
});

//データ登録API　追加
router.post("/", function (req, res, next) {
  const LENGTH = 10;
  const SOURCE = "abcdefghijklmnopqrstuvwxyz0123456789";
  let result = "";
  for (let i = 0; i < LENGTH; i++) {
    result += SOURCE[Math.floor(Math.random() * SOURCE.length)];
  }
  const { name, intro } = req.body.meibo_data;
  pool.query(
    "INSERT INTO meibo VALUES ($1, $2, $3)",
    [result, name, intro],
    function (error, results) {
      if (error) {
        res.status(500).json({
          status: "500 Internal Server Error",
          error: error,
        });
      }
      res.status(201).json({
        status: "success",
      });
    }
  );
});

module.exports = router;

今回はデータを送るPOSTですので、.post()で記述します。

今回、idのカラムには10桁のランダムな英数字が入るので、ランダムな文字列を生成するプログラムを書きます。

  const LENGTH = 10;
  const SOURCE = "abcdefghijklmnopqrstuvwxyz0123456789";
  let result = "";
  for (let i = 0; i < LENGTH; i++) {
    result += SOURCE[Math.floor(Math.random() * SOURCE.length)];
  }

上記で「abcdefghijklmnopqrstuvwxyz0123456789」を10桁でランダムに組み合わせます。

登録するデータはリクエストボディにjson形式で入れてPOSTします。

リクエストボディとは、Web APIなどでHTTP通信によってデータを送る際に、データを格納しておく場所のことです。

今回はこのリクエストボディ内に登録するデータを全て格納しておいて、送ります。

ですので、まずリクエストボディからデータを全て取得する必要があります。

それが下記の部分です。

const { name, intro } = req.body.meibo_data;

取ってきたリクエストボディはmeibo_dataという中にnameとintroの二つが入っているという形式ですので、上記のように書きます。

最後に.queryでSQLコマンドを実行して、データベースにデータを登録するところです。

GETの時と同じように第一引数にSQLコマンドを入れるのですが、今回は第二引数に登録データの値を入れます。そして、第3引数には関数を入れてGETの時と同様にエラー時の処理と、成功時の処理を書きます。

今回は成功した際には「success」という文字列をコンソールとして出力するようにしています。

  pool.query(
    "INSERT INTO meibo VALUES ($1, $2, $3)",
    [result, name, intro],
    function (error, results) {
      if (error) {
        res.status(500).json({
          status: "500 Internal Server Error",
          error: error,
        });
      }
      res.status(201).json({
        status: "success",
      });
    }
  );

さてここまでできたら、保存して、「npm start」でサーバーを起動しましょう。

そして、Postmanで下記のように入力してください。

POSTで「http://localhost:3000/meibo/」を入力し、その下のタブでBodyを選択して、下記のように入力してください。

{
    "meibo_data": {
            "name": "スティーブ",
            "intro": "26歳のエンジニアです。趣味は映画鑑賞です。"
    }
}

これで「Send」ボタンを押してください。

すると下記のように「success」のメッセージが表示されると思います。

さて成功したようです。

GETに変えて、全件データを取得してみましょう。

下記のように「スティーブ」のデータが登録されていれば成功です。

データベースのデータを更新するAPI

さて続いては、データを更新するAPIを作ってみます。

更新はGETでもPOSTでもなく「PUT」を使います。

まず、meibo.jsを開いて、下記を記述してください。

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

const pool = require("../db/pool");

//データ全件取得API
router.get("/", function (req, res, next) {
  pool.query("SELECT * FROM meibo", function (error, result) {
    if (error) {
      throw error;
    }
    res.status(200).json({
      data: result.rows,
    });
  });
});

//データid検索API
router.get("/:id", function (req, res, next) {
  const id = req.params.id;
  pool.query("SELECT * FROM meibo where id = $1", [id], function (
    error,
    result
  ) {
    if (error) {
      throw error;
    }
    res.status(200).json({
      data: result.rows,
    });
  });
});

//データ登録API
router.post("/", function (req, res, next) {
  const LENGTH = 10;
  const SOURCE = "abcdefghijklmnopqrstuvwxyz0123456789";
  let result = "";
  for (let i = 0; i < LENGTH; i++) {
    result += SOURCE[Math.floor(Math.random() * SOURCE.length)];
  }
  const { name, intro } = req.body.meibo_data;
  pool.query(
    "INSERT INTO meibo VALUES ($1, $2, $3)",
    [result, name, intro],
    function (error, results) {
      if (error) {
        res.status(500).json({
          status: "500 Internal Server Error",
          error: error,
        });
      }
      res.status(201).json({
        status: "success",
      });
    }
  );
});

//データ更新API 追加
router.put("/:id", function (req, res, next) {
  const id = req.params.id;
  const { name, intro } = req.body.meibo_data;
  pool.query(
    "UPDATE meibo SET name = $1, intro = $2 WHERE id = $3",
    [name, intro, id],
    function (error, results) {
      if (error) {
        res.status(500),
          json({
            status: "500 Internal Server Error",
            error: error,
          });
      }
      if (results.rowCount === 0) {
        res.status(400).json({
          status: "400 Bad Request",
          message: "データが存在しません",
        });
      } else {
        res.status(200).json({
          status: "success",
        });
      }
    }
  );
});

module.exports = router;

登録APIの下に追記しました。

今回はパスパラメーターでidを送り、そのidカラムがパラメーターで送った値のデータに対して、リクエストボディに入れたデータに更新するという流れにします。

下記で、パラメータとリクエストボディの値を取得します。

  const id = req.params.id;
  const { name, intro } = req.body.meibo_data;

SQLコマンドは「update set」を使います。

whereで更新するデータをidで指定します。

データが見つからなかった際はステータス400で「データが存在しません」という文字列を出します。

成功した場合は「success」を返すようにしましょう。

  pool.query(
    "UPDATE meibo SET name = $1, intro = $2 WHERE id = $3",
    [name, intro, id],
    function (error, results) {
      if (error) {
        res.status(500),
          json({
            status: "500 Internal Server Error",
            error: error,
          });
      }
      if (results.rowCount === 0) {
        res.status(400).json({
          status: "400 Bad Request",
          message: "データが存在しません",
        });
      } else {
        res.status(200).json({
          status: "success",
        });
      }
    }
  );

さてこれで試してみましょう。

Postmanを開いて、下記のようにパスパラメータとリクエストボディにデータを入れましょう。

「ジェシカ」のデータを「エマ」に書き換えてみましょう。

URI入力欄の左のプルダウンでは「PUT」を選択しましょう。

これで「Send」ボタンを押しましょう。

すると「success」という文字列が表示されます。

その後、GETで「http://localhost:3000/meibo/」を入力して、前データを取得しましょう。

下記のように、「ジェシカ」のデータが「エマ」に更新されていれば、成功です。

データベースのデータを削除するAPI

最後にデータベースからデータを削除するAPIを作っていきましょう。

meibo.jsを開いて、下記のように記述してください。

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

const pool = require("../db/pool");

//データ全件取得API
router.get("/", function (req, res, next) {
  pool.query("SELECT * FROM meibo", function (error, result) {
    if (error) {
      throw error;
    }
    res.status(200).json({
      data: result.rows,
    });
  });
});

//データid検索API
router.get("/:id", function (req, res, next) {
  const id = req.params.id;
  pool.query("SELECT * FROM meibo where id = $1", [id], function (
    error,
    result
  ) {
    if (error) {
      throw error;
    }
    res.status(200).json({
      data: result.rows,
    });
  });
});

//データ登録API
router.post("/", function (req, res, next) {
  const LENGTH = 10;
  const SOURCE = "abcdefghijklmnopqrstuvwxyz0123456789";
  let result = "";
  for (let i = 0; i < LENGTH; i++) {
    result += SOURCE[Math.floor(Math.random() * SOURCE.length)];
  }
  const { name, intro } = req.body.meibo_data;
  pool.query(
    "INSERT INTO meibo VALUES ($1, $2, $3)",
    [result, name, intro],
    function (error, results) {
      if (error) {
        res.status(500).json({
          status: "500 Internal Server Error",
          error: error,
        });
      }
      res.status(201).json({
        status: "success",
      });
    }
  );
});

//データ更新API
router.put("/:id", function (req, res, next) {
  const id = req.params.id;
  const { name, intro } = req.body.meibo_data;
  pool.query(
    "UPDATE meibo SET name = $1, intro = $2 WHERE id = $3",
    [name, intro, id],
    function (error, results) {
      if (error) {
        res.status(500),
          json({
            status: "500 Internal Server Error",
            error: error,
          });
      }
      if (results.rowCount === 0) {
        res.status(400).json({
          status: "400 Bad Request",
          message: "データが存在しません",
        });
      } else {
        res.status(200).json({
          status: "success",
        });
      }
    }
  );
});

//データ削除API　追加
router.delete("/:id", function (req, res, next) {
  const id = req.params.id;
  pool.query("DELETE FROM meibo WHERE id = $1", [id], function (
    error,
    results
  ) {
    if (error) {
      res.status(500),
        json({
          status: "500 Internal Server Error",
          error: error,
        });
    }
    if (results.rowCount === 0) {
      res.status(400).json({
        status: "400 Bad Request",
        message: "データが存在しません",
      });
    } else {
      res.status(200).json({
        status: "success",
        message: "データを削除しました。",
      });
    }
  });
});

module.exports = router;

更新APIの下に追記しました。

削除は「.delete()」を使います。

パスパラメーターでidを取得し、whereを使ってそのidと一致するデータを削除するという流れです。

下記でパラメーターを取得します。

const id = req.params.id;

そして、下記のようにデータを削除します。

  pool.query("DELETE FROM meibo WHERE id = $1", [id], function (
    error,
    results
  ) {
    if (error) {
      res.status(500),
        json({
          status: "500 Internal Server Error",
          error: error,
        });
    }
    if (results.rowCount === 0) {
      res.status(400).json({
        status: "400 Bad Request",
        message: "データが存在しません",
      });
    } else {
      res.status(200).json({
        status: "success",
        message: "データを削除しました。",
      });
    }
  });

query()の第一引数にはdeleteのSQLコマンドを入れて、第二引数にはパラメーターから取得したidを入れます。

第三引数には関数を入れて、その中にはエラーした際の処理、データが存在しなかった時の処理、成功した際の処理を記述します。

成功した際には「データを削除しました。」というメッセージを返します。

さて、下記のようにPostmanにて「http://localhost:3000/meibo/s79evqosp1」を実行してみましょう。

「スティーブ」のデータを削除してみましょう。

これで「Send」ボタンを実行して、「データを削除しました。」というメッセージが返ってきたら、成功です。

GETでデータを全件取得するAPIを実行して、確認してみましょう。

「スティーブ」のデータが消えているはずです。

まとめ

今回は、2回に分けて、ExpressでのREST APIの概要とデータの取得、絞り込み取得、登録、更新、削除のAPIの作り方を見てきました。

これらのAPIをクライアント側で叩けば、データベースでデータのやりとりができる簡単なアプリケーションの開発が可能になります。

また別記事でNuxt.jsにて、Expressで作ったAPIを叩くというのもやってみたいと思います。

それでは今回はここまで！

お疲れ様でした。

Web開発

【Nuxt.js + Express】Expressで開発し……
2021.10.27
Web開発

【Vue + vue-cli】Vueのデータバインディングま……
2021.6.28
Web開発

【Nuxt.js + Element】Nuxt.jsでEle……
2021.7.20
バックエンド開発

【Node.js】ejsを使ってページを表示する
2021.8.25
Web開発

【Vue + vue-cli】vue-routerの基本的な……
2021.6.15
Web開発

【Vue + Nuxt.js】Nuxt.jsの構造とHell……
2021.7.13
Web開発

【Vue + vue-cli】method、computed……
2021.6.19
Web開発

【React.js】React.jsとは？環境構築やHell……
2023.4.12
Web開発

【Ajax】Ajax通信とは？概要と使い方
2021.6.20
Web開発

【Vue + vue-cli】Vueにおけるライフサイクルに……
2021.6.16
バックエンド開発

【Node.js + Express】Nodeのフレームワー……
2021.9.26
Web開発

【Vue + Nuxt.js】Nuxt.jsとは？〜環境構築……
2021.7.12
Web開発

【Vue + Nuxt.js】Nuxt.jsでのVuexの使……
2021.7.26
Web開発

【Vue + vue-cli】vue-routerでパラメー……
2021.7.8
バックエンド開発

【Node.js + PostgreSQL】取得したデータを……
2021.9.26
バックエンド開発

【Express + JWT】ExpressでJWTを使った……
2021.11.24
バックエンド開発

【Node.js】アクセスされたURLの取得と処理の振り分け
2021.8.3
Web開発

【Nuxt.js + Auth認証】Nuxt.jsでAuth……
2021.12.9
バックエンド開発

【Node.js + Express】ミドルウェアを使ってみ……
2021.9.29
バックエンド開発

【Node.js】Node.jsで簡易的なサーバーを起動して……
2021.8.2

Web開発

【Vue + Nuxt.js】Nuxt.……

2021.7.12

バックエンド開発

【Node.js + Express】リ……

2021.9.28

Web開発

【Vue + vue-cli】vue-c……

2021.6.10

【Node.js + Express】ExpressでREST APIを開発してみる〜登録・更新・削除

目次

データベースにデータを登録するAPI

データベースのデータを更新するAPI

データベースのデータを削除するAPI

まとめ

【Nuxt.js + Express】Expressで開発し……

【Vue + vue-cli】Vueのデータバインディングま……

【Nuxt.js + Element】Nuxt.jsでEle……

【Node.js】ejsを使ってページを表示する

【Vue + vue-cli】vue-routerの基本的な……

【Vue + Nuxt.js】Nuxt.jsの構造とHell……

【Vue + vue-cli】method、computed……

【React.js】React.jsとは？環境構築やHell……

【Ajax】Ajax通信とは？概要と使い方

【Vue + vue-cli】Vueにおけるライフサイクルに……

【Node.js + Express】Nodeのフレームワー……

【Vue + Nuxt.js】Nuxt.jsとは？〜環境構築……

【Vue + Nuxt.js】Nuxt.jsでのVuexの使……

【Vue + vue-cli】vue-routerでパラメー……

【Node.js + PostgreSQL】取得したデータを……

【Express + JWT】ExpressでJWTを使った……

【Node.js】アクセスされたURLの取得と処理の振り分け

【Nuxt.js + Auth認証】Nuxt.jsでAuth……

【Node.js + Express】ミドルウェアを使ってみ……

【Node.js】Node.jsで簡易的なサーバーを起動して……

【Vue + Nuxt.js】Nuxt.……

【Node.js + Express】リ……

【Vue + vue-cli】vue-c……