横断組織が向き合うVisual Regression Testing, JSConf JP 2025

JSConf JP 2025（11月16日開催）にて登壇した10分LTの資料です。

マネーフォワードの toB 領域では、20 以上のプロダクトで Chromatic を用いた Visual Regression Testing（VRT）を運用しています。しかし、利用拡大とともにコストが急増し、統制や方針が追いつかない課題が顕在化しました。

本セッションでは、横断組織として VRT の目的や守備範囲を整理し、プロダクトとデザインシステム間の役割分担、代替手法の検討、Chromatic の運用最適化など、組織全体で VRT 戦略を構築する取り組みについて紹介します。

https://jsconf.jp/2025/ja/talks/visual-regression-testing-chromatic

Transcript

1. 横断組織が向き合う Visual Regression Testing 清川 太雅 2025.11.16 JSConf JP 2025 Track C LT ̶ Chromaticは使い続けるべきなのか ̶
2. まとめ：横断組織が向き合うVRT VRTに寄りかかる前に「戦略」を明確に！ Chromaticは「利⽤規模」を⽬安に付き合おう！ VRTは「何を・いつ実⾏すべきか」を意識して運⽤！ 他のテスト⼿法で担保できないか検討！ パターンレベルを⼿厚く、コンポーネントレベルはデザインシステムで！ ⼩規模：Chromaticでお⼿軽にVRT⼊⾨！ ⼤規模：オープンソースによる代替を検討！⾃⼒運⽤の覚悟を決めろ！ ChromaticならTurboSnapやデフォルトoff、storyをまとめたり 実⾏タイミングを制御したりなど、予めプラクティスを取り⼊れて最適化！ #jsconfjp
3. 清川 太雅 @taigakiyokawa マネーフォワード フロントエンドエンジニア デザインシステム、アクセシビリティ、技術標準化 部屋にあるもの：デロリアン、マスターソード、⾦⽥のバイク
4. 前提知識
5. Visual Regression Testing (VRT) とは
6. Visual Regression Testing (VRT) UIの描画状態の差分をスナップショットで⽐較するテスト APIテストでカバーできない視覚的な変化の検出に便利
7. Chromaticとは
8. VRTやUIレビューを⾏うプラットフォーム Storybookとの相性が良く、⼿軽に導⼊ができる Chromatic
9. Chromaticの料⾦形態 プランごとに毎⽉⼀定数のスナップショットが撮れる 超過分のスナップショットは従量課⾦
10. 事例共有
11. マネーフォワードで何が 起きているのか
12. マネーフォワード クラウドの開発状況 40以上のプロダクトとその開発チームが⾃律的に開発 特にフロントエンドは横断的な繋がりや統制が薄い
13. 4年前...
14. Chromatic利⽤開始 あるプロダクトでChromaticをお試し VRTの機運が⾼まり、じわじわと広まる … … … … …
15. それから数年...
16. あっという間に コストが爆増
17. 20以上のプロダクトでChromaticを導⼊ お⼿軽さゆえに利⽤が拡⼤し、急激にコストが増⼤ プロダクト間での利⽤⽅針や統制も取れていない状況
18. 1年間でStarter → Pro → Enterpriseプランに...
19. 「なんでこんなにコスト かかってるの？」
20. 対策委員会を設置
21. VRTの戦略を⽴てる チーム間で⽬線を揃えて、⽅針を標準化していく VRTにどのくらいコストをかけるべきか
22. VRTにどのくらい コストをかけるべきか
23. これが難しい
24. VRTは⼤いなる安⼼感をもたらす UIを視覚的に直接検査できる「保険」「最後の砦」 カバー範囲はあればあるだけ良い（ように思える）
25. どのテストを どれだけ⼿厚くすべきか
26. 「テストはコスパ」
27. The Testing Trophy and Testing Classifications
28. VRTは粒度というより観点の違い VRTはIntegrationテストでもあり、Unitテストでもある アサーション⽅法が「⾒た⽬の差分⽐較」で、粒度は問わない コンポーネントレベル パターンレベル ページレベル VRT
29. 現状考えている戦略
30. まず、 VRT以外で担保できないか検討する
31. VRT以外のテストにシフトレフト VRTは「ゴールキーパー」 他のテスト⼿法で「ディフェンダー」を⽤意する VRT Static (ESLint) Accessibility (axe-core) Interaction (testing-library) Integration (@storybook/test-runner)
32. 例：@storybook/test-runner インタラクティブなUIのテストにVRTは向いていない あるプロダクトでは約60%のコスト削減に！ Chromatic 100% Chromatic 40% @storybook/test-runner 60%
33. プロダクト開発とデザインシステムで VRTの守備範囲を分ける
34. プロダクトのVRT: パターンレベル UIコンポーネントの組み合わせ（パターン）を主に守る ページレベルでどうしてもテストしたいところはE2Eで
35. デザインシステムのVRT：コンポーネントレベル UIコンポーネント単体のVRTはデザインシステムで担保 プロダクト開発側では実⾏させないことでコストを集約
36. Q. Chromaticは 使い続けるべきなのか？
37. A. 「プロダクトごとの利⽤規模」 で決める
38. ⼩規模：Chromaticで⼿軽に オープンソースで⾃⼒運⽤するよりもコスパが良い VRTの導⼊障壁をかなり減らせるので⼊⾨に最適
39. ⼤規模：オープンソースを検討 「便利さ < お⾦」になってくるので⾃⼒運⽤の覚悟を決める ⽉1万スナップショットを超えるくらいが⽬安かも
40. オープンソースによるVRT インフラの準備・世話が必要だったり、リポジトリを圧迫したり 実はそんなに運⽤⾟くないのかも...?（教えて下さい）
41. Chromatic節約術4選
42. TurboSnapを有効化 余分なスナップショットを減らすオプション 経験値上は約30%のコストカット！ steps: # ... - name: Run Chromatic uses: chromaui/action@v1 with: projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }} onlyChanged: true
43. デフォルトでスナップショットを無効化 disableSnapshotをpreview.tsで設定 「どのstoryでVRTを実⾏するか」を明⽰的に const preview: Preview = { parameters: { chromatic: { disableSnapshot: true }, }, }; export const Foo: Story = { parameters: { chromatic: { disableSnapshot: false }, }, }; .storybook/preview.ts Foo.stories.tsx
44. 複数の状態を1つのstoryにまとめる UIの取りうる状態をまとめて、対象のstory数を減らす ⼩さいコンポーネント向け 9 stories 1 story
45. ワークフローの実⾏を制御する pushする度に実⾏していると不要なスナップショットが増えがち ラベルなどを使い、適切なタイミングでトリガーする chromatic-run push push push
46. 節約術の効果 あるプロダクトでは、約70,000回/⽉ → 約3,000回/⽉に！ デザインシステムでは、VRT対象のstory数が約1/3に！ 3,000 snapshots/month 70,000 snapshots/month
47. 「対象のstory数」と「実⾏頻度」を ⾒直して、運⽤コストを最適化！ 何を いつ
48. まとめ
49. まとめ：横断組織が向き合うVRT VRTに寄りかかる前に「戦略」を明確に！ Chromaticは「利⽤規模」を⽬安に付き合おう！ VRTは「何を・いつ実⾏すべきか」を意識して運⽤！ 他のテスト⼿法で担保できないか検討！ パターンレベルを⼿厚く、コンポーネントレベルはデザインシステムで！ ⼩規模：Chromaticでお⼿軽にVRT⼊⾨！ ⼤規模：オープンソースによる代替を検討！⾃⼒運⽤の覚悟を決めろ！ ChromaticならTurboSnapやデフォルトoff、storyをまとめたり 実⾏タイミングを制御したりなど、予めプラクティスを取り⼊れて最適化！ #jsconfjp