🌀

React：Http通信（axiosでモックサーバーと通信する）

2022/01/27に公開

React

axios

tech

2022年01月27日 Windows11での情報です。
最近 Windows11にアップデートしました。

今回はReactでのHttp通信についてです。

環境

vite: v2.7.2
node: v16.13.2
react: v17.0.2
axios: v0.25.0
json-server: v0.17.0
typescript: v4.4.4

モックサーバーを作成する

まずはHttp通信で使用する、ロカールで簡単に利用できるモックサーバーを用意します。
モックサーバーは、バックエンドのAPIが用意できていないときや、ローカル環境からAPIが使用できないときに、フロントエンドでテスト的に使用できる簡易サーバーです。

モックサーバーにはJson Serverを利用します。

1.json serverをインストール

まずはjson-serverをインストールします。
vscodeのターミナルで下記コマンドを実行します。

npm install json-server --dev

2.モックデータの用意

package.jsonと同じ階層にモックデータファイルを作成します。
ファイル名はなんでもよいですが、ここでは「db.json」で作成します。

db.jsonにモックデータを用意します。

db.json

{
  "members": [
    {
      "id": "uid1",
      "name": "JIN"
    },
    {
      "id": "uid2",
      "name": "SUGA"
    },
    {
      "id": "uid3",
      "name": "J-HOPE"
    }
  ]
}

3.モックサーバーを起動

vscodeのターミナルで下記コマンドを実行します。

npx json-server --watch db.json --port 3100

http://localhost:3100/members にアクセスして下記のような画面が表示されれば、モックサーバーが起動されています。

モックサーバーの終了はターミナルで「Ctrl＋C」を入力します。

4.（補足）Json Server 設定ファイル

packge.jsonと同じ階層に「json-server.json」ファイルを作成します。

設定値として先ほどのモックサーバー起動時のコマンドに指定したオプションを設定しておきます。

json-server.json

{
  "watch": true,
  "port": 3100
}

モックサーバーの起動は下記のようにオプションを指定せずに実行できます。

npx json-server db.json

Http通信ライブラリaxios(アクシオス)

つづいてAPIとHttp通信を行うためにaxiosライブラリをインストールします。
ReactでHttp通信を行うにはaxiosを使用するのがスタンダートです。
公式サイト
https://axios-http.com/

1.axiosをインストールします。

vsCodeのターミナルで下記コマンドを実行します。

npm install axios

メンバーを表示するコンポーネントを作成します。

HttpSample.tsx

import React from "react";

import axios, { AxiosResponse } from "axios";

// モックサーバーのURL　db.json
const membersUrl = "http://localhost:3100/members";

type Member = {
  id: string;
  name: string;
};

/**
 * APIモックサーバーへのaxiosでのhttp通信テスト用コンポーネント
 */
export const HttpSample: React.VFC = () => {
  const [members, setMembers] = React.useState<Member[]>([]);

  const onFetchClick = async () => {
    const response: AxiosResponse<Member[]> = await axios.get(membersUrl);
    setMembers(response.data);
  };

  return (
    <>
      <button onClick={onFetchClick}>
        APIモックサーバーより、membersデータ取得
      </button>
      {members.length != 0 && (
        <>
          <ul>
            {members.map((member) => (
              <li
                key={member.id}
              >{`[id]=${member.id} [name]=${member.name}`}</li>
            ))}
          </ul>
          <p> {members.length}人</p>
        </>
      )}
    </>
  );
};

main.tsx(index.tsx)は先ほど作成した、HttoSampleコンポーネントを呼び出します。
※ビルドツールviteでReactプロジェクトを作成するとmain.tsxが一番最初のコンポーネントになりますが、create-react-appでReactプロジェクトを作成すると、一番最初のコンポーネントはindex.tsxになります。(適当に読み替えてください)

main.tsx(index.tsx)

import React from 'react'
import ReactDOM from 'react-dom'
import { HttpSample } from './HttpSample'

ReactDOM.render(
  <React.StrictMode>
    <HttpSample />
  </React.StrictMode>,
  document.getElementById('root')
)

動作確認してみる

まずはモックサーバーを起動します。

vscodeのターミナルでモックサーバーを起動します

npx json-server db.json

vscodeで2つ目のターミナルを起動し、プロジェクトを起動します。
ターミナルで右上のプラスマークでターミナルがもう一つ起動します。

新たに開いたターミナルで、ビルドします。
※viteで作成したプロジェクトは「run dev」ですが、create-react-appで作成したプロジェクトは「run start」です。（適当に読み替えてください）

npm run dev

http://localhost:3000 にアクセスして、「APIモックサーバーより、membersデータ取得」ボタンをクリックすると、メンバーの一覧が表示されます。

以上でReactでHttp通信する方法でした。