Chakura UI V2使ってみた

Posted at 2026-02-08

導入

皆様こんにちは。
サッカー観戦をしながらジンギスカンを食べて休日を過ごしているシロクマです。
まじめに勉強をしようと思ったのですが、腰が重い為今回はFEライブラリで少し遊んでみました。

ChatGPTにお勧めのUIライブラリを聞いたところChakura UIをお勧めされたので使い方をまとめてみます。

3) レイアウトの基本（覚える順）

Box：万能div（まずこれ）
Stack：縦並び（間隔 spacing が楽）
HStack/VStack：横/縦のStack
Flex：整列・余白・左右寄せ（Spacerが便利）
Container：中央寄せ＆最大幅
SimpleGrid：カード一覧など

例：左右寄せヘッダー

<Flex align="center">
  <Heading size="md">Title</Heading>
  <Spacer />
  <Button>Action</Button>
</Flex>

4) よく使うスタイルprops

余白・サイズ
p, px, py, m, mt, mb...
w, h, minW, maxW
見た目
bg（背景）
color（文字色）
borderWidth, borderColor
rounded（"md"|"lg"|"xl"|"2xl"）
boxShadow

例：

<Box p={6} bg="blackAlpha.300" borderWidth="1px" rounded="2xl" />

5) 擬似状態（超重要）

_hover
_focus
_active
_disabled

例：

<Button
  _hover={{ transform: "translateY(-1px)" }}
  _focus={{ boxShadow: "0 0 0 2px rgba(99,102,241,.6)" }}
>
  Save
</Button>

6) レスポンシブ（Chakraの強み）

<SimpleGrid columns={{ base: 1, md: 2, lg: 3 }} spacing={6} />
<Input w={{ base: "160px", md: "320px" }} />

フォーム（型）

基本はこのセット：

FormControl
FormLabel
Input / Textarea / Select
FormHelperText
FormErrorMessage

例：

<FormControl isInvalid={!!error}>
  <FormLabel>Title</FormLabel>
  <Input value={title} onChange={...} />
  <FormHelperText>Short summary</FormHelperText>
</FormControl>

8) ダークモード（v2は標準）

トグル

const { colorMode, toggleColorMode } = useColorMode()

色をモードで変える

const bg = useColorModeValue("white", "gray.900")
<Box bg={bg} />

9) テーマ（extendTheme）

「毎回 props を書くのが面倒」になったら theme に寄せる。

例：初期をダーク固定

const config = { initialColorMode: "dark", useSystemColorMode: false }
export const theme = extendTheme({ config })

例：Input（filled）の文字色とplaceholderを統一

components: {
  Input: {
    variants: {
      filled: {
        field: {
          color: "whiteAlpha.900",
          _placeholder: { color: "whiteAlpha.500" },
        },
      },
    },
  },
}