Reactで始める リグレッションテスト概論

社用で作成したエンジニア向けのVRT紹介スライドです。
特に機密情報はないのでそのまま公開しています

Transcript

1. NON-CONFIDENTIAL PUBLIC DOMAIN DOCUMENTATION Freelance Frontend Engineer Tsubasa SEKIGUCHI Reactで始める リグレッションテスト概論 Getting Started with Regression Testing in React 2025.07.18 | 技術共有会 #8
2. 関口 翼 Tsubasa SEKIGUCHI aka TinyKitten フリーランス フロントエンドエンジニア 関口 翼 Tsubasa SEKIGUCHI aka TinyKitten / きったん フリーランス フロントエンドエンジニア 2 2025.07.18 | 技術共有会 #8
3. TinyKitten タイニーキトゥン aka 関口 翼 フリーランス フロントエンドエンジニア 3 2025.07.18 | 技術共有会 #8
4. TrainLCD スマートフォンで使えるトレインビジョン 鉄道での移動中に迷いそうな時、 電車から降りれるか不安な時 きっとあなたの役に立つはずです 日本全国の鉄道路線で使える 新感覚ナビゲーションアプリ 4 2025.07.18 | 技術共有会 #8
5. 5 バズりました ユーザーさんがシェアしてくれたので App Storeランキング12位に入ってました
 寝耳に水です TrainLCD 直近のハイライト 2025.07.18 | 技術共有会 #8
6. そもそも
 ”リグレッション”って何？ What does “regression” really mean? 6 2025.07.18 | 技術共有会 #8
7. 7 「直したら壊れた」 経験、ありませんか？ ちょっと思い出してください 全画面のモーダルが壊れる テーマファイル1行修正 → モーダル、閉じられない… あれ？前は表示されてたはずなのに... ローカルだと動いてたんだけどな… この画面、テスト対象外だったか… えっ、他の画面も使ってたの そのコンポーネント… 2025.07.18 | 技術共有会 #8
8. 8 リグレッションとは 変更が意図せず既存の 機能を壊してしまう現象のこと バグの発生要因はさまざま コード変更、依存関係、 スタイル干渉、etc. 実のところ、 リファクタ・改善が 思わぬ副作用を呼ぶのが怖いところ 2025.07.18 | 技術共有会 #8 実はそれ、 “リグレッション” と呼ばれる現象です “直したら壊れた”経験
9. 9 2025.07.18 | 技術共有会 #8 “壊れていないこと” を確認するテストが 必要なんです つまり、 壊れてないことを、証明できる安心感。
10. 10 2025.07.18 | 技術共有会 #8 Visual Regression Testingとは？ What is Visual Regression Testing?
11. 2025.07.18 | 技術共有会 #8 11 スタイル崩れ・配置ミスなど、 構造では気づきにくい変化を検出 引用: https://tech.speee.jp/entry/2020/06/30/110000 “見た目の差分”を 画像でチェック ビジュアルリグレッションテスト(VRT)
12. 12 2025.07.18 | 技術共有会 #8 STEP2 差分画像を自動生成 STEP3 人の目でレビュー (崩れがないかを目視で確認) STEP1 UIの変更を含むPRを作成 Pull Request ごとに 差分を画像で 確認できます。 reg-suit や Percy を使えば、
13. VRTを導入することで スタイルの微細な崩れに気づける CIに組み込めば コードレビューも スムーズになります VRTを運用することで “うっかり崩れ” に備える 2025.07.18 | 技術共有会 #8 13 気づけない崩れに 備えて、 今こそ導入しよう 見逃しがちなUIの崩れ、VRTで気づける
14. 14 2025.07.18 | 技術共有会 #8 Visual Regressionの実践 Hands-on Visual Regression Testing
15. 15 2025.07.18 | 技術共有会 #8 差分ノイズが多すぎて 本当に見たい差分が埋もれる 毎回100枚超の画像… 差分レビューを諦めたくなる 撮りすぎが原因 → 本当に必要な画面 だけに絞る テスト対象の 基準を決める → トラフィックが多い または購入・申込に 直結する部分だけ “差分地獄”から抜け出すには？
16. 細かすぎるピクセル差で 「意味のない差分」が大量に出る 誤検知が多くて レビュー精度がどんどん下がる 16 2025.07.18 | 技術共有会 #8 しきい値を見直す → 差異率や比較対象の
 範囲を調整 ノイズを減らす → date、uuid 一時的ラベル等を 検索対象から除外する 意味のある差分に集中するには？
17. 17 2025.07.18 | 技術共有会 #8 大事な差分が検出されてない… 差分が見逃される 画面全体は同じに見えるのに... パッと見で油断する 条件を見直す → 遅延・アニメーション 要素に注意 意図的な変更は 「更新」として扱う → PR粒度やタイミングを チームで合わせる 「差分見逃し」から抜け出す工夫
18. 毎回設定変更が必要で… 運用コストが地味に高い 差分レビューの知見が属人化して… ノウハウが共有されない 18 2025.07.18 | 技術共有会 #8 設定・仕組みを
 共通化 → 各環境のpresetや diffルールを標準化 知見を残す・回す → PRテンプレに コメント例、 レビューガイドを追加 「差分見逃し」から抜け出す工夫
19. 19 2025.07.18 | 技術共有会 #8 ツール選定と導入のはじめかた Getting Started with Tool Selection and Setup
20. 20 2025.07.18 | 技術共有会 #8 “チームで回せる”
 ツールを選ぼう → 一人が頑張らなくても、
 仕組みで回る まずはツール選定から コストについて OSS or SaaS、有料プランの有無 導入の手軽さ 設定のしやすさ・CI統合 チーム連携 PRへの差分通知、レビューのしやすさ
21. 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. 22 2025.07.18 | 技術共有会 #8 今の自分たちに
 合う選択肢を探そう → フィット感のある一歩を
 選ぶことが継続のカギ 「最強のツール」ではなく チームの予算と開発規模 SaaS課金はどこまでOK？
 小規模ならOSSも◎ CI環境との親和性 GitHub Actions？Bitrise？Jenkins？ UIの構成と技術スタック → Storybookある？E2E使ってる？
 React or Vue？
23. 23 2025.07.18 | 技術共有会 #8 StorybookなしでもOKな最小構成 UIの代表画面だけキャプチャ
 差分はPRにコメントで通知
 →reg-suit × GitHub Actions 一歩進んだ構成 ・PercyやChromaticで
 ブラウザ描画検出
 ・主要ブラウザ or 画面幅だけに絞る ・CI完結にして
 「レビュー前に見える」状態を “見える化”の体験が
 第一歩になる → まずは1画面からでも
 始めてみよう 「完璧な導入」じゃなくてもいい
24. 24 2025.07.18 | 技術共有会 #8 まとめ VRT導入で迷わないために Conclusion: How to Get Started with VRT Without Getting Stuck
25. 25 2025.07.18 | 技術共有会 #8 ツール選定はチームに合うことが最優先 「最強」より「続けられる」を選ぶ 試すだけでも価値がある 一歩踏み出すことで全体の理解が深まる “見える化”でチームの会話が変わる コメント1つからレビュー文化が始まる でも、“使いこなす”
 より“チームに根付く”
 が大事 → 一緒に育てていくもの
 として始めよう VRTはまだ特殊な存在かもしれない
26. Freelance Frontend Engineer Tsubasa SEKIGUCHI ご清聴ありがとうございました！ Thank you for listening! 2025.07.18 | 技術共有会 #8 NON-CONFIDENTIAL PUBLIC DOMAIN DOCUMENTATION