LLMとPlaywright/reg-suitを活用した jQueryリファクタリングの実際

フロントエンドカンファレンス東京 2025 (2025/09/21) での発表資料
https://fec-tokyo.connpass.com/event/352581/
https://fec-tokyo.github.io/2025/

Transcript

1. © kaonavi, inc. 1 LLMとPlaywright/reg-suitを活用した jQueryリファクタリングの実際 kinocoboy
2. 自己紹介 © kaonavi, inc. 2 kinocoboy | キノシタ ヒロキ 所属: 株式会社カオナビ / フロントエンドエンジニア ミッション: 既存機能の価値向上 発信: 「サーバントリーダーシップをギャルマインド で理解する」などメタファーが好きです。 趣味: プラモ / キーボードカスタム / キャンプ / ギター プライベート: ２児の父 / 北海道出身・千葉在住 好きだったライブラリ: Riot.js , Meteor.js (わかる人いますか...？）
3. INDEX © kaonavi, inc. 3 • レガシーコードは「悪」なのか？ ◦ その価値と、私たちが向き合う理由 • なぜ改修はこんなにも「ツラい」のか ◦ 構造と、現代の武器が効かないわけ • 第三の選択肢 : LLM + VRTという装備 ◦ 偵察機と安全の番人 • カイゼンの進め方 ◦ 具体的な手法と、それによって得たもの • まとめ
4. © kaonavi, inc. 皆さん、レガシーコード、好きですか？😕 「レガシーコード」と聞いて思い浮かぶのは... • 触りたくない • 仕様がわからない • 動くけど、どう動いているかわからない • ぶっちゃけ、クソコード...? 4 問いかけ
5. © kaonavi, inc. あれは、クソコード ではありません。 • 今日の私たちがモダンな開発をする状況を作ってくれた、偉大な礎です。 • 価値が不明な新規コードとは違い、明確に価値が証明され、今この瞬間 もお金を稼いでいる 功労者です。 だからこそ、さらなる価値向上を求められる。 でも、その改修はあまりにも難しい...。 5 レガシーコードは「クソコード」ではない
6. © kaonavi, inc. 今回は多くの現場に存在するであろう、この構成を例にお話しします。 • Backend Templates (Blade, Smarty etc…) • + jQuery • + CSS • + モジュールバンドラー (webpack, gulp, etc…) この構造に潜む「難しさ」を深掘りしてみましょう。 6 今回の舞台 : 典型的なレガシー構成
7. © kaonavi, inc. • モノリシックで肥大化したコード • すべてが広大な大地に分散しており、探すだけで一苦労 • バンドル化によって生まれた「幻のファイル」 を追いかける徒労感 • 壊すと大損害。でも仕様を完璧にする人はもういない 有識者など、いない 7 この構造の「ツラみ」
8. © kaonavi, inc. 答えはシンプルです。 現代のIDEが持つ「文明の利器」が効かないから。 • ✖定義に移動 （Go to Definition） • ✖参照の検索 （Find All Reference） まるで暗闇の中を、コンパスも地図も持たずに手探りで進むような感覚に陥り ます。 8 なぜ「探す」だけでこんなにツラいのか？
9. © kaonavi, inc. 最大の理由は、jQueryセレクタがただの「文字列」 であることです。 サーバーサイドの動的なHTML生成も、この静的解析の困難さに拍車をかけ ます。 9 なぜコードジャンプが効かないのか
10. © kaonavi, inc. こんな状況で、私たちが取れる選択肢は限られていました。 • 気合と根性で乗り切る ◦ IDE拡張やgrep芸を駆使する（しかし、ほとんど付け焼き刃..） • モダンな技術へ移行する ◦ それができたら苦労しない！ ◦ そもそも、その移行のために安全な改修が必要なのです。 長らく、この二者択一だと思われていました。しかし... 10 これまでの選択肢
11. © kaonavi, inc. 時は流れ、私たちは新しい装備を手に入れました。 • 🤖LLM（大規模言語モデル） ◦ 役割: 「偵察機」兼「翻訳家」 ◦ コードの仕様を高速で分析・要約してくれる。 • 📷VRT（ビジュアルリグレッションテスト） ◦ 役割: 「安全の番人」 ◦ 意図しない見た目の変化をピクセル単位で検出してくれる。 11 第三の選択肢： LLMとVRTで立ち向かう
12. © kaonavi, inc. レガシー改修における２つの大きな壁を、この装備で突破します。 • 「仕様がわからない」 ◦ → LLMが解析・翻訳してくれる！ • 「意図せず壊すのが怖い」 ◦ →VRTがデグレを検知してくれる！ 特に「安全なコード削除」や「部分的なモダンコードの差し替え」で絶大な効果 を発揮します。 12 アプローチのコンセプト
13. © kaonavi, inc. まず、人間ではなくLLMを主力として投入します。 人間は司令官、LLMは偵察部隊です。 LLMへの司令（プロンプト）例 • この複雑なjQueryコード、何してる？構造的に解説して • このJSで使われているセレクタを一覧化し、操作内容をまとめて • このHTMLに対して、使われていない可能性のあるCSSクラスはある？ 人間なら数時間かかる調査が、わずか数分で完了します。 13 Phase1: 偵察・分析（主役 : LLM）
14. © kaonavi, inc. LLMの分析を元に、いざリファクタリング！ …でも、やっぱり恐い。「この修正本当に大丈夫？」 その最後の不安を、 「reg-suit」が取り除きます。 VRTの仕組みは非常にシンプル 1. Before: 修正前のページのスクリーンショットを撮る（これが「正解」） 2. Action: コードのリファクタリングをする（例: 不要なclassを削除） 3. After: 修正後のページのスクリーンショットを撮る。 4. Compare: ２枚の画像を比較。差分があればハイライトでお知らせ。 14 Phase2: 安全性担保（主役 : VRT）
15. © kaonavi, inc. 影響がなかった場合 意図しない変更がないことを機械的に証明できる。 これが、次の一歩を踏み出すための絶大な安心感につながります。 15 reg-suit による差分検出の例 影響があった場合
16. © kaonavi, inc. • 問題の早期発見・復旧能力の向上 🤩 ◦ 「触ると壊れるかも」という恐怖から解放され、積極的な改善へ。 • 漸進的なリファクタリング 🚶 ◦ プロジェクト全体を一気に書き換える必要がなく、部分的に少しづつ。 • 脅威のコストパフォーマンス 💰 ◦ CIへの大掛かりな導入は不要。 個人のローカルツールとして始められる。 • 属人性の排除 👥 ◦ LLMがコードの「語り部」となり、 誰でもキャッチアップしやすくなった 16 このアプローチがもたらしたこと
17. © kaonavi, inc. もちろん、万能ではありません。限界と注意点があります。 • VRTは見た目しか保証しない ◦ ボタンを押した後のAPIリクエスト内容など、機能的な不具合は検知できません。 • LLMは完璧ではない ◦ ハルシネーション（誤った情報の生成）は起こります。最終的な意思決定は開発者の責任で す。 ◦ 高性能なモデル(Claude 4 Sonnet, Gemini 2.5Pro等）の利用を強く推奨します。 • 根本的な開発体験の解決ではない ◦ あくまでも保守性を高める手段。コードジャンプが効く世界にはなりません。 17 注意点：銀の弾丸ではない
18. © kaonavi, inc. • LLMに “書かせない ” ◦ ただせさえわからないコードを、LLMというブラックボックスに触らせると混沌 が深まります。 ◦ LLMはあくまで調査のドライバー（Askモード）に徹してもらいましょう。 • 脳のブドウ糖を忘れずに！ 🍬 ◦ LLMからの超高速な情報奔流を受け止め続けるのは、想像以上に脳が疲 れます。 ◦ ラムネなどの “餌” は必須でした。 18 最も重要な心構え
19. © kaonavi, inc. このアプローチは、さらなる改善への足掛かりにもなります。 • ライブラリの脱却 ◦ LLMに「この古いライブラリの処理を、依存のないモダンなJSで書き 換えて」と依頼し、脱却のヒントを得る。 • VRTの自動化 ◦ Playwightで複数ページのスクショ撮影・収集を自動化し、より広範 囲の安全性を一度確認する。 19 応用：この先に見える道
20. © kaonavi, inc. 今回提案するのは、理想（フルリプレイス）と現実（何もしない）の間にある、実 践的な第三の道です。 • LLM（偵察機） で仕様を把握し、 • VRT（安全の番人） でデグレを防ぐ。 この組み合わせは、レガシーコードという難しさに、安全な道を切り拓くための 強力な装備となります。 20 まとめ
21. © kaonavi, inc. 21 ご清聴ありがとうございました