⚡

一推しのReact用CSSライブラリ "Chakra UI"

2023/06/14に公開

CSS

React

Chakra UI

tech

始めに

Webアプリ製作時に

UI作るのがめんどくさい
デザインに自信がない

など感じることが多々ある方もいると思います。
でも綺麗なデザインで仕上げたいですよね。
自分も手軽にかっこいいUIを作れたら、製作のモチベーションがどんどん上がります。
今回はReact用CSSライブラリ、Chakra UI を自分が実際に使った際に感じた魅力を紹介します。

Chakra UIとは？

Chakra UIはReactのUIコンポーネントライブラリです。

Chakra UIは、シンプルでモジュール化されたアクセス可能なコンポーネントライブラリで、
Reactアプリケーションを構築するために必要なビルディングブロックを提供します。

引用元 : https://chakra-ui.com/

(調べたら Vue.js用のChakra UIもあるらしい...)

たくさんコンポーネントが用意されていて、すぐに必要なものをもってこれます。

自分が感じたChakra UIの4つの魅力

1.インストールと導入が容易に可能

インストール簡単に終わります。
しかも割と早い方だと思います。

npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion

yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion

最後にApp.tsxやindex.jsなどに作ったコンポーネントを"Chakra Provider"で囲うだけ。

import * as React from 'react'
import { ChakraProvider } from '@chakra-ui/react'

function App() {
  return (
    <ChakraProvider>
      <TheRestOfYourApplication />
    </ChakraProvider>
  )
}

2.豊富な種類のコンポーネントが使用できる

ModalやDrawer、IconButtonなど、欲しいコンポーネントをすぐに使うことができます。
IconButtonImg

importも簡単に行えます。

import { IconButton } from '@chakra-ui/react'

自分がよく使うコンポーネントはTableです。
CSS全然書かなくても綺麗なTableできちゃう。便利。
TableImg

3.class名を指定しなくてもCSSが書ける

普通のHTML CSSでは、タグにclass名などを指定して書いていますが、Chakra UIではタグに直接記入する形でCSSを書くことができます。
class名をわざわざ考えなくてもいいのは楽。CSS書いてる人はわかると思います。

<Box bg='tomato' w='100%' p={4} color='white'>
  This is the Box
</Box>

4.ダークモード実装が容易

Webアプリ製作に欠かせない要素の一つのダークモード。
個人的に、ダークモード実装できたらかっこいいというイメージがあります。
そんなダークモード、Chakra UIならすぐ実装できます。

useColorModeというHookを使用します。

function StyleColorMode() {
  const { toggleColorMode } = useColorMode()

  const bg = useColorModeValue('red.500', 'red.200')
  const color = useColorModeValue('white', 'gray.800')

  return (
    <>
      <Box mb={4} bg={bg} color={color}>
        This box's style will change based on the color mode.
      </Box>
      <Button size='sm' onClick={toggleColorMode}>
        Toggle Mode
      </Button>
    </>
  )
}

ちょっと不便だと感じたところ

Webの動作が少し重くなる。
タグに直接cssを記入するため、コードが見づらい。

ですが、不便をカバーできるほど魅力がたくさんあるので、自分はあまり気にしていないです。

Chakra UIを使用して実際に簡単なWebサイトを作ってみました。
よかったら参考程度にどうぞ。
DrawerやTabs, colorModeを使用しています。

My-info2023img

https://my-info2023.vercel.app/

まとめ

導入から実際に使うところまで ”簡単” なことがこのChakra UIを推す理由です。
ドキュメントも見やすいので、初心者には優しいライブラリだと思います。
ぜひWebアプリ製作をする際には、Chakra UIを使ってみてください。

Chakra UIはいいぞ！！！

始めに