ChakraUIとReact Hook FormとZodと

利用しているパッケージを3つまとめて紹介します。

Chakra UIを使う理由

Chakra UIはUIライブラリです。

import {
  Box,
  Flex,
  HStack,
  IconButton,
} from '@chakra-ui/react';
import { HamburgerIcon, CloseIcon } from '@chakra-ui/icons';

<Flex h={10} alignItems={'center'} justifyContent={'space-between'}>
  <IconButton
    size={'md'}
    icon={isOpen ? <CloseIcon /> : <HamburgerIcon />}
    aria-label={'Open Menu'}
    display={{ md: 'none' }}
    onClick={isOpen ? onClose : onOpen}
  />
  <HStack spacing={8} alignItems={'center'}>
    <Box>Logo</Box>
  </HStack>
</Flex>

こんな感じでJSXを記述できます。
ポイントとしては

propsに補完が効く
カスタムコンポーネントを作りやすい

の2点です。

propsに補完が効く

コンポーネントにstyleを直接記述できるうえでスタイルに一貫性を持たせられるChakura UIの使い心地は、Tailwind CSSににています。
Chakra UIはpropsで指定する形になっており、型がついているため、素早くコンポーネントを作ることができます。

カスタムコンポーネントを作りやすい

Chakra UIはpropsの型を提供してくれているため、そのままそれを使って型つけすることでカスタムコンポーネントを作りやすいです。

この2点の開発体験が良いため選定しています。開発体験とスピードに全振りして選びました。

React Hook Form/Zodを使う理由

Form関連のコードに一貫性を持たせるため

別にstateを直接扱ってFormを書いてもいいと思っていて、React Hook Formを使う理由としてずっと思っていたのは再レンダリングコストが高いフォームだけ入れるのでもいいじゃないかと思っていました。
ただ、そういったフォームだけReact Hook Formを使うのは全体の一貫性を損ない、使う使わないの判断が入り込みます。

また、フォームはバリデーションやデータ成形など割りと面倒くさい処理が多くなる部位であり、stateでやり取りするにしても管理が結構大変になりがちでuseReducerが出てきやすかったりすると思います。
まるっといろんなユースケースに対応できる形で一貫性をもたせようと選定しました。

React Hook FormとZodを使い、バリデーションとデータ成形を少ないコードで実現できます。

例: /apps/web/src/features/project/ProjectBoard/components/StoryUpdateForm/StoryUpdateForm.tsx

次回予告

明日はVitestでGraphQLとReactをテストする環境づくりについて書きます。