Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Reactで始める リグレッションテスト概論
Search
Tsubasa SEKIGUCHI
PRO
July 17, 2025
Programming
0
24
Reactで始める リグレッションテスト概論
社用で作成したエンジニア向けのVRT紹介スライドです。
特に機密情報はないのでそのまま公開しています
Tsubasa SEKIGUCHI
PRO
July 17, 2025
Tweet
Share
More Decks by Tsubasa SEKIGUCHI
See All by Tsubasa SEKIGUCHI
エンジニアでも捗る デザイナー的思考入門
tinykitten
PRO
1
1.1k
Gunma.web #55
tinykitten
PRO
0
210
React Nativeではじめる ハイパフォーマンス スマホアプリ開発(GENIEE Edit)
tinykitten
PRO
0
120
AWS/GCPで始める 生成AI入門
tinykitten
PRO
0
150
Rustとtonicで始める gRPC入門(GENIEE Edit)
tinykitten
PRO
0
43
スモールスタートで始める フィードバック管理システム開発入門
tinykitten
PRO
0
290
Rustとtonicで始める gRPC再入門
tinykitten
PRO
0
930
gRPCで始める ハイパフォーマンス タイプセーフウェブ開発
tinykitten
PRO
0
270
ノンデザイナーが 多少マシな見た目の資料を作る方法
tinykitten
PRO
0
200
Other Decks in Programming
See All in Programming
MCPを使ってイベントソーシングのAIコーディングを効率化する / Streamlining Event Sourcing AI Coding with MCP
tomohisa
0
170
PHPカンファレンス関西2025 基調講演
sugimotokei
2
160
スタートアップの急成長を支えるプラットフォームエンジニアリングと組織戦略
sutochin26
1
7.3k
A full stack side project webapp all in Kotlin (KotlinConf 2025)
dankim
0
150
PipeCDのプラグイン化で目指すところ
warashi
1
310
RailsGirls IZUMO スポンサーLT
16bitidol
0
200
iOS 26にアップデートすると実機でのHot Reloadができない?
umigishiaoi
0
140
GPUを計算資源として使おう!
primenumber
1
250
ソフトウェア設計とAI技術の活用
masuda220
PRO
21
4.6k
SQLアンチパターン第2版 データベースプログラミングで陥りがちな失敗とその対策 / Intro to SQL Antipatterns 2nd
twada
PRO
19
4.1k
なぜ「共通化」を考え、失敗を繰り返すのか
rinchoku
1
680
リバースエンジニアリング新時代へ! GhidraとClaude DesktopをMCPで繋ぐ/findy202507
tkmru
3
1k
Featured
See All Featured
RailsConf 2023
tenderlove
30
1.1k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Music & Morning Musume
bryan
46
6.7k
How to Ace a Technical Interview
jacobian
278
23k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Balancing Empowerment & Direction
lara
1
460
Site-Speed That Sticks
csswizardry
10
700
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
980
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Transcript
NON-CONFIDENTIAL PUBLIC DOMAIN DOCUMENTATION Freelance Frontend Engineer Tsubasa SEKIGUCHI Reactで始める
リグレッションテスト概論 Getting Started with Regression Testing in React 2025.07.18 | 技術共有会 #8
関口 翼 Tsubasa SEKIGUCHI aka TinyKitten フリーランス フロントエンドエンジニア 関口 翼
Tsubasa SEKIGUCHI aka TinyKitten / きったん フリーランス フロントエンドエンジニア 2 2025.07.18 | 技術共有会 #8
TinyKitten タイニーキトゥン aka 関口 翼 フリーランス フロントエンドエンジニア 3 2025.07.18 |
技術共有会 #8
TrainLCD スマートフォンで使えるトレインビジョン 鉄道での移動中に迷いそうな時、 電車から降りれるか不安な時 きっとあなたの役に立つはずです 日本全国の鉄道路線で使える 新感覚ナビゲーションアプリ 4 2025.07.18 |
技術共有会 #8
5 バズりました ユーザーさんがシェアしてくれたので App Storeランキング12位に入ってました 寝耳に水です TrainLCD 直近のハイライト 2025.07.18 |
技術共有会 #8
そもそも ”リグレッション”って何? What does “regression” really mean? 6 2025.07.18 |
技術共有会 #8
7 「直したら壊れた」 経験、ありませんか? ちょっと思い出してください 全画面のモーダルが壊れる テーマファイル1行修正 → モーダル、閉じられない… あれ?前は表示されてたはずなのに... ローカルだと動いてたんだけどな…
この画面、テスト対象外だったか… えっ、他の画面も使ってたの そのコンポーネント… 2025.07.18 | 技術共有会 #8
8 リグレッションとは 変更が意図せず既存の 機能を壊してしまう現象のこと バグの発生要因はさまざま コード変更、依存関係、 スタイル干渉、etc. 実のところ、 リファクタ・改善が 思わぬ副作用を呼ぶのが怖いところ
2025.07.18 | 技術共有会 #8 実はそれ、 “リグレッション” と呼ばれる現象です “直したら壊れた”経験
9 2025.07.18 | 技術共有会 #8 “壊れていないこと” を確認するテストが 必要なんです つまり、 壊れてないことを、証明できる安心感。
10 2025.07.18 | 技術共有会 #8 Visual Regression Testingとは? What is
Visual Regression Testing?
2025.07.18 | 技術共有会 #8 11 スタイル崩れ・配置ミスなど、 構造では気づきにくい変化を検出 引用: https://tech.speee.jp/entry/2020/06/30/110000 “見た目の差分”を
画像でチェック ビジュアルリグレッションテスト(VRT)
12 2025.07.18 | 技術共有会 #8 STEP2 差分画像を自動生成 STEP3 人の目でレビュー (崩れがないかを目視で確認)
STEP1 UIの変更を含むPRを作成 Pull Request ごとに 差分を画像で 確認できます。 reg-suit や Percy を使えば、
VRTを導入することで スタイルの微細な崩れに気づける CIに組み込めば コードレビューも スムーズになります VRTを運用することで “うっかり崩れ” に備える 2025.07.18 |
技術共有会 #8 13 気づけない崩れに 備えて、 今こそ導入しよう 見逃しがちなUIの崩れ、VRTで気づける
14 2025.07.18 | 技術共有会 #8 Visual Regressionの実践 Hands-on Visual Regression
Testing
15 2025.07.18 | 技術共有会 #8 差分ノイズが多すぎて 本当に見たい差分が埋もれる 毎回100枚超の画像… 差分レビューを諦めたくなる 撮りすぎが原因
→ 本当に必要な画面 だけに絞る テスト対象の 基準を決める → トラフィックが多い または購入・申込に 直結する部分だけ “差分地獄”から抜け出すには?
細かすぎるピクセル差で 「意味のない差分」が大量に出る 誤検知が多くて レビュー精度がどんどん下がる 16 2025.07.18 | 技術共有会 #8 しきい値を見直す
→ 差異率や比較対象の 範囲を調整 ノイズを減らす → date、uuid 一時的ラベル等を 検索対象から除外する 意味のある差分に集中するには?
17 2025.07.18 | 技術共有会 #8 大事な差分が検出されてない… 差分が見逃される 画面全体は同じに見えるのに... パッと見で油断する 条件を見直す
→ 遅延・アニメーション 要素に注意 意図的な変更は 「更新」として扱う → PR粒度やタイミングを チームで合わせる 「差分見逃し」から抜け出す工夫
毎回設定変更が必要で… 運用コストが地味に高い 差分レビューの知見が属人化して… ノウハウが共有されない 18 2025.07.18 | 技術共有会 #8 設定・仕組みを
共通化 → 各環境のpresetや diffルールを標準化 知見を残す・回す → PRテンプレに コメント例、 レビューガイドを追加 「差分見逃し」から抜け出す工夫
19 2025.07.18 | 技術共有会 #8 ツール選定と導入のはじめかた Getting Started with Tool
Selection and Setup
20 2025.07.18 | 技術共有会 #8 “チームで回せる” ツールを選ぼう → 一人が頑張らなくても、 仕組みで回る
まずはツール選定から コストについて OSS or SaaS、有料プランの有無 導入の手軽さ 設定のしやすさ・CI統合 チーム連携 PRへの差分通知、レビューのしやすさ
21 2025.07.18 | 技術共有会 #8 コスト・レビュー負荷 導入難度を天秤に → “試してみる”だけでも 価値がある
大事なのは「チームが使い続けられること」 SaaSy h Chromatic (Storybook公式、SaaS・GitHub連携◎ h Percy (汎用Web向け・多機能) OSSy h reg-suit (GitHub連携・軽量 h Loki (Storybookと相性◎・セットアップ簡単 h Playwright screenshot testing (E2E連動型・柔軟)
22 2025.07.18 | 技術共有会 #8 今の自分たちに 合う選択肢を探そう → フィット感のある一歩を 選ぶことが継続のカギ
「最強のツール」ではなく チームの予算と開発規模 SaaS課金はどこまでOK? 小規模ならOSSも◎ CI環境との親和性 GitHub Actions?Bitrise?Jenkins? UIの構成と技術スタック → Storybookある?E2E使ってる? React or Vue?
23 2025.07.18 | 技術共有会 #8 StorybookなしでもOKな最小構成 UIの代表画面だけキャプチャ 差分はPRにコメントで通知 →reg-suit ×
GitHub Actions 一歩進んだ構成 ・PercyやChromaticで ブラウザ描画検出 ・主要ブラウザ or 画面幅だけに絞る ・CI完結にして 「レビュー前に見える」状態を “見える化”の体験が 第一歩になる → まずは1画面からでも 始めてみよう 「完璧な導入」じゃなくてもいい
24 2025.07.18 | 技術共有会 #8 まとめ VRT導入で迷わないために Conclusion: How to
Get Started with VRT Without Getting Stuck
25 2025.07.18 | 技術共有会 #8 ツール選定はチームに合うことが最優先 「最強」より「続けられる」を選ぶ 試すだけでも価値がある 一歩踏み出すことで全体の理解が深まる “見える化”でチームの会話が変わる
コメント1つからレビュー文化が始まる でも、“使いこなす” より“チームに根付く” が大事 → 一緒に育てていくもの として始めよう VRTはまだ特殊な存在かもしれない
Freelance Frontend Engineer Tsubasa SEKIGUCHI ご清聴ありがとうございました! Thank you for listening!
2025.07.18 | 技術共有会 #8 NON-CONFIDENTIAL PUBLIC DOMAIN DOCUMENTATION