Next.js + サーバーサイドTypeScript + 関数フレーバーでクリーンなアプリを作ったので実装意図とか書く Advent Calendar 2022
の18日目。株式会社mofmofに生息しているshwldです。
前日はNextAuth.jsとAuth0を使って認証をパッと作るについて書きました
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をテストする環境づくりについて書きます。