IT

【Node.js】Express × MySQLでREST APIをつくる方法

1. REST APIの全体構成

今回のREST API全体構成はつぎのような感じ。serverでAPIを作成し、src/app.jsからaxiosをつかって情報を取得してくるイメージ。

全体の感じがつかめたら、さっそくREST APIを実装していこう。

rest-api/
├─ .env # 環境変数作成
├─ package-lock.json # 自動生成
├─ package.json # 自動生成
│
├─ server/
│   ├─ app.js
│   ├─ main.js
│   │
│   └─ modules/
│       └─ user.js
│
└─ src/
    └─ app.js

ちなみに、あなたがWindowsなら手動でファイル作成はめんどくさいので、つぎのbatで作成してもOK。

@rem create-rest-api.bat

@echo off

md rest-api\src rest-api\server\modules

type null > rest-api\.env
type null > rest-api\server\main.js
type null > rest-api\server\app.js
type null > rest-api\server\modules\user.js

type null > rest-api\src\app.js

2. 必要なパッケージをnpmでインストールする

まず、npmでREST API作成に必要なモジュールをインストールしていく。

つぎのようにnpm iでいっきにインストールしていこう。
インストールしたら、npm listでインストールされているか確認すること。

# はじめに初期化しておく。初期化が済んでいればインストールへ進む
$ npm init

$ npm i mysql2 express morgan cors axios dotenv
$ npm i -g nodemon

# -- インストールするモジュール内容 --
# mysql2 -- MySQL接続モジュール
# express -- WEBサーバ作成モジュール
# morgan -- WEBサーバのLog出力モジュール
# cors -- クロスオリジンに対応するモジュール
# axios -- APIに接続するためのモジュール
# dotenv -- .envファイルから環境変数を読み込むためのモジュール
# nodemon -- expressサーバーをデーモン化するモジュール

$ npm list
$ npm -g list

3. MySQLでuserテーブルをつくっていく

MySQLでは、MySQL Workbenchをインストールすると簡単にSQLが書けるようになるのでぜひインストールしておこう。

まずはmanagementという名前のDBを作成。

CREATE DATABASE IF NOT EXISTS `management`;

つぎにuserテーブルをDBに作成。user_id、username、emailをつくって、user_idをプライマリーキーにしていこう。

CREATE TABLE management.user (
	user_id INT(255) NOT NULL AUTO_INCREMENT,
	username VARCHAR(50) NOT NULL,
	email VARCHAR(50) NOT NULL,
	PRIMARY KEY (user_id)
);

さいごにuserテーブルへデータを挿入すればOK。

INSERT INTO management.user (username, email)
VALUES ("saito", "info@ziyuss.jp"),
	("tanaka", "info@tanaka.com"),
	("yamada", "info@yamada.com");

4. envで環境変数を設定しておく

dotenvモジュールをインストールすると、プロジェクトディレクトリ直下へ.envファイル(最初の.も必要)を作成すると環境変数として機能する。

つぎのように、.envファイルを作成し、ユーザーネーム、パスワードをあなたのMySQLで設定した内容に変更しておこう。

# .env

# MySQL データベース設定
DB_NAME = "management"
DB_USER = "ここにDBユーザーネーム"
DB_PASSWORD = "ここにDBパスワード"
DB_HOST = "localhost"

# サーバー設定
SERVER_PORT = "3001"

5. server/modules/user.jsにMySQLに紐づく処理を作成する

ここでは8ステップでuser.jsにMySQLに紐づく処理を作成する。server/modulesにuser.js というファイルを作成できたらステップ1へ進もう。

ステップ1: 必要なモジュールのインポート

user.jsでは、dotenvとmysql2をインポートするだけでOK。

// server/modules/user.js

require("dotenv").config();
const mysql = require("mysql2");

ステップ2: DBの設定

ここではMySQLに接続するために必要な処理をかいていく。基本的には、.envファイルで作成した環境変数をcreateConnectionへ設定するだけ。

process.env.{環境変数名} で.env内のファイルが読み込まれる。
// server/modules/user.js へ追加

const connection = mysql.createConnection({
    host: process.env.DB_HOST,
    user: process.env.DB_USER,
    password: process.env.DB_PASSWORD,
    database: process.env.DB_NAME,
});

