Chakra UI の v3 のリリース発表で気になったこと
v3 のリリースがようやく発表
v3 のリリース予定時期は2023年後半だったので、1年遅れ...という感じでしょうか。ようやく発表されました。
FAQ に「なぜこんなに時間がかかったのですか?」という質問があるくらいには、時間がかかったと思います。ただ、アップデート内容を見る限り、かなり大きなアップデートがされているので、時間がかかるのも納得、という感じです。
注意事項
リリース発表を読んで、個人的に気になったことを記載しており、リリース発表の内容を網羅はしていません。
RSC(React Server Components) への対応
結論
RSC への対応状況は v2 と変更はありません。引き続き、Chakra UI のコンポーネントはクライアントコンポーネントとしてレンダリングされます。
以下に説明のページも作成されていました。
背景知識
Chakra UI は内部的に emotion （ランタイム CSS-in-JS）を使用しているため、RSC が使用できません。ただ、将来的には Panda CSS へ移行して、RSC を使用できるようにする、ただ、具体的な Panda CSS への移行時期は未定でした。そして、少なくとも移行は v3 ではない、ということは明示されていた状態での v3 のリリース発表でした。
Panda CSS はゼロランタイム CSS-in-JS に分類される CSS のライブラリです。
背景の詳細については、以前に以下の記事でまとめています。
詳細
勘違いしたのは私だけではないと思いますが...Panda CSS がデザインアーキテクチャの章の図に含まれており、Panda CSS が Chakra UI の v3 に取り込まれたのだと思いました。
（引用）https://www.chakra-ui.com/blog/00-announcing-v3#design-architecture
もし、Panda CSS が取り込まれてるのであれば、emotion も外されているはずなので、RSC に対応していることを意味し、かなりプラス要素の大きいリリース発表になります。
ただ、FAQ にある通り、Panda CSS は含まれていません。デザインシステムに含まれていますが、 Chakra UI のコンポーネントには含まれていない、ということだと思います。
v3 のソースコードを見ると以下の cli に関する実装で panda が使用されていますが、コンポーネントのスタイリングは引き続き emotion が使用されています。
また、FAQ に記載されている Panda CSS を将来的に取り込まない可能性がある、という部分には驚きました。ランタイム Css-in-JS というレンダリングのパフォーマンスに悪影響のある方式という意味でも Panda CSS のようなゼロランタイム CSS-in-JS に移行するのだと思っていました。
コンポーサブルなコンポーネント
結論
Ark UI へ移行したことによって、コンポーネントの実装がヘッドレス UI のライブラリのような書き味になっており、v3 でコンポーネントの実装はかなり変わります。以下は v3 の Checkbox の実装例です。
<Checkbox.Root>
<Checkbox.HiddenInput />
<Checkbox.Control>
<Checkbox.Indicator />
</Checkbox.Control>
<Checkbox.Label>Click me</Checkbox.Label>
</Checkbox.Root>
背景知識
Ark UI はヘッドレス UI のライブラリです。React など特定のフレームワークへの依存度が少なくなるように実装されている部分が特徴で、ヘッドレス UI としては珍しく様々なフレームワーク（Solid/Vue）に対応しています。このライブラリの書き味が Chakra UI の v3 に引き継がれてます（Ark UI を使っている人からすると見慣れた実装になります）。
詳細
v2 と v3 の Checkbox のコンポーネントの実装を比較するとわかりやすいと思いますが、かなり書き味は変わっています。
// v2
<Checkbox>Click me</Checkbox>
// v3
<Checkbox.Root>
<Checkbox.HiddenInput />
<Checkbox.Control>
<Checkbox.Indicator />
</Checkbox.Control>
<Checkbox.Label>Click me</Checkbox.Label>
</Checkbox.Root>
v3 では Checkbox というコンポーネントを構成している要素を細かくバラし、それぞれの要素を独立したコンポーネントとして定義しています。Checkbox の場合、バラバラにする粒度は以下です。
(引用)https://ark-ui.com/react/docs/components/checkbox
この実装方法のメリットは、柔軟性の向上だと思います。
例えば、Checkbox のラベルに対して、スタイルを適用したい場合やアニメーションを適用したい場合に、<Checkbox.Label> に設定をすればOKです。
<Checkbox.Root>
<Checkbox.HiddenInput />
<Checkbox.Control>
<Checkbox.Indicator />
</Checkbox.Control>
<Checkbox.Label>Click me</Checkbox.Label> ← スタイルやアニメーションを適用
</Checkbox.Root>
v2 では以下のように Chakra UI として用意している props が公開されていました。そして、それを使用することで、スタイルやアニメーションを適用していました。
（引用）https://v2.chakra-ui.com/docs/components/checkbox/props
v2 の実装としては以下のようになっており、例えば、CheckIcon には色とサイズのみスタイルが適用可能で、それ以外を適用することはできません。
export const Checkbox = forwardRef(function Checkbox(props, ref) {
const { children, iconColor, iconSize, icon, inputProps, ...checkboxProps } =
props
const checkbox = useCheckbox(checkboxProps)
return (
<chakra.label {...checkbox.getRootProps()}>
<input {...checkbox.getInputProps(inputProps, ref)} />
<chakra.span {...getCheckboxProps()}>
<CheckIcon as={icon} color={iconColor} size={iconSize} />
</chakra.span>
{children && (
<chakra.span {...checkbox.getLabelProps()}>{children}</chakra.span>
)}
</chakra.label>
)
})
色とサイズ以外のスタイル設定するには CheckIcon に props を追加する PR を Chakra UI に出すか、自分で Checkbox を実装するしかなく、ほとんどのユーザーが後者の選択をしていたと思います。
特に独自のデザインシステムを持つ場合は、デザインが細やかになるため、v2 のコンポーネントだとスタイル等を適用しきれないことが多いと思います。デザインシステムを持つような場合は、v3 のコンポーサブルなコンポーネントへの変更はかなりプラスだと思います。
ただ、デザインシステムを持たず、Chakra UI が提供するコンポーネントをそのまま使う場合は、実装量が増える、というデメリットがのしかかると思います。それに対しては、公式から基本実装を生成する cli が提供されているため、これを使えば実装量が増える、というデメリットも軽減できる、ということだと思います。
まとめ
リリースの内容は、従前に公開されていた情報から大きく外れるものはなかったため、大きな驚きはありませんでしたが、v3 のリリースは一生されないのだろうか...と思っていたので歓喜でした。v4 にも期待です。
Discussion