複数チーム並行開発下でのコード移行アプローチ ~手動 Codemod から「生成AI 活用」への進化

sunecosuri @sunecosuri
2025 年 11 月 11 日
Vue Fes Japan 2025 After Talk

Transcript

1. © 2025 ANDPAD All Rights Reserved. 複数チーム並行開発下でのコード移行アプローチ 手動 Codemod から「生成AI 活用」への進化 2025/11/11　Vue Fes Japan 2025 After Talk sunecosuri
2. 1. ANDPADとは 2. 大規模なコード移行の背景と課題 3. 「止めない」移行を実現した戦略 4. Codemodによるコード変換の実践 5. 実戦から見えたCodemodの価値 6. 未来への展望: 生成AIとのシナジー ※ ANDPAD = サービス名 　 アンドパッド = 会社名 Agenda
3. 1. ANDPADとは Copyright © 2025 Present ANDPAD Inc. This information is confidential and was prepared by ANDPAD Inc. for the use of our client. It is not to be relied on by and 3rd party. Proprietary & Confidential 無断転載・無断複製の禁止
4. Confidential © 2025 ANDPAD All Rights Reserved. 現場の効率化から経営改善まで一元管理できる クラウド型建設プロジェクト管理サービス 社　内 社　外 営業 / 監督 / 設計 事務 / 管理職 職人 / 業者 メーカー / 流通 案件管理 資料承認 工程表 写真 報告 チャット 黒板 図面 受発注 •　•　• 
 ANDPADとは
