【超入門】Node.js(Express)を使ってCRUD操作が出来るAPIを作成

# 本記事について

本記事は、Node.jsを使ったAPI作成に関して、自身の忘備録としての側面が強いです。

基本的なCRUD操作が可能なAPIを作成する過程をまとめたので、誰かの参考になればと公開してみます。

# はじめに

### 利用するツール
Postman : APIの動作を確認するために利用します。

https://qiita.com/otohusan/items/43cbb61cfd177049d638

本記事で必要な操作は、こちらの記事でカバーしています。

## 実装

### コードを書く下準備

まずターミナルにて、ディレクトリ・ファイル作成とライブラリのインストールを行います。

はじめに、作業を行うディレクトリを作成します。

```bash
mkdir 任意のディレクトリ名
cd 任意のディレクトリ名
```
次にnpm init を行い、pacakage.jsonを作成します。

```bash
npm init -y
```

続いて、必要なライブラリをインストールします。

```bash
npm install --save nodemon express
```

最後に、コードを記述するindex.jsを作成します。

```bash
touch index.js
```

以上で必要なファイルの作成が完了しました。

### REST APIの作成

まず作成したindex.jsに以下のコードを記述します。

```javascript
const express = require('express');
const app = express();

app.use(express.json()); // JSONデータ解析のため
```
このコードは、Expressモジュールのインポートと、express() 関数を呼び出して新しいExpressアプリケーションを作成を行なっています。

次にportの設定を行います。
以下のコードをindex.jsの最下部に配置します。

```javascript
const port = process.env.PORT || 3000;
app.listen(port, () => {
  console.log(`Example app listening on port ${port}`);
});
```

そして、先程作成した ***pacakage.json*** ファイルの 
 ***scripts*** に
```json
"nodemon": "nodemon index.js"
```
を追加し、今度はターミナルで
```bash
npm run nodemon
```

を行います。

以上で localhost:3000/ にアクセスするとindex.jsでの作成物にアクセスすることが可能になりました。

試しに index.js に以下のコードを記述します。

```javascript
app.get("/", (req, res) => {
  res.send("HELLO WORLD");
});
```

そして、Postman([こちらの記事](https://qiita.com/otohusan/items/43cbb61cfd177049d638)で解説)を使うと、HELLO WORLDと返ってきていることが確認できます。

### CRUDの作成

ようやく、CRUD操作を行う関数の作成に入りますが

その前に、デモデータを準備します。usersデータを以下のように配置します。

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

app.use(express.json());

const users = [
  { id: 1, name: "Maeda Junya" },
  { id: 2, name: "Ito Ayase" },
  { id: 3, name: "Kubo Ritsu" },
];
```

このデータをもとにCRUD操作を行いましょう。

#### READ

READを行うために、get関数を利用します。以下のコードにより、その操作が可能になります。
```javascript
app.get("/api/users", (req, res) => {
  // usersを返す
  res.send(users);
});
```

このコードでは、"/api/course" の部分によりAPIのURLを設定してします。

そして、res.send(users); の部分によって先ほど作成したusersデータを返しています。

これにより、Postmanに ***localhost:3000/api/users*** を入力し ***GET*** メソッドを選択すると、usersデータの中身が返ってくることが確認できます。

#### CREATE

続いて、CREATEの作成へと入ります。以下のコードのようにpost関数を利用します。

```javascript
app.post("/api/users", (req, res) => {
  // 新たなユーザを宣言
  const newUser = {
    id: users.length + 1,
    name: req.body.name,
  };
  
  // usersに新たなユーザを追加
  users.push(newUser);
  
  // usersを返す
  res.send(users);
});
```
このコードの流れとしては、
***
1. newUserという新たなユーザデータをリクエストの値をもとに定義
1. usersにnewUserを追加
1. 変更が加わったusersを返す
***

といったようなものです。

実際にPostmanで動きを見てみましょう。
![CREATE動作確認](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2708101/5061298f-a19e-1b5c-12af-bf4b1035a718.png)

***POST*** メソッドを選択し、Body、rawをクリック、JSONを選択します。そして、Bodyの入力欄に
```json
{
    "name": "Taniguchi Kou"
}
```

という方を追加します。Sendをクリックし、結果を確認すると、Taniguchi Kou さんが新たに追加されたことが確認できます。

#### UPDATE

続いて、UPDATEを作りましょう。Putを利用することで、以下のように書くことができます。

```javascript
app.put("/api/users/:id", (req, res) => {
  //指定されたidを持つユーザの特定、データを保持
  const user = users.find((u) => u.id === parseInt(req.params.id));

  // idが存在しなければエラーを返す
  if (!user) return res.status(500).send("このユーザは存在しません");
  
  // 名前をリクエストに付与された値に変更
  user.name = req.body.name;
  
  // usersを返す
  res.send(users);
});
```

注意点としては、URLが ***/api/users/:id*** に変化していることがあります。こうすることで、リクエストからidをもとに特定のデータへとアクセスすることが可能になります。

このコードの流れは
***
1. リクエストのidと同じidを持つuserを特定・データを取得
1. ユーザが存在しなければエラーを返す
1. 特定したユーザの名前をリクエストで送られた名前に変更
1. 変更が加わったusersを返す
***

といったものです。

それではPostmanで確認をします。
![UPDATEの動作確認](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2708101/5e9588fb-651f-bec8-a0fa-8586f3e399ce.png)

まず、HTTPメソッドに ***PUT*** を選択します。

その後はCREATEの時と同じように、Body、raw、JSONを選択します。

注意点として、URLは ***localhost:3000/api/users/1*** にします。

そして、先程と同じようにリクエストのBodyに
```json
{
    "name": "Taniguchi Kou"
}
```
さんを追加しましょう。

Sendをクリックすると、id: 1 のユーザの名前が Taniguchi Kou さんになっていることが確認できます。

#### DELETE

DELETEに関しては、アクセスするURLは先程のUPDATEの場合と変わりません。以下のようなコードになります。

```javascript
app.delete("/api/users/:id", (req, res) => {
  // リクエストされたidを持つユーザの特定
  const user = users.find((u) => u.id === parseInt(req.params.id));

  // idが存在しなければエラーを返す
  if (!user) return res.status(500).send("このユーザは存在しません");
  
  // 特定したユーザがusers配列のどこにいるか調べ
  // そのindexを保持
  const index = users.indexOf(user);
  
  // spliceを使いindexをもとにユーザの削除
  users.splice(index, 1);

  // usersを返す
  res.send(users);
});
```

コードの流れとしては

***

1. リクエストされたidを持つユーザの特定
1. そのユーザがusers配列のどこにいるのか特定し、indexを保持
1. indexを使ってusers配列から指定されたユーザを削除
1. 変更が加わったusersを返す
***

といった感じです。

Postmanで確認をしておきます。

![スクリーンショット 2023-11-19 9.37.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2708101/d44fc6f9-f8d5-1a97-4656-cdc3ebba9aff.png)

URLで指定したidを持つユーザが、削除されていることが確認できます。

以上でCRUD機能を持つAPIを作成することができました!

## おわりに

本記事ではCRUD操作が可能なAPIの作成手順をまとめました。

基本的な操作しか行いませんでしたが、Node.jsに入門される方であったり、ちょっと気になっているような人のお役に立てれば光栄です！