ReactとNode.js(express)でAPIの通信を確立する

概要

サーバーを立ち上げてAPIを叩くという一連の流れを確認してみたかったので、ローカルでフロントエンドとしてReact, バックエンドとしてNode.js(express)を立ち上げてAPI（Fetch）叩いてみる。
フロント側としてはわざわざReactでやる意味はないが慣れているため採用しました。

1. Node.js(Express)でサーバーを立ち上げる

1. cd backend
2. yarn initでpackage.jsonを初期化。色々質問されるけど、とりあえずデフォルトでok
3. yarn add expressでexpressのパッケージをインストール
4. index.jsをbackend配下に作成する
5. index.jsは以下のように記述する

const express = require("express");
const app = express();　//express のインスタンス
const port = 3001; // listenするport番号

app.get("/", (req, res) => {
  res.send("Hello World!");
});

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`);
});

1. node index.jsを実行するとこんな感じでlocalhost:3001に立ち上がる
   。

2. Reactを立ち上げる

まずは下記コマンドでサクッとReactの環境を作って立ち上げる

npx create-react-app frontend
cd frontend
yarn start

こんな感じでlocalhost:3000に立ち上がる

ここまででReactとExpressが立ち上がったので、
次はExpressにAPIを用意してReactからをそれを呼び出す.

3. ExpressにAPIを用意する（POSTメソッド）

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

app.get("/", (req, res) => {
  res.send("Hello World!");
});

app.post("/", function (req, res) {
  res.send("Got a POST request");
});

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`);
});

このままだとCORSのエラーが発生するので、下記のようにヘッダー設定の記述を追加。
こうゆうの使ってもできる -> https://expressjs.com/en/resources/middleware/cors.html

app.use((req, res, next) => {
  res.setHeader("Access-Control-Allow-Origin", "http://localhost:3000");
  res.setHeader(
    "Access-Control-Allow-Methods",
    "GET, POST, PUT, PATCH, DELETE, OPTION"
  );
  res.setHeader("Access-Control-Allow-Headers", "Content-Type, Authorization");
  next();
});

さらに、フロント側からリクエストボディで渡されるjson（後述）を受け取るために
app.use(express.json());を追記
postの中の処理も以下のように変更。受け取ったボディをそのまま返すだけ。

app.post("/", function (req, res) {
  try {
    res.json(req.body);
  } catch (error) {
    console.error(error);
  }
});

index.jsの全体としてはこんな感じ

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

// jsonの受け取り
app.use(express.json());

// cors対策
app.use((req, res, next) => {
  res.setHeader("Access-Control-Allow-Origin", "http://localhost:3000");
  res.setHeader(
    "Access-Control-Allow-Methods",
    "GET, POST, PUT, PATCH, DELETE, OPTION"
  );
  res.setHeader("Access-Control-Allow-Headers", "Content-Type, Authorization");
  next();
});

app.get("/", (req, res) => {
  res.send("Hello World!");
});

// postの処理
app.post("/", function (req, res) {
  try {
    res.json(req.body); // jsonで返却
  } catch (error) {
    console.error(error);
  }
});

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`);
});

4. Fetchの作成

App.jsにて以下のようにfetchを記載。

import "./App.css";

function App() {
  const handleClick = async () => {
    await fetch("http://localhost:3001/", {
      method: "POST",
      mode: "cors",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({ name: "hoge", email: "[e-mail]" }),
    })
      .then((response) => response.json())
      .then((data) => console.log(data));
  };
  return (
    <div className="App">
      <button onClick={handleClick}>post</button>
    </div>
  );
}

5. 実行！

最後に、ExpressとReactをどちらも起動させた状態で
React側に用意したPostボタンを押下すると、コンソールに値が入ってかえってきているのを確認できた。

参考

https://create-react-app.dev/docs/getting-started/
https://expressjs.com/ja/starter/installing.html
https://developer.mozilla.org/ja/docs/Web/API/Fetch_API/Using_Fetch