Yenta WebにChakra UI を採用した話

f:id:atrae_tech:20211126112459j:plain

Yentaのweb版を作るにあたってChakra UIを導入しました。

Chakra UI とは

Chakra UIはユーティリティーファーストなUIコンポーネントライブラリです。 Chakra UIの利点は、デザインのニーズに合わせて簡単にスタイルを調整できます。

例えば、下記のwidth="380px"のようにスタイルpropsで渡すことができます。

 <Box width="380px">
   <Text fontSize="sm" fontWeight="bold">Hello World!</Text>
   <Button>Click me</Button>
 </Box>

Chakraのデフォルトテーマを拡張したい場合はテーマを設定して、自分のプロダクトのデザインスタイルに変更することができます。

import { extendTheme } from '@chakra-ui/react';

export const theme = extendTheme({
  fontSizes: {
    xs: '12px',
    sm: '14px',
    md: '16px',
    lg: '18px',
    xl: '20px',
  },
  fontWeights: {
    normal: 400,
    medium: 500,
    bold: 700,
  },
});

Chakra UIを選んだ理由

UIライブラリを使うことにした理由

自前でコンポーネントを一から作るとなると時間がかかるのでUIライブラリを使うことにしました。その理由として下記が挙げられます。

Yentaのwebを作るにあたってスタイルを組めるメンバーが少数しかいなかったこと
開発工数も長くはない中での開発だったのでスピード感良く開発がしたかった
class名を考えたり、コンポーネントを作る時間を削減したかった

Material UIなどの有名ライブラリもありますが、別のUIライブラリのChakraを使うことにしました。

Chakra UIとMaterial UI(MUI)の違い

MUIはChakraよりもコンポーネントの数も多く、DatePickerなどの高機能なコンポーネントもあります。しかしMUIはマテリアルデザインのガイドラインに基づいています。 MUIもカスタマイズは可能ですがコンポーネント自体に特定のスタイルがあるので調節をするのに多少なりとも時間がかかってしまいます。 Chakraよりもスタイルの拡張性は高くありません。

なぜChakra UIを選んだのか

前述の通り、MUIにもメリットは多々ありますが、学習コストが高くデザイナーもエンジニアもMUIを知っておかないといけないというデメリットもあります。また、MUIはデザインガイドラインがしっかりしていることもあり、デザインをMUIに寄せる必要性があります。Yentaは既にアプリをリリースしており、わざわざMUIにデザインを寄せる必要性がなかったこと、デザイナーにFigmaで直感的なデザインをしてもらいたかったこと、スピード感を持ってプロジェクトを進める必要があったことなどもあり、拡張性が高くデザインファーストなChakraUIの方がYentaに合っていると思いChakraUIを使う運びとなりました。