はじめに
ラクスル Advent Calendar 2025 14日目を担当する、ラクスル印刷事業本部 25新卒Webエンジニアの井口です。
ラクスルには、エンジニアが業務を忘れて好きな技術開発に熱中できる「HackWeek」という毎年恒例のハッカソンイベントがあります。
今回は、私たちのチームが開発した「既存のWebサイトのURLとAPI仕様書を与えるだけで、モダンなフロントエンドコード（Next.js）を自動生成するエージェント」について紹介します。
「3人月かかる移行作業を1日以下にする」 という、ちょっと野心的な目標を掲げてやってみたんですが、結果としてUI再現度95%を実現しました。
なぜ作ったのか？（課題背景）
長期運用されている多くのWebサービスと同様に、私たちも「レガシーコードの移行」という技術課題を抱えています。しかし、必要性は痛感していても、現場では常に高い壁が立ちはだかります。
- 移行はしたいが工数が重い: ビジネス優先だと、どうしても後回しになりがちです。
- コード読解がハイレベル: 長年の改修でコード・ロジックが複雑になっており、仕様の把握（ドメイン知識）が属人化しています。
- UI再現の確認がツライ: 新環境に移行したあと、既存の表示・挙動を再現できたかの確認作業に時間が溶けます。
「もっと楽に、スケーラブルに移行できないか？」
そう考えた私たちは、「コードを読んで移行する」のではなく、「動いている画面（UI）から正解を抽出して再構築する」 というアプローチを取りました。これが「UI-Driven（UI駆動）」の由来です。
作ったもの：UI-Driven FE Rebuilder Agent
私たちが開発したのは、以下の情報を渡すだけで React (Next.js App Router) のコードを生成するAIエージェントです。
- Input:
- 移行元のサイトURL（実際に動いている画面）
- API仕様書（Swagger/OpenAPIなど）
- Output:
- リファクタリングされたフロントエンドコード（Next.js + Tailwind CSS）
- APIモック（MSW）
- テストコード
要は、「今のサイトの見た目をコピーして、中身は最新技術で書き直しておいて！」を自動でやってくれるツールです。
全体の仕組み（Architecture）
５日間の開発期間で、以下のフローを構築しました。
- サイトの材料集め: Puppeteerで対象ページのDOM構造、適用されているスタイル（Computed Styles）、画像アセットを抽出します。
- コンポーネント分割: 抽出したDOMをAIが解析させて、Header, Footer, 〇〇Componentなどの意味のあるブロック単位で分割します。
- UIコード生成: Claude Codeを活用し、LLMがブロックごとのDOMの情報を元に、Tailwind CSSを用いたReactコンポーネントを生成します。
- ロジック抽出 & 仕様書生成: Playwrightでクリックや入力が可能な要素を洗い出し、それぞれのUIの役割（「これは再入稿ボタンである」など）をAIが推論します。それをAPI定義書と突き合わせることで、「どのAPIエンドポイントを利用すべきか」まで落とし込んだ仕様書を自動生成します。
- ロジック実装: 生成された仕様書とAPI定義を元に、データフェッチやイベントハンドラの処理をコードに実装します。
- 品質保証 (QA): VRT（Visual Regression Testing）で元サイトと生成サイトをピクセル単位で比較し、再現度を計測します。
成果と技術的なポイント
1. 高いUI再現精度とロジック実装率
VRT（Visual Regression Testing）による検証の結果、ラクスルのマイページにおいて95%の画素一致率を記録しました。 厳密に見るとマージンやフォントのレンダリングなどに微妙なズレは残りますが、人間の目視ではほぼ一致していると言えるレベルに達しています。
また、見た目だけでなくロジックの再現についても、ナビゲーションやデータ取得など全145項目の評価ケースのうち138項目をクリアしました。静的なデザインだけでなく、動的な振る舞いまで移行できそうな結果となりました。
2. 「コードを読まない」発想
一般的な移行作業は「元のコードを読み解いて書き換える」アプローチですが、これでは複雑怪奇なスパゲッティコードの解析コストは残ったままです。 対して本エージェントは、「動いている画面（UI）こそが正解」と定義し、コードではなくレンダリング結果から逆算して再構築します。 これにより、「ロジックが複雑すぎて誰も読めない」というレガシーコード特有の壁を回避し、見た目と挙動を担保したまま最新環境へ移植することを可能にしました。
3. モダンな構成でのコード生成
生成されたコードは単なるHTMLの書き出しではなく、メンテナンス性を考慮した構成となっています。
- ディレクトリ構成:
app/print/mypage/page.tsxのような Next.js App Router に準拠した構造。 - コンポーネント設計:
BodyContainer,TodoList,MyPageMenuといった、意味のある単位でのコンポーネント分割。 - ステート管理: 必要なデータ（TodoItems, Newsなど）の状態定義や型定義（TypeScript）の自動生成。
- APIモック: バックエンド開発と並行できるよう、MSW (Mock Service Worker) のハンドラも生成。
正直なところ、まだPoCです（技術的課題）
ここまで威勢よく「95%再現！」「1日以下！」と書いてきましたが、正直に白状すると、今回はあくまでPoC段階での着地でした。 Reactコードの生成までは行っていますが、実用化に向けては以下のような泥臭い課題も残っています。
- コンポーネント分割の精度: AI任せで分割させているため、適切な粒度でコンポーネントが切れない（細かすぎる、または巨大すぎる）ケースがあります。ここはプロンプトエンジニアリングによる更なるチューニングが必要です。
- 疑似要素の壁:
デザインの再現において、
::beforeや::afterといったCSS疑似要素の解析とTailwind CSSへの変換は難易度が高く、まだ完全自動化には至っていません。 - CSSの最適化: 「見た目が合えばヨシ！」の精神で生成しているため、重複したスタイル定義や不要なクラス指定など、CSSとしての最適化には無駄が多く残っています。
- 非UI要件の壁: これが一番の課題ですが、見た目は再現できても「複雑な業務ロジック」「SEO」「アクセシビリティ」といった非UI要件は、UIからの逆算だけではカバーしきれません。これらはまだ従来どおり、人間の手による設計と実装で裏付けする必要があります。
「魔法のようにボタン一つで完璧なプロダクトが出る」までは、もう少し道のりがありそうです。
まとめと今後の展望
今回のHackWeekを通して、「UI駆動でのコード再構築」のポテンシャルは示せたのではないかと思います。 ただ、いきなり100%の自動化を目指すよりは、「AIが得意なこと」と「人間がやるべきこと」をうまく分担するのが、今のところの最適解なのかもしれません。
今後のロードマップとして、次のようなアプローチができればいいなと思います。
- 「AI 70% + 人 30%」のハイブリッド運用 静的UI以外のインタラクションが多い画面では、AIに土台の70%を作ってもらい、残りの30%（ロジックや品質担保）を人間が仕上げるフローにすることで、手戻りを防ぎつつ効率化できるはずです。
- 生成系エコシステムの活用 Vercel v0 などの生成系サービスも日々進化しているので、全部自前で作ることにこだわらず、API連携でうまくパイプラインに組み込んでみるのも面白そうです。
- デザインシステムの統合 生成時に社内のDesign Systemのコンポーネントを自動で適用して、コードの統一感を底上げする機能も実装できたら最高ですね。
「レガシーコードの移行」という、エンジニアなら誰もが頭を抱える課題に対して、AIエージェントという新しい武器で切り込んだ4日間でした。
