Visual Regression Testを使ってChakra UIからTailwindCSSに安全に移行する

このブログはCSSライブラリでChakra UIを使用していたのですが、Chakra UIだとサーバーサイドレンダリングができないのでCSS Libraryを移行することを決めました。 今回は移行の過程をまとめようと思います。

Tailwind CSSに決めた理由

書き換えはAIに頼みたいと思っていたので、AIの精度が良いとされるTailwind CSSにしました。 日に日にTailwind CSSの勢いが増しているなと最近感じます。

Tailwwind CSSへの移行を決める前に、Panda CSSへの移行も検討しました。 Panda CSSはChakra UIと同じ人が開発をしているので書き方が似ているかな?と思ったのですが、以下の理由から辞めることにしました。

• Panda CSSを使っても結局コードの差分は大きいことが分かった
• Panda CSSベースで作られているPark UIを使えばChakra UIのコンポーネントと同じように使えるのですが、開発が活発でないため、将来性が不安
• Tailwind CSSのコミュニティが活発で、Tailwind CSSを使うことで得られるメリットが大きいと感じた
• Tailwind CSSの方がAIでコードを出力するときに適している

VRT(Visual Regression Test)の導入

移行をするにあたり、UIの差分はコードを見るだけだと分からないことから、VRTを導入しました。

VRTはPlayWrightを使用しました。 以下のように書くだけで簡単にVRTを実行することができます。

VRTを使うと下の画像のように差分を簡単に確認することができます。

PlayWrightのテストを実行する

"test:visual": "playwright test --project=chromium --reporter=list",

scriptは上記を追加しました。 --reporter=listを追加することで、失敗してもhtmlを生成せずにコマンドが終了するようにすることで、AIが実行しても失敗したらすぐに修正してくれます。

これで準備が完了しました。 あとはClaude Codeに移行してもらうように指示して、差分があれば自動で修正してもらうようにします。 注意点としては、中々差分が全くない状態までAIにコーディングしてもらうのは難しかったので、長くなった場合は自分で--reporter=htmlにしてどれくらいの差分があるのかを確認するのが良いと思いました!