ステップ3: user情報をすべて取得する処理

ここから実際にAPIを作成していく。

まずは、userデータすべてを取得してくる。
server/app.jsで記載するが、APIエンドポイントは、/user となる。

つぎのコードをuser.jsに追加していこう。

// server/modules/user.js へ追加

const getUserAll = (req, res) => {
    const query = "SELECT * FROM user";

    connection.query(query, (error, results) => {
        if (error) throw error;
        res.send(results);
    });
};

ステップ4: user情報を取得する処理

つぎに1ユーザーごとのuser情報を取得するAPIを作成する。
ここでのAPIエンドポイントは、/user/:userId となる。

つぎのコードをuser.jsへ追加していこう。

req.params.{urlの:から始まる名前} で値が取得できる。
// server/modules/user.js へ追加

const getUser = (req, res) => {
    const query = "SELECT * FROM user WHERE user_id = ?";
    const params = [req.params.userId];

    connection.query(query, params, (error, results) => {
        if (error) throw error;
        res.send(results);
    });
};

ステップ5: user情報の登録処理

つぎはuser情報の取得ではなく、userの登録をするAPIを作成していく。
ここでのエンドポイントは、/user となる。

postメソッドをつかい、req.bodyへ値を渡しuserへ新規登録する。つぎのコードをuser.jsへ追加していこう。

req.body.{postで送信されたデータ名} で値が取得できる。
// server/modules/user.js へ追加

const postUser = (req, res) => {
    const query = "INSERT INTO user (username, email) VALUES (?, ?)";
    const params = [req.body.username, req.body.email];

    connection.query(query, params, (error, results) => {
        if (error) throw error;
        res.send(results);
    });
};

ステップ6: user情報の更新処理

さて、新規作成APIができたらつぎはAPIでデータを更新していく。
ここでのエンドポイントは、/user/:userId となる。

putメソッドをつかいデータを更新していく。つぎのコードをuser.jsへ追加していこう。

// server/modules/user.js へ追加

const putUser = (req, res) => {
    const query = "UPDATE user SET username = ?, email = ? WHERE user_id = ?";
    const params = [req.body.username, req.body.email, req.params.userId];

    connection.query(query, params, (error, results) => {
        if (error) throw error;
        res.send(results);
    });
};

ステップ7: user情報の削除処理

APIの最後は、user情報を削除するAPIを作成していく。
ここでのエンドポイントは、/user/:userIdとなる。

deleteメソッドをつかい、userデータを削除していく。つぎのコードをuser.jsへ追加していこう。

// server/modules/user.js へ追加

const deleteUser = (req, res) => {
    const query = "DELETE FROM user WHERE user_id = ?";
    const params = [req.params.userId];
    connection.query(query, params, (error, results) => {
        if (error) throw error;
        res.send(results);
    });
};

ステップ8: すべての関数式をエクスポート処理する

user.jsに記載する最後のコードは、エクスポート処理になる。このエクスポート処理をかかないと、他のJavaScriptファイルで読み込んでも各関数が使えないので必須で書いておくこと。

つぎのコードをuser.jsへ追加し保存しておこう。

// server/modules/user.js へ追加

module.exports = { getUserAll, getUser, postUser, putUser, deleteUser };

6. server/app.jsへ実際にAPIを作成していく

ここでは、server/app.jsへ実際にAPIを設定していく処理を書いていこう。

必要なモジュールをインポートし、ミドルウェアを設定、APIを設定の3ステップでコードを書いていく。serverフォルダにapp.jsを作成したらステップ1へ進もう。

ステップ1: 必要なモジュールをインポート

最初に必要なモジュールをインポートしよう。dotenv、cros、morgan、express、それとさっきつくったuser.jsをインポートしていく。

つぎのコードをserver/app.jsへ書いていこう。

// server/app.js

require("dotenv").config();
const cors = require("cors");
const morgan = require("morgan");
const user = require("./modules/user");

const express = require("express");
const app = express();

ステップ2: ミドルウェアを設定する

つぎにミドルウェアをExpressへ設定していく。ミドルウェアとは、みんなが使いそうな複雑な機能を1つにまとめたものと考えるといい。

つぎのコードをserver/app.jsへ追加していこう。

// server/app.js へ追加

