chakra-ui v3を試してみる

$ bun init
$ bun i @chakra-ui/react@next @emotion/react
$ bunx @chakra-ui/cli@next snippet add

別に@nextはもういらない気がするんだけど、どうなんだろう

Happa8

そもそもvite初期化するの忘れてたのでやり直し

$ bun create vite
$ bun i
$ bun run dev

無事起動
久々にbun触ったけど爆速で感動する

Happa8

chakra-uiのセットアップが終わったら ./src/components/uiに大量に.tsxファイルができている
park-uiみたいな感じで、chakra-ui自体はヘッドレスコンポーネントライブラリとして動いて、snippetでcssつけてく感じかな？　だとするとark-uiと何が違うんだ

Happa8

あー
ark-uiと違って、park-uiのような色付け＋基本的な使い方用にセットアップしてよしなにやってくれるのがchakra-ui@v3か

Happa8

公式の方法に従ってProviderとtsconfig.jsonとvite.config.tsを修正

Happa8

<Provider> もさっきsnippetで落としてきたコンポーネント集にいる

"use client"

import { ChakraProvider, defaultSystem } from "@chakra-ui/react"
import { ColorModeProvider } from "./color-mode"

export function Provider(props: React.PropsWithChildren) {
  return (
    <ChakraProvider value={defaultSystem}>
      <ColorModeProvider>{props.children}</ColorModeProvider>
    </ChakraProvider>
  )
}

v2までで見たのと大体おなじみ
確かに、ChakraProviderいじりたかったらここいじればいいっていうのはいいな

Happa8

import { Box, Heading } from "@chakra-ui/react";

function App() {
  return (
    <Box
      height={"100%"}
      width={"100vw"}
      display={"flex"}
      justifyContent={"center"}
      alignItems={"center"}
    >
      <Heading>Hello, world!</Heading>
    </Box>
  );
}

export default App;

基本的な書き心地はv2以前と変わらず
っていうか最近ずっとpanda css触ってたせいで若干戸惑った

Happa8

デカ目の変更点を中心に見ていこう

色関係のトークンがセマンティックトークンになったそうな

<Box colorPalette={"blue"}>
    <Button bg="colorPalette.subtle" color="colorPalette.fg">
      Button
    </Button>
  </Box>
  <Box colorPalette={"red"}>
    <Button bg="colorPalette.subtle" color="colorPalette.fg">
      Button
    </Button>
  </Box>

親のcolorPaletteに基づいてセマンティック部分を指定したらよしなにやってくれるモードとかはかなり便利そう

Happa8

公式チュートリアルでは.subtleと.fgを組み合わせる方法と.solidと.contrastを組み合わせる方法が推奨されてる

      <Box colorPalette={"blue"}>
        <Button bg="colorPalette.subtle" color="colorPalette.fg">
          Subtle & Fg
        </Button>
      </Box>
      <Box colorPalette={"blue"}>
        <Button bg="colorPalette.solid" color="colorPalette.contrast">
          Solid & Contrast
        </Button>
      </Box>

Happa8

snippetで基本的なコンポーネントを取ってくる理由も書かれてた
We moved away from closed components to open, compound components by default. This makes it easier for you compose your own components and reduce the maintenance on our end.
状態管理を黒魔術化しないことでメンテナンス性を高めますよってことかな

だからこそ、デフォルトの構造をもってくるsnippetが必要と

カスタマイズしたくなったときは黒魔術を一旦紐解いてやるんじゃなくて、このsnippetファイルをいじればいいっていうのは、かなり合理的

Happa8

あとはテーマに関するランタイム関数の削除、スタイリングエンジンの修正、css animationのcss基準への統一　あたりかな
ここらへんはPanda cssの開発成果を輸入した感ある

Happa8

依存ライブラリも減らしたらしい
アイコンライブラリとか、テーマ管理ライブラリとか、hooksライブラリとか
じゃあ必要なものは内製したってことかな

Happa8

追加で作られたコンポーネントは

Rating
Select
PasswordInput
FileUpload
CheckboxCard
Segment Control
Nested Menu
あれ？ここらへんv2でもなかったか？

Happa8

次のアップデート予定

Arkからピッカー系コンポーネントの実装：カラーピッカー、デートピッカー
Chakra UI Proのりデザイン
Figma UI Kitのリデザイン
FigPilotのリデザイン
- なんじゃこりゃ、と思ったが、どうやらChakra UIのFigma UI Kitを使ってFigma上でUIを組むと、自動でコードにしてくれる代物らしい　ひょえー
React 19のStyleタグへの対応
あたりらしい

Happa8

FAQ意訳

Chakra UIの内部ではpanda cssが使われているのか
- No. 破壊的変更を抑えるためにランタイムcss(emotion)の採用を継続
- でもv3にはすでにたくさん変更があるから、はやくなんとかしないとねって感じ
- （将来的にも）pandaは使わなくて住むかもしれない　React19のstyle tagが優秀そうだから
Ark UIのコンポーネントは全部移植される予定なの？
- Yes. とりあえずColor PickerやDate Pickerあたりから
Snippetは使わなければいけないの？
- No. 開発がスムーズに行くと思うから推奨はするけどね
なんでロゴ新しくなったの？
- Chakra UIの新時代の幕開けだから Zag.jsやArk UI、Panda CSSとシンクロしながらいろんな価値を提供
なんでこんなにv3ローンチに時間かかったの？
- それ自分でもなんども考えました（多分sageの心情？
- Chakra UIの方向性のデザインに時間かかったっぽい

Happa8

記事の最後に

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

ってかいてた
やっぱり@nextはいらなかったっぽい

Happa8

大体感触わかった
ランタイムcssは残ってるから、完全にゼロランタイムとはいかないけど、それでもRSC対応だしよしなにやってくれそうでいいね

このスクラップは1ヶ月前にクローズされました