CSS大掃除をAIとやってみたら、めっちゃ楽だった話

こんにちは、デザイン部の田中です。

去年の年末に、古いページのコードの大掃除を行いました。
リファクタリングといえるほど大層なことはやってないですが、見た目や動作は変えず、無駄な記述を消す作業です。私の部署では毎年必ずではありませんが、大体年末の落ち着いた時期に実施されています。
今回は、ちょうど社内で AI 活用が推奨されていたタイミングでもあったため、活用の良い機会だと思い、自分が主導して進めてみました。

本記事では、その際の体験談を通じた AI 活用の強みと注意点 などの学びを共有します。

今回の対象と目的

私が担当したファイルは以下のとおりです。

更新頻度が高いCSSファイル 2つ
長年の更新で肥大化しており、少しでもサイズを軽減したいユニークCSSファイル 1つ

更新頻度が高いファイルも、膨大な記述を抱えているファイルも、未使用の記述が紛れ込みやすいので、優先的に対象としました。

CSS の記述量はサイトのパフォーマンスに少なからず影響しますし、長く放置されるほど整理が難しくなります。
当社では事業部側の協力的姿勢もあって、こうした取り組みを定期的に行える環境が整っており非常にありがたいです。（とはいえ、まだまだ無駄な記述は多いですが……。）

まず試してみた

今回の作業では、当社で既に導入されていた GitHub Copilot を使用しました。
VS Code のチャット機能にて、まずは軽く以下のように依頼してみました。

「このファイルの中で、ローカルで使っていない id の CSS 記述を削除して」

するとものの1分程で、ファイル内の id を一覧化し、ローカルの HTML に存在しない id を抽出し、それらの記述を削除した差分を返してくれました。

速っ！！神じゃん！！！！！！
と思ったのも束の間、内容を確認していくといくつかミスを発見しました。

発生した問題

対象 id のブロックの “すぐ下” にある別ブロックまで削除されてしまう

/* 消したい特集ページ----- */
#event-kesu { color: #333; }
  // ... 中略 ...
#event-kesu > .last-content { margin: 0; }　←ここまでのはずが

#event-kesanai { color: #666; }
  // ... 中略 ...
#event-kesanai .last-content { padding: 5px; } ←ここまで消えてしまった！
/* 関係ない○○ページ----- */

理由は完全にはわかりませんが、どうやら 先頭行のコメントアウトを起点として次のコメントアウトまでを一つのブロックと認識した ため、意図しない範囲が削除されてしまったようでした。（消したくないブロックの頭にはコメントがありませんでした）

さらに、修正を依頼した際には、自身が削除した分の行数変化を考慮できず、元々予定していた行数分をそのまま削除してしまうといった現象も発生するなど、予想以上にすんなりいかないなーとなることもありました。

そのため、いったん作業状態をまっさらな状態に戻し、やり方を見直しました。

対応策と実際の作業

試行錯誤した結果、削除作業を安全に進めるためのフローは次のようになりました。

まず削除候補の一覧だけを生成する（即削除させない）
人間側で候補を再確認する
削除時の条件を具体的に伝えて削除してもらう
- 削除対象ではないセレクタを明示
- 近接するブロックを誤って消さないことを強調
- 行数の変動があっても破綻しないよう下から順に削除するよう指定
  　
生成された差分を目視で最終確認する