chromaticなにそれ？

Last updated at 2023-11-08Posted at 2023-11-08

コードの変更におけるUIの変更をレビューすることができるようになるツールです。
Storrybookのチュートリアルで触りを学ぶことができます。

chromaticとは？

Storybookと連携してビジュアルリグレッションテストを実行することができます。
各コンポーネントのスナップショットを生成し、画像を比較し差分を検出することができます。

また、作成・編集されたコンポーネントのUIレビューを行うことができ、Githubと組み合わせることでUIのチェックステータスをGithub上で確認することができるのでQAテストまでのステータスを一元管理することができます！

料金プランがいくつかあります。
プランによってできることが異なるので事業で利用する場合は事前に確認しておくと良いと思います。

プライベートで勉強したぐらいであればFreeのプランで問題ないと思います！

有料プランは

グレードを上げるとテストできるブラウザが増える、スナップショットの数が増えるなどがあります。

ブラウザテストをChrome以外でも行いたい場合はSTANDARD以上のプランでないといけません。
また、VRTを利用したいと考えchromaticを利用するのであれば、reg-suitを利用して独自で実装する方法もあるので合わせて検討いただくのが良いと思います！

前述でも触れましたが、chromaticはビジュアルのレビューUIやUXのフィードバックを蓄積することができます。

もちろんFigmaなどデザインツール内のコメント機能を利用するなど、制作のワークフローを工夫することでコードレビューのように社内にノウハウを蓄積することはできます。

ただ、より効率的にノウハウを蓄積することができるかつコード側とも紐づくので管理も容易になります。

Storybookの公式でtutorialを用意してくれているのでそちらから一通り学ぶことができると思います！

Storybookの内容も多く含まれるので同時に学ぶと良いと思います。
chromaticはStorybookの利用を前提としており、もっと言うとデザインシステムを構築することも前提とされています。

開発チームが大規模であればあるほどデザインシステムがもたらす恩恵は大きいと思います。
Storybookやchromaticもそうですが、導入で得たいものは何か？を明確にできるよ良いのではと考えます！

Figmaとの連携などもできるそうで、デザインとの連携もよりシームレスかつ強化できそうなイメージがわきました。

これまでデザインとコードを紐づけるのは運用でカバーするなど管理という面では悩ましい部分が多かったと思いますが、その点は解決してくれそうだというのが所感です。

Saasサービスであるためメンテナンスコストは抑えることができる反面、細かい要望には対応しにくいというデメリットはあります。

ENTERPRISEプランであれば叶えられる可能性はあります。

ただ、実装されている機能以上のことはできませんので特殊な要件がある場合やVRTが使いたいだけということであれば独自実装を選択することがいいかもしれないのでよく検討いただけると幸いです