app.use(cors());
app.use(morgan("dev"));
app.use(express.json());
app.use(express.urlencoded({ extended: true }));

ステップ3: user APIを設定しエクスポートする

さいごに、さっきつくったuser.jsをAPIに紐づけしていく。get、post、put、deleteへそれぞれAPIを設定する。

つぎのコードをserver/app.jsへ追加していこう。

// server/app.js へ追加

app.get("/user", user.getUserAll);
app.get("/user/:userId", user.getUser);
app.post("/user", user.postUser);
app.put("/user/:userId", user.putUser);
app.delete("/user/:userId", user.deleteUser);

module.exports = app;

7. server/main.jsで実際に起動するファイルを作成する

serverで最後に作成するのはmain.js。

このmain.jsを実行することでサーバーを起動していく。つぎのように、さっきエクスポート処理をしたserver/app.jsをインポートしてコードを書いていけばOK。

// server/main.js

const app = require("./app");

/* Listening */
app.listen(process.env.SERVER_PORT, () => {
    console.log(`Listening on http://localhost:${process.env.SERVER_PORT}`);
});

8. nodemonでexpressサーバーをデーモン化する

expressをデーモン化とよばれる方法をつかい、expressサーバーをバックグラウンドで実行し続けるようにする作業をしていく。

rest-apiフォルダ直下へ移動し、つぎのコマンドを実行してみよう。

$ nodemon ./server/main.js

nodemon公式ドキュメントはこちら

9. src/app.jsにaxiosをつかってAPIデータを取得してくる

さて、さいごにAPIが作成できているか、axiosモジュールをつかってAPIデータを取得、登録、更新、削除をしていこう。

基本的に、つぎのコマンドを実行して確認していく。

$ node ./src/app.js

すべてのユーザーデータを取得

つぎのコードを実行すると、ユーザー情報がすべて取得されたオブジェクトが作成される。

// src/app.js

const axios = require("axios");

axios.get("http://localhost:3001/user")
    .then((result) => console.log(result))
    .catch((error) => console.log(error));

任意のユーザーデータを取得

つぎのコードを実行すると、user/{user_id}で指定したユーザー情報が取得されたオブジェクトが作成される。

user/{user_id}の値を変更すると他のユーザーが取得できるので変更して実行してみよう。

// src/app.js

const axios = require("axios");

axios.get("http://localhost:3001/user/1")
    .then((result) => console.log(result))
    .catch((error) => console.log(error));

ユーザーを新規登録

つぎのコードを実行すると、新規にsato、info@sato.comが追加されたユーザー情報が登録される。コードを実行したあと、すべてのユーザーデータを取得ですべてのユーザーを取得してみよう。

// src/app.js

const axios = require("axios");
const data = {
    username: "sato",
    email: "info@sato.com",
};

axios.post("http://localhost:3001/user", data)
    .then((result) => console.log(result.data))
    .catch((error) => console.log(error));

任意のユーザーデータの更新

つぎのコードを実行すると、user_idが1のユーザー情報をsatou、info@satou.comに更新する。コードを実行したあと、すべてのユーザーデータを取得ですべてのユーザーを取得してみよう。

user/{user_id}の値を変更すると他のユーザーが更新される。

// src/app.js

const axios = require("axios");
const data = {
    username: "satou",
    email: "info@satou.com",
};

axios.put("http://localhost:3001/user/1", data)
    .then((result) => console.log(result))
    .catch((error) => console.log(error));

任意のユーザーデータの削除

つぎのコードを実行すると、user_idが2のユーザーが削除される。コードを実行したあと、すべてのユーザーデータを取得ですべてのユーザーを取得してみよう。

user/{user_id}の値を変更すると他のユーザーが削除される。

// src/app.js

const axios = require("axios");

axios.delete("http://localhost:3001/user/2")
    .then((result) => console.log(result))
    .catch((error) => console.log(error));

まとめ: REST APIをつかってWEBアプリ開発をしてみよう

Expressをつかえば、比較的簡単にREST APIを作成可能だ。Expressでサーバーサイドを作成し、そのままVue.jsなどもつかえば素早くWEBアプリもつくれる。

JavaScriptだけでWEBアプリのほとんどがつくれるようになるのでぜひ活用していこう。