LoginSignup
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@hal_mkiin(Hal)inJISOU | Reactプログラミングコーチング

【Chakra UI v3】新しくなったChakra UIを触ってみて分かったことをまとめてみる

Posted at

はじめに

こんにちは！Halです！

今回は、Chakra UI v3について触って分かったことをまとめていきます。v2から大幅に進化して、パフォーマンスもDXも格段に良くなったChakra UI v3を、基本的な考え方から実際の使い方まで分かりやすく紹介していきます！

Chakra UI v3って何がすごいの？

1. パフォーマンスが大幅向上

v3では4倍の高速化を実現！再レンダリングも1.6倍速くなりました。これは内部で使用しているアーキテクチャが大きく変わったからです。

新しいアーキテクチャの仕組み

  • Zag.js：状態管理をステートマシンで管理
  • Ark UI：Zag.jsをベースにしたヘッドレスUIコンポーネント
  • Chakra UI v3：Ark UIに美しいスタイルを適用

2. より分かりやすいコンポーネント構造

v3ではドット記法でコンポーネントを構成できるようになりました！

// v2の書き方
<Accordion>
  <AccordionItem>
    <AccordionButton />
    <AccordionPanel />
  </AccordionItem>
</Accordion>

// v3の書き方
<Accordion.Root>
  <Accordion.Item>
    <Accordion.ItemTrigger />
    <Accordion.ItemContent />
  </Accordion.Item>
</Accordion.Root>

これで「どのパーツがどの役割なのか」が一目で分かるようになりました！

3. 強化されたTypeScript対応

型推論がより強力に！スタイルプロパティやトークンの補完がかなり良くなっています。

インストールと初期設定

インストール方法

npm i @chakra-ui/react @emotion/react

スニペット（UI部品）の追加

Chakra UI v3では、便利なスニペットを簡単に追加できます。これがめちゃくちゃ便利！

npx @chakra-ui/cli snippet add

これで、よく使うUIコンポーネントがプロジェクトに自動で追加されます。

プロバイダーの設定

生成されたcomponents/ui/providerコンポーネントをアプリのルートで使います：

import { Provider } from "@/components/ui/provider"

function App({ Component, pageProps }) {
  return (
    <Provider>
      <Component {...pageProps} />
    </Provider>
  )
}

このプロバイダーには以下が含まれています：

  • ChakraProvider：スタイリングシステム
  • ThemeProvider：ダークモード対応

TypeScript設定の更新

{
  "compilerOptions": {
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "skipLibCheck": true,
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

基本的な使い方

シンプルなボタンを作ってみよう

import { Button } from "@chakra-ui/react"

export const SimpleButton = () => {
  return (
    <Button colorPalette="blue" size="lg">
      クリックしてね！
    </Button>
  )
}

レスポンシブなレイアウト

import { Box, Stack, Text } from "@chakra-ui/react"

export const ResponsiveLayout = () => {
  return (
    <Stack
      direction={{ base: "column", md: "row" }}
      gap="4"
      p="4"
    >
      <Box bg="blue.100" p="4" flex="1">
        <Text>左側のコンテンツ</Text>
      </Box>
      <Box bg="green.100" p="4" flex="1">
        <Text>右側のコンテンツ</Text>
      </Box>
    </Stack>
  )
}

テーマのカスタマイズ

基本的なカスタマイズ

独自のテーマを作成するには、defineConfigとcreateSystemを使います：

// theme.ts
import { createSystem, defaultConfig, defineConfig } from "@chakra-ui/react"

const config = defineConfig({
  theme: {
    tokens: {
      colors: {
        brand: {
          "500": { value: "#your-color" },
        },
      },
    },
  },
})

export const system = createSystem(defaultConfig, config)

プロバイダーの更新

// components/ui/provider.tsx
import { ChakraProvider } from "@chakra-ui/react"
import { system } from "./theme"

export function Provider(props: { children: React.ReactNode }) {
  return (
    <ChakraProvider value={system}>
      <ThemeProvider>{props.children}</ThemeProvider>
    </ChakraProvider>
  )
}

型定義の生成

カスタムテーマの型安全性を確保するために：

npx @chakra-ui/cli typegen ./theme.ts

実際に使ってみよう

フォームを作ってみる

import { Button, Input, Stack, Text } from "@chakra-ui/react"
import { useState } from "react"

export const SimpleForm = () => {
  const [name, setName] = useState("")

  return (
    <Stack gap="4" maxW="md" p="6">
      <Text fontSize="xl" fontWeight="bold">
        お名前を教えてください
      </Text>
      
      <Input
        placeholder="お名前を入力"
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
      
      <Button colorPalette="blue" disabled={!name}>
        送信
      </Button>
    </Stack>
  )
}

モーダルダイアログ

import { Button } from "@chakra-ui/react"
import { Dialog } from "@/components/ui/dialog"

export const SimpleModal = () => {
  return (
    <Dialog.Root>
      <Dialog.Trigger asChild>
        <Button>モーダルを開く</Button>
      </Dialog.Trigger>
      
      <Dialog.Backdrop />
      <Dialog.Positioner>
        <Dialog.Content>
          <Dialog.Header>
            <Dialog.Title>確認</Dialog.Title>
          </Dialog.Header>
          
          <Dialog.Body>
            <p>この操作を実行してもよろしいですか？</p>
          </Dialog.Body>
          
          <Dialog.Footer>
            <Dialog.CloseTrigger asChild>
              <Button variant="outline">キャンセル</Button>
            </Dialog.CloseTrigger>
            <Button colorPalette="red">実行</Button>
          </Dialog.Footer>
        </Dialog.Content>
      </Dialog.Positioner>
    </Dialog.Root>
  )
}

v2からの主な変更点

良くなったポイント

  • パフォーマンス：4倍高速化
  • ドット記法：Menu.Root、Menu.Itemなど直感的
  • TypeScript：型推論とIntelliSenseの大幅改善
  • asChildプロパティ：柔軟なポリモーフィズム

削除された機能

  • 独自フック：react-useやusehooks-tsなど専門ライブラリの使用を推奨
  • StyleConfig：レシピとスロットレシピに変更
  • Next.jsパッケージ：asChildプロップで対応

移行が必要な主要コンポーネント

  • Modal → Dialog
  • Select → NativeSelect
  • Progress → 複合コンポーネント化

気づきと所感

Chakra UI v3を触って印象的だったのが：

  1. 型推論の改善：VSCodeでの補完がめちゃくちゃ効くようになった
  2. コンポーネント構造の直感性：ドット記法でどのパーツか一目で分かる
  3. パフォーマンス：実際に速くなってるのを体感できる

ただし、v2から移行する場合はBreaking Changesが多いので、計画的に進める必要があります。

おわりに

Chakra UI v3は、パフォーマンス・DX・保守性すべてにおいて大幅に向上したアップデートだと感じています。

これから新しくプロジェクトを始める方には間違いなくv3をおすすめします。既存プロジェクトの方も、長期的に見れば移行する価値は十分にあると思います！

JISOUのメンバー募集中！

プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
興味のある方は、ぜひホームページをのぞいてみてください！
▼▼▼

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?