Chakra UIのバージョンを3に上げる

Chakra UIのバージョンが上がって大分立ちましたが、今回自分のこのブログのChakraのバージョンを3に上げることにしました。

過去にChakra UI v3の変更点について書いたこともあるので具体的な変更点が気になる方はそちらもご覧ください。 TODO: リンクを張る

https://www.chakra-ui.com/docs/get-started/migration

上記のマイグレーションガイドを参考にしながら、変更を行いました。

バージョンの更新

npx @chakra-ui/cli snippet addによってtooltipやcolor-modeなどのスニペットが生成されました。

カスタムテーマの更新

ここは結構違いが大きかったです。 特にcomponentsはここでカスタムしないようになったのは大きな変更点でした。

Providerの更新

snipetで生成されたProviderを使うように変更しました。 ChakraProviderのthemeがvalueにリネームされていました。

npx @chakra-ui/cli typegen ./src/theme.tsを実行することで、themeの型定義が生成されます。

変更のあったコンポーネント

ここからは具体的に変更のあったコンポーネントを紹介します。

Toast

ToastはuseToastがなくなり、useToastの代わりにtoastを直接インポートして使うようになりました。

Hide

Chakra UI v3ではHideコンポーネントが削除されたので、レスポンシブスタイルを使うように変更します。

Hooks

多くのhooksがChakra UIから削除されてしまったため、変更する必要があります。 Chakra UI v3では、useBreakpointValue, useCallbackRef, useDisclosure, useControllableState, useMediaQueryしかhooksは提供されていません。

自分の場合はuseBooleanとuseThemeColorしか使ってなくて、簡単なhooksだったので、プロジェクト内にhooksを作成して対応しました。

sx

sxプロパティも削除されてしまい、cssに変わりました。

Link

isExternalpropsがなくなってしまったので、target="_blank" rel="noopener noreferrer"に変更しました。

まとめ

このブログは小さなプロダクトのためあまり時間がかからなかったですが、大きなプロジェクトだとかなり以降は大変だろうなと思いました。 自動で更新できることろが少なく、hooksなどはどう移行するかを考慮しないといけないのでAIを使っても時間がかかりそうに思いました。 Chakra UIは依然としてサーバーコンポーネントを使うことができないので、これを気にPanda CSS を使ってサーバーコンポーネントを使えるようにするのも良さそうに思いました。 Panda CSSだとChakraが開発しているのもありスタイルの指定方法などは変わらずにサーバーコンポーネントを使えるので、次回はPanda CSSに移行してみる記事を書いてみようと思います。