こんにちは。ラクスルの印刷事業部でエンジニアをしている渡邉です。 この記事はラクスル Advent Calendar 2025の18日目です。
先日、Vue2からVue3への移行プロジェクトに取り組んだのですが、その際Cursorを活用して効率化を図りました。
移行作業は、既存の挙動を壊さないよう慎重に進める必要があり、やることも地味で単調になりがちです。対象となるファイルは少なくとも70以上あり、コンポーネントの数だけ同じような作業が続くため、正直あまり気が進まない仕事でもあります。
今回、AIをうまく活用することで、単調な作業の大部分を任せることができ、想像以上に快適に進められました。
本記事では、その過程で得た知見を共有します。
まず試したこと：シンプルに頼んでみる
Vue2→Vue3の移行は変換パターンがある程度決まっているため、AIでも対応できるのではと考えました。
まずはシンプルな指示を出してみました。
@App.vue これをVue3の書き方に変更してください。 ビルドは通らなくても構いません。 Options APIの形は保持してください。
シンプルなコンポーネントであれば、これだけの指示でも十分に動作するコードへ変換してくれました。
一方で、「ディレクトリ構成」「命名規則」「Storeの扱い」といった、プロジェクト固有の"暗黙知"までは汲み取れないこともわかりました。
AIによる変換自体は問題なくできるのですが、毎回Chatでパスの指定や書き方の補足修正が必要になり、結局、自分が横について指示を出し続ける形になってしまいました。
次に試したこと：移行コマンドを作成する
毎回同じ説明を繰り返すのは非効率です。そこで、アプローチを変えました。
Cursorには.cursor/commandsにファイルを置くことで、カスタムコマンドを定義できる機能があります。これを活用して、移行作業をコマンド化することにしました。
作成したコマンドでは、以下のようなルールと制約をファイル内に定義しています。
変換ルール
- デコレータの変換：
@Component、@Prop、@Watch、@Emit→ Options API形式に - import文の更新：
vue-property-decorator→defineComponent、PropType - テンプレート構文：
slot="name"→#name、$listeners削除、フィルター → computed
制約
- Options API保持：Composition APIへの変換は行わない
- リファクタ禁止：構造変更は別PRで対応
- 削除禁止：動作しないコードはコメントアウト + TODOで対応
- パスの統一：相対パス禁止、
@/エイリアスを使用
コマンド内では、以下のような実行ステップを定義しています。各ステップごとにコミットすることで、変更を追いやすくしています。
| Step | 内容 |
|---|---|
| 1. Vue2→Vue3構文変換 | デコレータをOptions APIに変換、import文の修正、テンプレート構文の更新 |
| 2. 依存関係の調整 | 未移行のコンポーネントやStoreをコメントアウト、ダミー実装を追加 |
| 3. テスト作成 | 基本的なマウントテストを作成 |
| 4. 品質チェック | Lint、型チェック、テストをすべて通過させる |
| 5. PR作成 | 差分を記録し、PRを作成 |
効果
コマンドを整備した結果、複雑すぎないコンポーネントなら「ほぼPRが出せる水準」まで自走してくれるようになりました。
いちいち説明しなくても、コマンドで定義したルールに沿ってパスを書き換えてくれますし、デコレータも正しく変換してくれます。これはかなり楽になりました。
テストもAIに任せる
移行と同時にテストのカバレッジも上げたいところですが、すべてを人の手で書くのは困難です。
そこで、「AIで書きやすいテスト」のルールを決めました。
| 観点 | 方針 |
|---|---|
| レンダリング | 子コンポーネントやテキストが表示されているか |
| ロジック | Props、Event、Methods、Computedの挙動 |
| 粒度 | 複雑な結合テストより、関数単位のシンプルなテスト |
ポイントは「ユーザーストーリーに沿った網羅的なテスト」を目指さないことです。まずは機械的にカバレッジを上げることを優先しました。
この方針をコマンド内に定義しておくと、AIもそれに沿ったテストを生成してくれます。
運用上の工夫
移行計画をAIにも共有する
途中で気づいたのですが、AIに移行計画を知らせないと、意図しない変更を加えてしまうことがあります。
例えば、こちらが「まず動く状態を作って、リファクタは後で」と考えていても、AIが勝手にリファクタを始めてしまうケースがありました。
そこで、移行計画のドキュメントをリポジトリ内に置いて、Cursorから参照できるようにしました。
- 移行対象ファイルの一覧
- 移行の優先順位
- 各ファイルの移行ステータス
これをAIが見られる状態にしておくことで、「今はこのファイルを移行するフェーズ」と理解してもらえます。
レビュー負荷への対策
AIのおかげでPR生成速度が上がると、今度はレビューが追いつかないという問題が発生します。
対策として、PRに以下を含めるようにしました。
- 変更の背景：なぜこの変更が必要か
- 移行前後のdiff：移行前後の差分を貼っておく
リファクタと移行を分離しているので、差分は基本的にシンプルです。レビュアーも「これは機械的な変換」と判断しやすくなります。
AIに任せる領域、人間が担う領域
しばらく進めてみて、作業の種類によってAIと人間の役割分担が見えてきました。
コンポーネント移行はAIの得意領域です。コマンドを実行すれば移行からテスト、Lintまで一気に完結します。人間はPRレビューに集中できます。
ページ移行になると複雑さが増します。コンポーネントと同様にある程度は自走できますが、複雑な依存関係がある部分は人間がChatで指示を出す必要があります。CursorのPlanモードで先に方針をまとめておくと精度が上がりました。
レビューはAIと人間の協働が効果的でした。AIがタイポやバグをチェックし、人間は「なぜこの変更が必要か」の背景をPRに補足する。この組み合わせでレビュー効率が上がります。
まとめ
今回、「AIにどこまで任せられるか」という視点でVue2→Vue3移行に取り組んだ結果、開発体験が大きく変わることを実感しました。
機械的な書き換え作業をAIに任せることで、移行方針の判断やコードレビュー、テストの確認といった、より重要な部分に時間を使えるようになりました。
もちろん、現時点でAIが完璧というわけではなく、時には間違えることもあります。最終的な判断はまだ人間による確認が必要です。しかし、単調な作業の大部分を任せられることで、開発の質とスピードの両面で大きく向上しました。
よかったこと
- 単調な作業から解放された：コンポーネントの機械的な移行は、ほぼAIに任せられる
- テストも書いてくれる：省コストでカバレッジを上げられる
- 調査が早い：「この書き方、Vue3ではどうなるか」といった質問にすぐ答えてくれる
課題
- 設計判断は人間が必要：Store→Props整理など、アーキテクチャ変更は人間による判断が必要
ポイント
- まずシンプルに試す：意外と対応できる部分も多い
- プロジェクト固有のルールはコマンド化する：毎回説明するのが非効率
- AIと人間の役割分担を意識する：全部任せるのは難しいが、かなりの部分を任せられる
今回はVue2→Vue3の事例でしたが、こういったAIの活用は他のフレームワークの移行にも応用できるはずです。レガシーな実装からの移行を進めるチームの参考になれば幸いです。
参考リンク - Vue 3 Migration Guide - Cursor
