🌶️

RESTfulAPIを作成

2023/07/21に公開

API

tech

RESTfulAPI

動画を見ながら3つのルールを持つRESTfulAPIを簡単に作りました〜

アドレス可能性
統一インターフェース
ステートレス性

流れ

mkdirコマンドでフォルダ作る！

$ mkdir webapi-tutorial

cd コマンドで移動し、code.でVSCを開く！

WebAPIはNodeが必要になるので、インストールしていなければインストールする！

初期化する

npm init -y

自動的にpackage.jsonが作成される！

ローカルサーバーを立ち上げやすいように、
test:となっている部分を下記のように変更する！

package.json

{
  "name": "javascript-complete",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
+    "dev": "node index.js"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/uknow1229/javascript-complete.git"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/uknow1229/javascript-complete/issues"
  },
  "homepage": "https://github.com/uknow1229/javascript-complete#readme",
  "dependencies": {
    "express": "^4.18.2"
  }
}

index.jsファイルを作成！

index.js

console.log("nodejs")

npm run dev

とすると、ローカルサーバが立ち上がる！

➜  webapi-tutorial npm run dev

> webapi-tutorial@1.0.0 dev
> node index.js

nodejs

node index.jsがが実行され、
nodejsというコンソールが出ていればとりあえずOK！

expressというNodejsのフレームワークを使い、開発するので
それをインストールしていく！

npm i express

全体の記述！

index.js

const express = require('express'); //expressを呼ぶ
const app = express(); //expressを実行
app.use(express.json());

app.listen(3000, console.log('サーバーが開始されました')); //listenでローカルサーバーを立ち上げることができる

app.get('/', (req, res) => {
  res.send('プログラミングチュートリアルへようこそ');
}); //ルートディレクトリを指定し、文字列を返す

//お客様情報をサーバーに置いておく（JSON形式）
const customers = [
  { title: '田中', id: 1 },
  { title: '斎藤', id: 2 },
  { title: '橋本', id: 3 },
  { title: '鈴木', id: 4 },
  { title: '安藤', id: 5 },
];

//データを取得できるように使用(GETメソッド)
app.get('/api/customers', (req, res) => {
  res.send(customers);
});

app.get('/api/customers/:id', (req, res) => {
  const customer = customers.find((c) => c.id === parseInt(req.params.id));
  res.send(customer);
});

//データを送信(作成)してみよう(POSTメソッド)
app.post('/api/customers', (req, res) => {
  const customer = {
    title: req.body.title,
    id: customers.length + 1,
  };
  customers.push(customer);
  res.send(customers);
});

//データを更新してみよう(PUT)
app.put('/api/customers/:id', (req, res) => {
  const customer = customers.find((c) => c.id === parseInt(req.params.id));
  customer.title = req.body.title;
  res.send(customer);
});

//データを削除してみよう(DELETEメソッド)
app.delete('/api/customers/:id', (req, res) => {
  const customer = customers.find((c) => c.id === parseInt(req.params.id));

  const index = customers.indexOf(customer);
  customers.splice(index, 1);

  res.send(customer);
});