こんにちは、2022年4月入社の庄野です。今回は、新卒1年目の私がReact-TypeScript + Material-UI (以下、React,TS,MUI)の技術を使った、簡単なWEBアプリの作り方を3つの記事にわたって1から紹介したいと思います。
対象
- React、TS初心者
- APIを扱ってみたい人
- カスタムフックを作成したい人
- MUIを使ってみたい人
やること
- プロジェクトの作成
- API用のモックサーバーを立てる
- APIを取得するカスタムフック作成
- MUIを使ってユーザーをリスト表示する
使用環境
開発環境は以下の通りです。
$ node --version
v16.17.1
$ npm --version
8.15.0
"@emotion/react": "^11.10.4",
"@emotion/styled": "^11.10.4",
"@mui/icons-material": "^5.10.6",
"@mui/lab": "^5.0.0-alpha.102",
"@mui/material": "^5.10.7",
"@stoplight/prism-cli": "^4.10.4",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"typescript": "^4.8.4",
目次
前回まで
前回の記事は、プロジェクトを作成して環境の構築まで行いました。
今回
今回は、API用のモックサーバーの立ち上げとAPI取得のカスタムフックを作成します。
モックサーバー
API取得のカスタムフックを作る前に今回はテストのためにAPI用のモックサーバーを立てます。
ユーザー情報(名前、勤務状態、アイコン、ID)のAPIを取得できるように、まずはOpenAPIをymlファイルで書きます。
OpenAPI定義
OpenAPIを以下のように定義します。詳しくは以下を参考にしてください。
examples:
にはテストで実際に使用したいデータを書いておきます。
アイコン画像は こちら からhttps://picsum.photos/横幅/縦幅?random=数字
の形式でランダムでとることができます。
openapi: 3.0.3
info:
title: UserList API
version: 0.0.1
servers:
- url: https://localhost:8000
description: local dev environment
paths:
/users:
description: ユーザー一覧を返す
get:
responses:
200:
description: OK
content:
application/json:
schema:
$ref: '#/components/schemas/Users'
examples: テストで実際に使用するデータ
Users:
value:
- name: 'AtsuyaShono'
status: 'working'
thumbnail: 'https://picsum.photos/200/300?random=0' // ランダムで画像取得
userID: 'U037FC0HGGJ'
- name: 'user1'
status: 'working'
thumbnail: 'https://picsum.photos/200/300?random=1'
userId: 'U0XXXXXXXX1'
~~~~~省略~~~~~
components:
schemas:
Status:
type: string
enum: [working, notWorking, unknown]
User:
type: object
properties:
name: // 名前
type: string
status: // 勤務状態
$ref: '#/components/schemas/Status'
thumbnail: // アイコン画像URL
type: string
format: uri
userID: // ユーザーID
type: string
Users:
type: array
items:
$ref: '#/components/schemas/User'
モックサーバー起動
以下のコマンドで、モックサーバーを立てます。specfile.ymlのpathは正しく指定してください。(ポートは任意)
詳しいOpenAPIの書き方はもっと詳しく説明しているページがあるので、参考にしてください。
参考ページ:【OpenAPI】Prismでモックサーバ作成
$ npx prism mock ./src/specfile.yml --port 8000
ユーザー情報を取得するカスタムフック
ここからは実際にAPI取得を実装したいと思います。
型定義
まず、APIの型を定義します。
export type User = {
name?: string; // 名前
status?: string; // 勤務状態
thumbnail?: string; // アイコン画像URL
userID?: string; // ユーザーID
};
カスタムフック作成
次に、カスタムフックを作っていきます。
import axios from "axios";
import { useState } from "react";
import { User } from "../types/usertype";
export const useAllUsers = () => {
const [users, setUsers] = useState<Array<User>>([]);
const getAllUsers = () => {
// GET メソッド
axios.get<Array<User>>("http://localhost:8000/users").then((res) => {
const data = res.data.map((user) => ({
name: user.name,
status: user.status,
thumbnail: user.thumbnail,
userID: user.userID,
}));
setUsers(data); // stateの更新
});
};
return { getAllUsers, users }; // 別コンポーネントで使えるように'return'します
};
やっていることとしては、axios
で、GETメソッドを実行し、users
というStateにGETメソッドのレスポンスデータを格納します。その後、useAllUsers()
はgetAllUsers
関数とusers
ステートを返します。
これで、別コンポーネントで、const { getAllUsers, users } = useAllUsers();
とすれば、APIを取得して、ユーザー情報を扱うことができます。
テスト
では試しに、MemberList.tsx
にmapメソッドで出力してみましょう。
import { useEffect } from "react";
import { memo, FC } from "react";
import { useAllUsers } from "../hooks/useAllUsers";
export const MemberList: FC = memo(() => {
const { getAllUsers, users } = useAllUsers(); // カスタムフック呼び出し
useEffect(() => {
getAllUsers(); // API取得
}, []);
return (
<>
// 表示
{users.map((user) => (
<>
<p>{user.name}</p>
<p>{user.status}</p>
<p>{user.thumbnail}</p>
<p>{user.userID}</p>
</>
))}
</>
);
});
useEffect()
は簡単に説明すると最初にレンダリングされるときと、第2引数の変数が変化したときに第1引数の関数が呼び出されるフックです。つまり、第2引数に何も変数を指定していないので、最初だけ処理が走ります。(最初だけAPIを取得します。)
API取得フック結果
API取得結果は以下の通り。ユーザー情報がずらっと表示されたと思います。
ビューとロジックを切り分けて定義できて、非常にコードが簡潔にできます。また、他のコンポーネントでも使いまわしができるのも大きなメリットです。
ここまでで、APIを取得するためのモックサーバーとカスタムフックは用意できました。
カスタムフック編は以上となります。
最後の記事は、MUIを使って取得したAPIをリスト表示しようと思います。