ChakraUI v3がついにリリースされた！
Chakra v3は、パフォーマンス、速度、コンポーネント間の一貫性を向上させるためにChakraを完全に書き直したとのこと。
本記事では、Chakra v3の概要を紹介していく。
デザインアーキテクチャ
Chakra v3では、ヘッドレスライブラリArk UIとPanda CSSのスタイリングAPIを組み合わせ、Park UIをデザインシステムとして使用することで、ツールのエコシステムを統一している。
セマンティックトークンの追加
セマンティックトークンを使用すると、各コンポーネントを手動でスタイルすることなく、トークンを簡単にパーソナライズできる。Chakra v3は、各カラーパレットに7つのセマンティックトークンを提供し、ダークモードを考慮することなく究極の柔軟性を提供する。
// A subtle version of red
<Box bg="red.subtle" color="red.fg">
Welcome
</Box>
// A solid version of red
<Box bg="red.solid" color="red.contrast">
Welcome
</Box>なお、上記コードはcolorPaletteを使って、このようにも書ける。
<Box colorPalette="red">
<Box bg="colorPalette.subtle" color="colorPalette.fg">
Welcome
</Box>
<Box bg="colorPalette.solid" color="colorPalette.contrast">
Welcome
</Box>
</Box>デフォルトでオープンなコンポーネントへ
もともとv2では以下のようなクローズドなコンポーネントであった。
<Checkbox>Click me</Checkbox>v3ではカスタマイズしやすくするためにデフォルトではオープンなコンポーネントを提供するようになった。
<Checkbox.Root>
<Checkbox.HiddenInput />
<Checkbox.Control>
<Checkbox.Indicator />
</Checkbox.Control>
<Checkbox.Label>Click me</Checkbox.Label>
</Checkbox.Root>もちろんsnippets機能を利用してv2のようにクローズにすることも可能だ。
npx @chakra-ui/cli@init snippets add
import { Checkbox } from "@/components/ui/checkbox"
const Demo = () => <Checkbox>Click me</Checkbox>ランタイムパフォーマンスの向上
v3になり、ランタイムパフォーマンスが向上した。
概要は以下の通り。
- テーマ内のランタイム関数を削除:
以前は、テーマシステムで関数を使用することができましたが、これがランタイムパフォーマンスに悪影響を与える可能性があった。現在は、Panda CSSに触発された「レシピ」と呼ばれるバリアントベースのシステムに切り替えた。 - スタイリングエンジンの外部化:
スタイリングエンジンはReactツリーの外部で初期化され、コンポーネントによって消費される。これにより、すべてのコンポーネントでスタイルの解決とレンダリング時間が高速化される。 - CSSアニメーションへの移行:
framer-motion依存を削除し、プラットフォームのアニメーション機能を使用するようになった。これにより、パフォーマンスが向上し、アプリケーションのバンドルサイズが削減された。
新しいコンポーネントの追加
ヘッドレスコンポーネントのArk UIの新しいコンポーネントを追加。
エコシステムを受け入れる
一般的なニーズのために車輪を再発明したくない、最高のコンポーネントを提供することに集中するという指針から、Chakraからかなりの数のモジュールが削除された。以下が削除された代表的なものだ。
lucide-reactやreact-iconsのようなより堅牢なアイコンライブラリを支持して、アイコンを削除。next-themesやremix-themesのようなものを支持して、内部のカラーモード管理を削除。react-useやuse-hooks-tsのような堅牢なフックライブラリを支持して、ほとんどのフックを削除。
おわりに
CSS in JSの対応がemotionからPanda CSSに変わったのかと思ったが、そうではないらしい。
なので、RSC対応への状況はv2とはあまり変わっていないようだが、アップデート内容は多くの魅力的な改善が含まれていた。
今後、RSC対応されることを期待したい。
