Nuxt.js から Next.js へ ── フロントエンド技術リプレイスにおけるハーネスエンジニアリングと理解負債

BRANK

はじめに株式会社 mediba でフロントエンドエンジニアをしている中畑です。弊社では Nuxt.js から Next.js への技術リプレイスプロジェクトが進行中です。この記事では、 Claude Code を活用した技術リプレイスの現状と課題をお伝えします。!要約ハーネス(ルール・コンテキスト・フィードバック・スキル)を整備し、開発フローをスキル化して Claude Code による技術リプレイスを進めている移植精度の向上や高速化、属人化の防止というメリットがある一方、技術負債の移植や開発者の「理解負債」というデメリットが生じている現行システムに実際に触れる、モックデータの整備、mermaid での図解、関連リポジトリの集約などで理解負債の解消に取り組んでいる前提AIコーディングツールは Claude Code を使用しています。モデルは主に Sonnet 5 を利用しています。プロジェクト概要システム概要toC 向けの Web アプリケーションシステムです。システム構成のイメージ図としては以下になります（実際には他にも複数の対向システムが 存在しますが省略）フロントエンドは Nuxt.js で開発されています。こちらを Next.js にリプレイスします。現行移行後言語TypeScriptTypeScriptフ…