TypeScriptとReactでChakraUIを使いアプリを作成(ユーザ一覧)

学んだこと

ユーザ一覧画面

• UserManagement.tsx
  • ユーザ一覧ページのコンポーネント
  • 各ユーザのアイコン等は UserCard コンポーネントが担っている

import { Wrap, WrapItem, Spinner, Center } from "@chakra-ui/react";
import React, { memo, VFC, useEffect } from "react";
import { UserCard } from "../organisms/user/UserCard";
import { useAllUsers } from "../../hooks/useAllUsers";

export const UserManagement: VFC = memo(() => {
  const { getUsers, users, loading } = useAllUsers();
  useEffect(() => getUsers(), []);
  return (
    <>
      {loading ? (
        <Center h="100vh">
          <Spinner />
        </Center>
      ) : (
        <Wrap p=>
          {users.map((user) => (
            <WrapItem key={user.id} mx="auto">
              <UserCard
                userName={user.username}
                fullName={user.name}
                imageUrl="https://picsum.photos/800"
              />
            </WrapItem>
          ))}
        </Wrap>
      )}
    </>
  );
});

• UserCard.tsx
  • 受け取ったイメージ URL、ユーザー名を使ってユーザの情報を表示
  • 画像は unsplash でランダムに取得し、表示している。
    • 参考 URLhttps://ttydev.com/post/other/unsplash-random

import React, { memo, VFC } from "react";
import { Image, Stack, Text, Box } from "@chakra-ui/react";

type Props = {
  imageUrl: string;
  userName: string;
  fullName: string;
};

export const UserCard: VFC<Props> = memo((props) => {
  const { imageUrl, userName, fullName } = props;
  return (
    <Box
      w="260px"
      h="260px"
      bg="white"
      borderRadius="10px"
      shadow="md"
      p={4}
      _hover=
    >
      <Stack textAlign="center">
        <Image
          borderRadius="full"
          boxSize="160px"
          src={imageUrl}
          alt={userName}
          m="auto"
        />
        <Text fontSize="lg" fontWeight="bold">
          {userName}
        </Text>
        <Text fontSize="sm" color="gray">
          {fullName}
        </Text>
      </Stack>
    </Box>
  );
});

ユーザ一覧取得処理

• useAllUsers.ts
  • ユーザーの一覧処理のロジック部分を分けた(カスタムフック)
  • エラーメッセージは前回作ったメッセージ表示処理を流用した。

/* eslint-disable react-hooks/exhaustive-deps */
import { useState, useCallback } from "react";
import axios from "axios";
import { User } from "../types/api/user";
import { useMessage } from "./useMessage";

export const useAllUsers = () => {
  const { showMessage } = useMessage();
  const [loading, setLoading] = useState(false);
  const [users, setUsers] = useState<Array<User>>([]);
  const getUsers = useCallback(() => {
    setLoading(true);
    axios
      .get<Array<User>>("https://jsonplaceholder.typicode.com/users")
      .then((res) => setUsers(res.data))
      .catch(() => {
        showMessage({ title: "ユーザー取得に失敗しました", status: "error" });
      })
      .finally(() => {
        setLoading(false);
      });
  }, []);
  return { getUsers, loading, users };
};

VSCode でのエラーメッセージ対処

• 以下のエラーが発生していた
  • 式は、複雑すぎて表現できない共用体型を生成します。ts(2590)

• 対処方法

  • vsCodeの表示->コマンドパレット->TypeScriptのバージョンを選択->ワークスペースのバージョンを選択
  • 選択後エラーを解消することが出来た。

  • 参考 URLhttps://xtimmune.com/blog/chakra_ui_union_type_too_complex

  • 原因ははっきり分からないが、vsCode 側が認識している Typescript のバージョンと開発環境のバージョンが異なっているとのこと。