【React-TS + MUI】②メンバーリストのWEBアプリを作成してみた

★★★ イベント情報 ★★★
◇【参加登録受付中】Kong Summit, Japan 2022◇
今年は12月15日に開催決定!最新情報とデモとともにKongと事例/ユースケースのご紹介などAPIエコノミーやマイクロサービスに関心のある開発者の方にとっては必見です。ぜひお申し込みください!イベントの詳細・お申込はこちら

★★★ Live配信告知 ★★★
◇11月29日開催 19:00~ 世界一わかりみの深いクラウドネイティブon Azure◇
テーマは「Web App for ContainersとKeycloakで最速OpenID Connect」です!

◇11月30日開催 17:00〜 知ってると ちょっと便利なコマンド集◇
知っていると少し効率の上がるようなコマンドをいくつかご紹介します!

こんにちは、2022年4月入社の庄野です。今回は、新卒1年目の私がReact-TypeScript + Material-UI (以下、React,TS,MUI)の技術を使った、簡単なWEBアプリの作り方を3つの記事にわたって1から紹介したいと思います。

この記事はカスタムフック編です。

2. カスタムフック編

対象

  • 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を以下のように定義します。詳しくは以下を参考にしてください。

OpenAPI (Swagger) 超入門

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をリスト表示しようと思います。





ご覧いただきありがとうございます。
ブログの最新情報はSNSでも発信しております。
ぜひTwitterのフォロー&Facebookページにいいねをお願い致します!



>> 雑誌等の執筆依頼を受付しております。
   ご希望の方はお気軽にお問い合わせください!


ご覧いただきありがとうございます! この投稿はお役に立ちましたか?

役に立った 役に立たなかった

0人がこの投稿は役に立ったと言っています。

Be the first to comment

Leave a Reply

Your email address will not be published.


*


質問はこちら 閉じる