Reactでサンプルサイトを作る時など、サイトデザインはあまり深く考えず、有りものの設定を組み合わせて、ササッと手軽に作りたいことがあります。
普段、ReactのUIコンポーネントは、Microsoft Office365で使われている、UI Fabric(現 Fluent UI)を使っています。
Fluent UIは、コンポーネントが豊富でかつ、ドキュメントも整備されており、使っていて特に困ったことはないのですが、重厚壮大なライブラリなので、もっとゆるくサイトを作りたい時に使えるようなUIコンポーネントが欲しいなと思っていました。
そんな中、Chakra UIというReactのUIコンポーネントが使われているのを、チラホラ見かけるようになり、気になって使ってみたのですが、正にゆるくデザインするのに良さげだったので、ここに紹介しようと思います。
使ってみた印象
Chakra UIを使ってみた印象は下記になります。
「最低限のUIコンポーネント」+「インラインスタイルが書けるDOM」+「プリセット設定集」
ボタン、フォーム、メニューなど、よくあるコンポーネントは一通り揃っています。
DOMに直接スタイルが書け、それによりサイトデザインを構築していきます。
スタイルの設定値は直指定もできますが、よく使うサイズや色、項目は、予めエイリアスで定義されています。
例
import { ChakraProvider } from "@chakra-ui/react" import { Box } from "@chakra-ui/react" function App() { return ( <ChakraProvider> <Box m="2" w="200px" borderWidth="1px" borderRadius="xl" > <Box p="2" m="2" borderRadius="xl" bgColor="red.200" fontSize="xs" > TEST 1 </Box> <Box p="2" m="2" borderRadius="xl" bgColor="blue.200" fontSize="md" > TEST 2 </Box> <Box p="2" m="2" borderRadius="xl" bgColor="green.200" fontSize="xl" > TEST 3 </Box> </Box> </ChakraProvider> ); } export default App;
- 「m」は「margin」の略で、「p」は「padding」の略です。その他、よく使うスタイルには別名が用意されています。
- 「fontSize」の「xs」は、実際の「0.75rem」になります。「bgColor」の「red.200」は、実際の「#FEB2B2」になります。その他、プリセットの設定値が、テーマにエイリアスとして用意されています。
書いてて違和感ないし、あまり覚えることもなく、これならサクッと使えそうです!
再利用
よく使うスタイルは、オブジェクトとして定義しておけば、クラスのように使いまわしができます。
例えば前述の例の場合、p="2" m="2" borderRadius="xl"
が冗長なので、まとめることができます。
function App() { const itemStyle = { p: 2, m: 2, borderRadius: "xl" }; return ( <ChakraProvider> <Box m="2" w="200px" borderWidth="1px" borderRadius="xl" > <Box sx={itemStyle} bgColor="red.200" fontSize="xs" > TEST 1 </Box> <Box sx={itemStyle} bgColor="blue.200" fontSize="md" > TEST 2 </Box> <Box sx={itemStyle} bgColor="green.200" fontSize="xl" > TEST 3 </Box> </Box> </ChakraProvider> ); }
ドキュメントの読み方
ドキュメントはこちらになります。
どんなスタイルが使えるかは[Style Props]
に一覧があります。
プリセットはテーマに定義されていて、デフォルトのテーマにどんなプリセットがあるかは[Default Theme]
に記載されています。
この2ページと、後は必要に応じて使いたいコンポーネントのページを見れば、何とかなります。
感想など
直接スタイルを書かなくても、「Flex」や「Grid」など、レイアウトコンポーネントがいくつか用意されているので、それらを使えば複雑な構成も、より少ない記述で書けそうですね。
ダークモードなど、他にも面白そうな機能はあるのですが、ゆるく使うという、当初の目的から外れるので、ここまでとしておきます。