5. © 2025 ANDPAD All Rights Reserved. Confidential • 2022年12月 アンドパッドに入社 • 現在は施行に関するANDPAD上で承認フローを一元管理できる ANDPAD資料承認の開発をしています • 福岡から来ました • ポケモンユナイトってMOBAがブームです Koki Narumi / @sunecosuri 開発本部 資料承認 Product Engineer Profile ｜ プロフィール 自己紹介
6. 2. 大規模なコード移行の背景と課題 Copyright © 2025 Present ANDPAD Inc. This information is confidential and was prepared by ANDPAD Inc. for the use of our client. It is not to be relied on by and 3rd party. Proprietary & Confidential 無断転載・無断複製の禁止
7. © 2025 ANDPAD All Rights Reserved. 私たちが取り組んだ課題と背景 • 背景 ◦ サービスの成長に伴い、既存の技術スタックが開発効率のボトルネックになりつつ あった • 目的・制約 ◦ 既存の製品開発は止めたくない ◦ 当時、Nuxt2 のEOLを迎えており、Nuxt3 へのマイグレーションが必要 • 移行対象のアプリケーション ◦ 3つの複数のチームが並行して同じアプリケーションへ機能開発を行っている • コード量の規模 ▪ Vueコンポーネントの数: 約800ファイル ▪ コード総行数: 約38万行
8. © 2025 ANDPAD All Rights Reserved. 移行を成功させるための方針 これらの問題に取り組むにあたり、私たちは以下の基本方針を立てました。 • 変更量を最小化する 手作業を減らし、変更漏れやミスを防ぐ • マージする際のコンフリクトを避ける 並行する機能開発をブロックしない • 変更のタイミングを制御する ビジネスの状況に合わせてリリースを判断できる • 安全な切り戻しを可能にする 問題発生時に即座に元に戻せる
9. 3. 「止めない」移行を実現した手段 Copyright © 2025 Present ANDPAD Inc. This information is confidential and was prepared by ANDPAD Inc. for the use of our client. It is not to be relied on by and 3rd party. Proprietary & Confidential 無断転載・無断複製の禁止
10. © 2025 ANDPAD All Rights Reserved. Confidential •目的: 古いコードを最小限の変更で新しい基 盤上で動作させ、移行のブロッキング を解消する •効果: 実装箇所単位でインクリメン タルな移行を実現 移行手段1｜互換レイヤーを自作　 新しいフレームワーク上で、古いAPIの挙動を模倣する層を自作 例: カスタムディレクティブ
11. © 2025 ANDPAD All Rights Reserved. Confidential • リスク: 数千ファイルに及ぶ手動でのコード修正は、時間がかかり、ミスを誘発し、コンフリクト の温床となる • 解決策: AST (抽象構文木) を利用して、コードの構造を解析し、特定のパターンを自動で変換する 仕組み (Codemod) を導入 • 効果: 変更の一貫性、再現性を担保 移行手段2｜Codemod によるコードの自動変換　
12. 4. Codemodによるコード自動変換の実践 Copyright © 2025 Present ANDPAD Inc. This information is confidential and was prepared by ANDPAD Inc. for the use of our client. It is not to be relied on by and 3rd party. Proprietary & Confidential 無断転載・無断複製の禁止
13. © 2025 ANDPAD All Rights Reserved. Confidential • 利用ライブラリ: @vue/compiler-sfc: Vueファイル の parse ts-morph: TypeScript/JavaScript のコード解析・変換 htmlparser2: Vueテンプレートの解析・変換 • 独自機能 (transformSFC) `.vue` ファイルを読み込み、`<script>` と `<template>` を分離 それぞれに変換処理を適用し、安全にファイルへ書き戻す Deep Dive: 我々が作った Codemod エンジン ASTライブラリを用いて、独自のCodemodエンジンを実装
14. © 2025 ANDPAD All Rights Reserved. Confidential Before Codemod 実践例① Script編 お題: `this.$nextTick()` を `nextTick()` へ置き換える After
15. © 2025 ANDPAD All Rights Reserved. Confidential 1. `.$nextTick` で終わる呼び出し式をASTで探索 2. 式を `nextTick` に置換 3. 対象ファイルの記述に必要な import を追加 Codemod 実践例① Script編 (How) Codemod script の処理概要
16. © 2025 ANDPAD All Rights Reserved. Confidential Before Codemod 実践例② Template編 お題: Vue 3で廃止された `.native` 修飾子を削除する After
17. © 2025 ANDPAD All Rights Reserved. Confidential 1. テンプレート内の全要素を探索 2. .native で終わる属性 (@click.native) を発見 3. .native 部分を削除して属性を書き換える Codemod 実践例② Template編 (How) Codemod script の処理概要
18. 5. 実践から見えたCodemodの価値 Copyright © 2025 Present ANDPAD Inc. This information is confidential and was prepared by ANDPAD Inc. for the use of our client. It is not to be relied on by and 3rd party. Proprietary & Confidential 無断転載・無断複製の禁止
19. © 2025 ANDPAD All Rights Reserved. Confidential 価値① 品質の継続的な改善サイクル • Codemod自体にテストを記述可能 ◦ Codemodの変換結果は、Snapshot Testを用いて容易に検証可能 ◦ 変換前後のコードスナップショットの比較によって意図しない変更がない か、期待通りの出力になっているかを自動で確認できる • 予期せぬエッジケースで変換が失敗しても、場当たり的に直さない • テストケースを追加してCodemodを改善することで、変換品質が 恒久的に向上 ◦ 仕組みによって、品質を着実に改善することができた
20. © 2025 ANDPAD All Rights Reserved. Confidential 価値② 安全なリリースコントロール • 作業を以下の2ステップに分離して進行することができた ◦ ① Codemodスクリプトの作成・レビュー ◦ ② スクリプトの適用 • これにより、実際のコード変更（②）のタイミングをビジネス状況 に合わせて柔軟にコントロール ◦ 既存の開発に影響を与えずに、安全なアップデートへとつな がった
21. © 2025 ANDPAD All Rights Reserved. Confidential 手動Codemodによる大規模な変更をした経験から得られた成果 • 巨大なコードベースの移行を、開発を止めずに完遂できた • Codemodは技術的負債の返済において有効な手段であるということ がわかった
22. © 2025 ANDPAD All Rights Reserved. Confidential 成功の先に見えた、さらなる可能性 • このアプローチは大きな成功を収めたが、私たちは「さらに良くす るにはどうすれば良いか」を考えた • 新たな問い: ◦ もし、ASTの専門知識がなくてもこのリファクタリング手法を 使えたら？
23. 6. 未来への展望：生成AIとのシナジー Copyright © 2025 Present ANDPAD Inc. This information is confidential and was prepared by ANDPAD Inc. for the use of our client. It is not to be relied on by and 3rd party. Proprietary & Confidential 無断転載・無断複製の禁止
24. © 2025 ANDPAD All Rights Reserved. Confidential • AIによるCodemodスクリプトの生成 ◦ きっかけ: 定型的な処理などを生成AIに手伝わせた経験から、このアイデアは生まれました ◦ 学び: AIに「直接コードを変更させる」のではなく、「Codemodスクリプトを作らせる」方が、品質 と効率を両立できる • なぜAIに直接修正させるより、Codemodスクリプトを作らせた方が良いのか？ 1. AIの非決定論性を制御できる • AIによる直接的なコード変更は、実行のたびに結果が変わり、意図しない変更を生むリスクが ある 2. テストによる品質保証が可能 • Snapshot Testによる検証を用いることで期待通りの出力であるかを検証できる 3. 実行時の決定論性が担保される • 検証済みのスクリプトは、何度実行しても同じ結果を保証する決定論的な動作をする 生成AIとの連携：誰もが使えるリファクタリングへ
25. 7. まとめ Copyright © 2025 Present ANDPAD Inc. This information is confidential and was prepared by ANDPAD Inc. for the use of our client. It is not to be relied on by and 3rd party. Proprietary & Confidential 無断転載・無断複製の禁止
26. © 2025 ANDPAD All Rights Reserved. Confidential • 互換レイヤー と Codemod の組み合わせるで「止めない」大規模移行は実現できた • Codemodの本質的な価値 ◦ 単なる自動化ではなく、「テスト可能な品質改善」と「安全なリリース」 「再現性のある変更」を実現する • 未来への展望：手動からAIへ ◦ Codemod は、AIによるリファクタリング自動化へのツールとして有効である ◦ AIは「作業の道具を作る道具」として活用することで、品質と効率を両立できる ◦ 手動 → スクリプト自動化 → AIによる自動化の生成 まとめ
27. © 2025 ANDPAD All Rights Reserved. ありがとうございました
28. Copyright © 2020 Present ANDPAD Inc. This information is confidential and was prepared by ANDPAD Inc. for the use of our client. It is not to be relied on by and 3rd party. 無断転載・無断複製の禁止 Confidential We are Hiring !! もっとアンドパッドの開発組織が知りたい方へ https://engineer.andpad.co.jp/ 技術スタックや募集ポジションを 掲載してます！
29. © 2025 ANDPAD All Rights Reserved. マルチプロダクト展開 現場管理を効率化したい 工事写真の撮影・整理・台帳作成を効率化したい 顧客と円滑にコミュニケーションしたい ・ 顧客への提出物をスムーズに作成したい 工程管理の手間を 減らしたい 円滑にコミュニケーショ ンしたい 検査や是正指示を 効率化したい 経営・営業データを 可視化したい 受発注・請求書受領を 効率化したい ｚ 社内での承認フローを 効率化したい 断熱リフォームの効果を 可視化したい 現地調査を効率化したい 現場訪問の回数を 減らしたい 安全衛生管理を 徹底したい 社外リソースを 活用したい システム連携で効率性を 上げたい 施工管理 案件概要 資料承認 ボード 写真 写真台帳 黒板 黒板 AI作成 豆図AI キャプチャー デジタル サイン 報告出力 レイアウト 電子納品 おうちノート 工程表 横断 マイルストーン チャット 報告 図面 検査 Analytics 引合粗利管理 受発注 請求管理 資料承認 サーモ 3Dスキャン 遠隔臨場 入退場管理 BPO API連携 アプリ マーケット