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