納品済みのページがある案件でCSSを触るのが怖い問題、BackstopJSで解決した話

納品済みのページがある案件で、新しいスタイルを追加するのは地味にずっと怖いものでした。

CSSはグローバルに効いてしまうので、新しいページ用に書いたつもりが既存ページに影響するかもしれない。でも全ページを目視で確認するのは現実的じゃない。ある程度は命名規則で縛っているので、過去の自分を信じて「たぶん大丈夫」で進めるか、触らないで新しいスタイルを書くか、という選択肢。

3月3日、「ビジュアルリグレッションテストってそんな手法あったよな」と思い出してClaude Codeに聞きました。そのままBackstopJSを導入してもらいました。

BackstopJSは、ページのスクリーンショットを撮って、変更前後で差分を比較するツールです。CSS変更後に「どこが崩れたか」を視覚的に確認できます。導入してもらってすぐにキャプチャを撮ったら、画面幅ごとの検証も同時にできることがわかって、想像より使い勝手がよかった。「これで安心して作業が進められそう」と思いました。

翌日には早速使いました。かなりドラスティックな修正でも、差分を見ながら崩れていないことを確認しつつ進められました。「backstopのおかげで」とデイリーノートに書いていました。

backstop.jsonの更新もClaude Codeに「全ページ分追加して」と言ったら秒で追加してくれました。「こういう設定ファイルを書かせるのはClaude Codeに任せるのが良さそう」と思いました。

ただ、モーダルがあらかじめ開かれているタイプのページがあって、キャプチャの高さが足りないものの調整に時間がかかりました。微妙なピクセルズレでgitに差分が出るのも少し面倒です。コミット数が増えるのもちょっと気になっている。それでも、コストには十分見合っていると思います。

「たぶん大丈夫」で進めるのと、差分で確認できるのとでは、作業中の気持ちがかなり違いました。