AIとともに歩んだライブラリアップデートの道のり/ vue-fes-japan-2024-link-and-motivation

Vue Fes Japan 2024

リンクアンドモチベーション登壇資料（2024/10/19）

『AIとともに歩んだライブラリアップデートの道のり』

#リンモチ
=============================================
【イベント情報】
■イベントページ
https://vuefes.jp/2024/

【株式会社リンクアンドモチベーション】
■お問い合わせ
　engineer_pr@lmi.ne.jp
■テックブログ
　https://link-and-motivation.hatenablog.com/
=============================================

Transcript

1. © Link and Motivation Group AIとともに歩んだ ライブラリアップデートの道のり 株式会社リンクアンドモチベーション 中上 裕基 2024/10/19 Vue Fes Japan 2024
2. 2 © Link and Motivation Group 株式会社リンクアンドモチベーション 中上 裕基（なかがみ ゆうき） @nakagam3 自己紹介 1 2015年〜 印刷会社でエンジニアとしてキャリアをスタート 2 2019年〜 大手通信会社でフロントエンドエンジニア/スクラムマスターとして オンラインストアの立ち上げに携わる 3 2022年〜現在 株式会社リンクアンドモチベーションでチームの 生産性・開発者体験の向上というミッションのために奮闘中
3. 3 © Link and Motivation Group プロダクト紹介
4. 4 © Link and Motivation Group モチベーションクラウド
5. 5 © Link and Motivation Group 7年の間に色んな意味で大きく成長してきた 913個 コンポーネント数 約37万行 コード行数 Vue 2 NES Vueのバージョン E2Eのみ FEの自動テスト ※ ※herodevs - Vue 2 Never Ending Supprot - https://ja.herodevs.com/support/nes-vue 規模 負債
6. 6 © Link and Motivation Group 最新のライブラリにアップデートしたい、けど 修正が多すぎて手が足りない！ script setup構文 に書き換えたい 非推奨構文を 書き換えたい 古いライブラリを 移行したい TypeScriptに 書き換えたい ToolChainを 変更したい テストコードを 追加したい
7. 7 © Link and Motivation Group 1.単純には自動化できない 2.大量・広範囲の修正 「やりたい」を挫く障壁
8. 8 © Link and Motivation Group 1.単純には自動化できない 2.大量・広範囲の修正 「やりたい」に対する障壁 AIのCoderを雇おう！
9. preencoded.png
10. preencoded.png Aiderとは AI Coding 対話しながらAIがコーディング してくれる！ Git Integration 修正した内容をcommitまで やってくれる！ Scripting Aider コマンドラインやPythonで自動化 することができる！
11. aider-demo.mp4 引用：aider（https://aider.chat/）
12. preencoded.png Aiderとは AIペアプロ 対話しながらAIがコーディング してくれる！ Git連携 修正した内容をcommitまで やってくれる！ Scripting Aider コマンドラインやPythonで自動化 することができる！
13. 事例紹介 〜どんな風にAiderを使ったか？２選〜
14. © Link and Motivation Group 14 事例1 - 大量のコード自動修正 簡単な修正をAIでできるか？
15. 15 © Link and Motivation Group 例）Vue.jsのとある非推奨構文の書き換え これとか、これが 引用：Vue.js公式ドキュメント（https://v2.ja.vuejs.org/v2/guide/components-slots#非推奨の構文）
16. 16 © Link and Motivation Group 例）Vue.jsのとある非推奨構文の書き換え こう 引用：Vue.js公式ドキュメント（https://v2.ja.vuejs.org/v2/guide/components-slots#名前付きスロット）
17. 17 © Link and Motivation Group これがめっちゃある。。。 148ファイル 200箇所 ※eslintでのautofix後
18. 18 © Link and Motivation Group 1. aiderと修正してみる Vue 2.6.0以降で非推奨になった slot お よび slot-scope 属性をv-slotを使った書 き方に修正してください。 → <ToolTipDecorator :message="userName"> <span slot-scope="{ toggle }" @mouseenter="toggle(isError)" @mouseleave="toggle(isError)" >{{ shortenedUserName }} </span> </ToolTipDecorator> ↓ <ToolTipDecorator :message="userName"> <template v-slot="{ toggle }" @mouseenter="toggle(isError)" @mouseleave="toggle(isError)" >{{ shortenedUserName }} </template> </ToolTipDecorator>
19. 19 © Link and Motivation Group 1. aiderと修正してみる Vue 2.6.0以降で非推奨になった slot お よび slot-scope 属性をv-slotを使った書 き方に修正してください。 制約として、v-slot は <template> だけ に追加できます。それ以外の要素に付いてる 場合はその要素を残しつつtemplateで囲う ようにしてください。 # 例 <div slot="header">Title</div> ↓ <template v-slot:header> <div>Title</div> </template> → <ToolTipDecorator :message="userName"> <span slot-scope="{ toggle }" @mouseenter="toggle(isError)" @mouseleave="toggle(isError)" >{{ shortenedUserName }} </span> </ToolTipDecorator> ↓ <ToolTipDecorator :message="userName"> <template v-slot="{ toggle }"> <span @mouseenter="toggle(isError)" @mouseleave="toggle(isError)" >{{ shortenedUserName }} </span> </template> </ToolTipDecorator>
20. 20 © Link and Motivation Group 2. aiderに自分を自動化してもらう aiderコマンドの–message-fileオプションを 使ってファイルの修正をするshellスクリプトを 作ってください。 → #!/usr/bin # aiderを実行 file_path="$1" aider --4o --no-stream --yes ＼ --message-file aider_prompt.md $file_path
21. 21 © Link and Motivation Group 2. aiderに自分を自動化してもらう aiderコマンドの–message-fileオプションを 使ってファイルの修正をするshellスクリプトを 作ってください。 → #!/usr/bin # branchを切る suffix=$(date "+%Y%m%d%H%M%S") git checkout -b aider/slot-syntax-$suffix master # aiderを実行 file_path="$1" aider --4o --no-stream --yes ＼ --message-file aider_prompt.md $file_path # pushする git push --set-upstream origin aider/slot-syntax-$suffix # PRを作成 gh pr create --title "v-slot自動修正 @$suffix" ＼ --base master --label "aider"
22. 22 © Link and Motivation Group 3. ぶん回す
23. 23 © Link and Motivation Group 結果 103 修正完遂 Aiderで修正できた ファイル数 148 全ファイル数 修正した全ファイル数 70% 精度 自動修正できた割合 / ≒ 約4日 期間 script作成から修正完了まで 約5,000円 API料金 OpenAI API - gpt-4o
24. © Link and Motivation Group 24 事例2 - テストコードの生成 少し複雑な作業をAIでできるか？
25. 25 © Link and Motivation Group unit testの構成 jestjs/jest test framework vuejs/test-utils Component test util + (https://github.com/vuejs/vue-test-utils) (https://github.com/jestjs/jest)
26. 26 © Link and Motivation Group 工夫① 必要とするテスト観点を決める
27. 27 © Link and Motivation Group 工夫① 必要とするテスト観点を決める
28. 28 © Link and Motivation Group 工夫① 必要とするテスト観点を決める
29. 29 © Link and Motivation Group 工夫② 自動テストの結果から「学んで」修正させる
30. 30 © Link and Motivation Group file_path="$1" aider --sonnet --architect --no-stream --yes＼ --message-file prompt.tmp --read $file_path max_attempts=3 error_count=0 until log=$(pnpm run test 2>&1); do error_count=$((error_count + 1)) # 3回まで失敗したら終了 if [ $error_count -ge $max_attempts ]; then echo "3回失敗したので終了します" break fi aider --sonnet --architect --no-stream --yes＼ --message-file fix_prompt.tmp --read $file_path --file $test_file_path done 工夫② 自動テストの結果から「学んで」修正させる
31. 31 © Link and Motivation Group 最後はぶん回す
32. 32 © Link and Motivation Group 結果 66 Pass AiderがPassできた Test Suite数 102 Total Suite 作成したTest Suite総数 65% 精度 自動作成できた割合 / ≒ 約5日 期間 script作成から修正完了まで 約8,000円 API料金 Claude API - Claude 3.5 Sonnet
33. © Link and Motivation Group 33 その他の事例 他にもこんなこともできそう！
34. 34 © Link and Motivation Group Storybookの自動生成とVRT script setup構文への自動移行 eslint errorの自動修正 TypeScriptへの自動移行（未検証） renovateのPRがコケたら自動で直す（未検証） その他こんなことも
35. エピローグ 〜まとめ と 伝えたいこと〜
36. 36 © Link and Motivation Group まとめ • 成長したプロダクトでライブラリアップデートする時の課題 ◦ 単純には自動化できない ◦ 大量・広範囲の修正
37. 37 © Link and Motivation Group まとめ • 成長したプロダクトでライブラリアップデートする時の課題 ◦ 単純には自動化できない ◦ 大量・広範囲の修正 • Aiderを使いある程度自動修正させる ◦ 比較的簡単な修正は可能 ◦ 少し複雑な修正でもポイントを押さえれば可能に
38. 38 © Link and Motivation Group まとめ • 成長したプロダクトでライブラリアップデートする時の課題 ◦ 単純には自動化できない ◦ 大量・広範囲の修正 • Aiderを使いある程度自動修正させる ◦ 比較的簡単な修正は可能 ◦ 少し複雑な修正でもポイントを押さえれば可能に • これで大量の修正があっても、怯むことなく進められる！
39. やりたかったことを Aiderで始めよう
40. 40 © Link and Motivation Group • エンジニアリングマネージャー • プロダクトマネージャー • テックリード • サーバーサイドエンジニア • フロントエンドエンジニア • SRE • データエンジニア • CRM • UXデザイナー テックブログも更新しています！ まずはカジュアルにお話しましょう！ ご連絡お待ちしております！ 全職種、積極採用中です！ お知らせ
41. 41 © Link and Motivation Group Appendix - Aiderは自律的に精度を高めてくれる Architect Mode ChatGPT o1のように、AIに推論するステップを踏ませてから 修正することでその精度を高める Repository Map リポジトリの内容を読み込み、他のファイルとの関係性などを 踏まえて修正することでその精度を高める 引用：Separating code reasoning and editing | aider（https://aider.chat/2024/09/26/architect） 引用：Repository map | aider（https://aider.chat/docs/repomap）
42. 42 © Link and Motivation Group Appendix - Aiderを使いたい 料金はAPI利用料だけ Aiderは利用するAPIの料金だけで 使えます！ 今回の148ファイルの修正＋諸々の 検証で約¥5,000かかった APIトークンを用意しよう AIサービスのAPIトークンを発行してお きましょう。様々な言語モデルに対応し てるので、詳しくは公式ページを見てくだ さい！ 学習はOFFにしとこう Aiderはリポジトリを読み込んで精度を 高めるため、業務で利用する場合はAI の学習を無効にしておくと安心です。
43. 43 © Link and Motivation Group Appendix - Aiderと他案の比較 AIエディタ cursor, GitHub Copilot など AIエージェント devin, Difyなど 自作AIツール OpenAI APIを使った 修正ツールを自作 自動修正ツール ライブラリアップデート用の 自動化ツール