個人開発したWebサービスをClineでNuxt3からNext.jsに1日で移行した
はじめに
個人開発したWebサービスを、AIエージェントのClineを活用してNuxt3からNext.jsへ移行し、作業はたった1日で完了しました。
これは人が移行しようとしたら1週間くらいかかるような作業です。
本記事では、AIを活用した実践的なフレームワーク移行の経験を共有します。
移行対象
個人開発した「クスリミル」という薬の感想を患者目線で投稿できるサービスを運営していました。
最初はNuxt2で開発していたのですが、サポート期限が来たので一旦素直にNuxt3に移行し、今回でNext.js App Routerに移行しました。
背景
Nuxt3で作成したWebサービスをNext.jsに移行したいということで、移行しました。
背景は以下の通りです。
仕事と趣味で技術スタックを統一できる
仕事では主にNext.jsを使っているということもあり、仕事と趣味で同じフレームワークを使ったほうが楽な上に相乗効果があって良いと考えて、Nuxt3からNext.jsに移行しました。
パフォーマンス(Web Vitals)の改善
以前にはUIコンポーネントにVuetifyを使っており、サイドバーの実装にv-navigation-drawerというコンポーネントを使っていました。
ですが、このコンポーネントが原因でレイアウトシフトが発生し、Web Vitalsのスコアが著しく低くなっていました。
最新版でも、この問題は解消されていないことが判明したので、いっそNext.jsに移行してしまおうと考えました。
移行の方法
今をときめくAIエージェントであるClineを使って、Nuxt3のコードをNext.jsのコードに変換しました。
Next.jsのプロジェクト作成は手動で行い、Clineには以下のような指示しか与えていません。
移行時に気をつけた点
AIファーストで作らせる前提で技術選定をした
今後は、ますますAIを前提とした開発が主流になっていくと思われます。
ですので、AIファーストで開発できる技術を選定しました。
具体的には
を選定しました。
どれも最近のAIによるフロントエンド開発でよく使われ、英語圏のネット上に豊富にドキュメントがある技術です。
これらの技術はAIを使った移行作業に最適です。
Clineが参照するディレクトリー配下に移行前のコードと移行後のコードを配置した
ディレクトリー構造は以下のようになっていました。
kusuri-miru-front
├── kusuri_miru_nuxt3 (Nuxt3)
└── kusuri-miru-front (Next.js)
このようにディレクトリーを分けることで、Clineが同じプロジェクト内で移行前のコードを参照しながら移行後のコードを生成することができます。
AIにツッコミ駆動開発をする
Clineは暴走しがちで、ちょいちょいツッコミを入れて軌道修正しました。
己の目でClineが暴走していないか監視の目を入れながら「Cancel」ボタンを押して、都度軌道修正していきました。
例えば、Clineがエラーが出るであろうコマンドを実行しようとした時に、最新の公式ドキュメントを参照してエラーを回避するように指示しました。
不要な機能をスコープから外す
このサービスにはログイン機能や管理画面機能がありました。
これらを移行しようとすると、1日では終わらないので、一旦これらの機能をスコープから外しました。
ログイン機能は正直、ユーザーに全然使われていなかったのでバッサリと切り捨てました。
商用サービスであれば、こんな判断は中々できないでしょうが、個人開発であればこういう判断も可能です。
そして管理画面に関しては完全に時代の潮流が変わったことから、スコープから外しました。
今の時代、管理画面のようなありふれた画面は再発明せずにRetool等のノーコードツールを利用すればいいだけです。
移行の結果
わずか10ドルでWebサービスの8割くらいのコードを移行できた
Clineで確認したところ合計でかかった金額は10ドルちょっとでした。
人間は残りの2割くらいのコードを手直しするだけで、1日で移行できました。
Web Vitalsの改善
目的であったWeb Vitalsの改善も達成できました。
複雑な実装のコンポーネントを利用せずTailwindCSSとshadcn/uiを使ったおかげで、CLS(Layout Shift)は0になり、LCP(Largest Contentful Paint)は1.5秒くらいになりました。
開発意欲の向上
自分の「推し」の技術で開発するとテンションが上ります。
数年放置していたWebサービスですが、継続的に機能改善をしようという気持ちになりました。
Next.js・Tailwind CSS・shadcn/uiを使って開発しているため、開発者体験が非常に良いです。
開発者体験はモチベーションにも直結します。
なぜかデザインがいい感じになった
個人的な感覚になりますが、なぜかデザインがいい感じになりました。
今までのVuetifyのデザインも別に悪くはなかったのですが、Tailwind CSSとshadcn/uiを使うことにより、フラット目なデザインになり、よりシンプルで今風のデザインになったのが原因だと思っています。
今は下手にデザインを発明するより、イケてるUIコンポーネントの類を使った方がデザインが良くなると思います。
そしてAIを使ったことによる思わぬ副次的な効果もありました。
AIがUIを省略してサボって実装をしてくれてるので、人間が作り出してしまった複雑だったUIもシンプルになり、より今風のデザインになりました。
移行前のサイト
移行後のサイト
AIを使役する練習になった
AIを使役する良い練習になりました。
目でAIを監視しながらClineが酷いコードを書こうとしたときに「Cancel」ボタンを即押して「ここはこういう実装をするんだよ」と教えてあげたり、個別でうまく実装できなかったところは都度指示を出してあげたりしました。
つまずいた点
Next.js 15の破壊的変更
モデルをClaude3.7にしてコードを生成したのですがNext.js 15で破壊的変更があったため、Claudeが書いたコードをNext.js 15に対応するように修正する必要がありました。
ただし、Next.js 15の破壊的変更は移行ツールが公式で提供されており、移行ツールを使うことで体感で8割くらいの破壊的変更を修正することができました。
npx @next/codemod@canary upgrade latest
油断するとモックで実装される
例えばAPIで通信する部分があると、Clineはサボります。
なぜか動かないなと思ったら、こんなコメントがあったことが多いです。
// TODO: APIを使った実装をする
「なにがTODOだ。お前がやるんだよ」という言葉をグッとこらえて、
「サボらずにここを実装して」とプロンプトで指示してあげると、次からサボらないようになります。
まとめ
たった1日でNuxt3からNext.jsへの移行を完了できたことは、現代のAIツールの可能性を示す良い例となりました。
従来であれば1週間以上かかるような作業が、適切なAIの活用により大幅に効率化できることが実証できました。
特に以下の点が今回の成功の鍵となりました
- AIファーストな技術選定
- 明確なスコープ設定
- AIとの効果的なコミュニケーション
これからのWeb開発では、人間とAIの協業がますます重要になってくるでしょう。
技術的負債の解消や大規模な移行作業に、ぜひAIの活用を検討してみてはいかがでしょうか。
Discussion