🍎

【React】Chakra UIとは? 3つの基本コンポーネントから理解しよう

2021/05/07に公開

React

TypeScript

Chakra UI

tech

概要

記事の対象者

bootstrap や materialUI 以外も使ってみたい人
React初学者でUIもこだわり始めようとしている人
UIコンポーネントライブラリって何？って人

記事作成の経緯

先輩に勧めていただき Chakra UI を触り始め、非常に使い勝手が良かったので皆様にも紹介できたらと思い執筆することにしました。（随時、記事の内容は充実させていこうと思っております。）

Chakra UIとは？

3行でざっくり理解

ReactのUIコンポーネントライブラリ
ダークモードに標準で対応している
TypeScriptで書かれている

公式サイトの紹介文

Chakra UIは、シンプルでモジュール化されたアクセス可能なコンポーネントライブラリで、Reactアプリケーションを構築するために必要なビルディングブロックを提供します。（日本語訳）
参考：https://chakra-ui.com

まずはここから！3つの基本コンポーネントを紹介！

Boxコンポーネント

一番基本のコンポーネント
<div>とほぼ同じイメージ
CSSはコンポーネントにpropsとして書く（全てのコンポーネント共通）

Boxコンポーネントは、他のすべての Chakra UI コンポーネントを構築する上で、最も抽象的なコンポーネントです。デフォルトでは、div 要素をレンダリングします。（日本語訳）
参考：https://chakra-ui.com/docs/layout/box

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

Flexコンポーネント

デザインするなら不可欠なFlexBox
<div style="display: flex;">とほぼ同じイメージ

Flexコンポーネントは、display: flexのBoxであり、便利なstyle shorthandが付属しています。これは、div要素をレンダリングします。（日本語訳）
参考：https://chakra-ui.com/docs/layout/flex

<Flex color="white">
  <Box flex="1" bg="tomato">
    <Text>Box 1</Text>
  </Box>
    <Box bg="lime">
    <Text>Box 2</Text>
  </Box>
  <Box bg="black">
    <Text>Box 3</Text>
  </Box>
</Flex>

Buttonコンポーネント

お洒落なボタンも一瞬で
装飾済みの<button>とほぼ同じイメージ

Buttonコンポーネントは、フォームの送信、ダイアログのオープン、アクションのキャンセル、削除操作などのアクションやイベントのトリガーとして使用されます。（日本語訳）
参考：https://chakra-ui.com/docs/form/button

<Button colorScheme="blue">Button</Button>

まとめ

今回は、Chakra UI が気になっている方向けに本当に触りの部分を紹介させていただいました。
今後もコンポーネントの情報を増やしていこうと思いますので、紹介して欲しいものなどございましたら、お気軽にコメントください。

概要