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

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

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;

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

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

関連カテゴリー記事

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com