新しいことにはウェルカム

技術 | 電子工作 | ガジェット | ゲーム のメモ書き

Chakra UIでゆるくサイトを作ってみる

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;

f:id:kwbtblog:20210227081029p:plain

  • 「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」など、レイアウトコンポーネントがいくつか用意されているので、それらを使えば複雑な構成も、より少ない記述で書けそうですね。

ダークモードなど、他にも面白そうな機能はあるのですが、ゆるく使うという、当初の目的から外れるので、ここまでとしておきます。

関連カテゴリー(React)記事

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com