React:Http通信 (axiosでモックサーバーと通信する)
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にモックデータを用意します。
{
"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」ファイルを作成します。
設定値として先ほどのモックサーバー起動時のコマンドに指定したオプションを設定しておきます。
{
"watch": true,
"port": 3100
}
モックサーバーの起動は下記のようにオプションを指定せずに実行できます。
npx json-server db.json
Http通信ライブラリaxios(アクシオス)
つづいてAPIとHttp通信を行うためにaxiosライブラリをインストールします。
ReactでHttp通信を行うにはaxiosを使用するのがスタンダートです。
公式サイト
1.axiosをインストールします。
vsCodeのターミナルで下記コマンドを実行します。
npm install axios
メンバーを表示するコンポーネントを作成します。
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になります。(適当に読み替えてください)
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通信する方法でした。
Discussion