© Link and Motivation Group AIとともに歩んだ ライブラリアップデートの道のり 株式会社リンクアンドモチベーション 中上 裕基 2024/10/19 Vue Fes Japan 2024

2 © Link and Motivation Group 株式会社リンクアンドモチベーション 中上 裕基（なかがみ ゆうき） @nakagam3 自己紹介 1 2015年〜 印刷会社でエンジニアとしてキャリアをスタート 2 2019年〜 大手通信会社でフロントエンドエンジニア/スクラムマスターとして オンラインストアの立ち上げに携わる 3 2022年〜現在 株式会社リンクアンドモチベーションでチームの 生産性・開発者体験の向上というミッションのために奮闘中

3 © Link and Motivation Group プロダクト紹介

4 © Link and Motivation Group モチベーションクラウド

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 © Link and Motivation Group 最新のライブラリにアップデートしたい、けど 修正が多すぎて手が足りない！ script setup構文 に書き換えたい 非推奨構文を 書き換えたい 古いライブラリを 移行したい TypeScriptに 書き換えたい ToolChainを 変更したい テストコードを 追加したい

7 © Link and Motivation Group 1.単純には自動化できない 2.大量・広範囲の修正 「やりたい」を挫く障壁

8 © Link and Motivation Group 1.単純には自動化できない 2.大量・広範囲の修正 「やりたい」に対する障壁 AIのCoderを雇おう！

preencoded.png

preencoded.png Aiderとは AI Coding 対話しながらAIがコーディング してくれる！ Git Integration 修正した内容をcommitまで やってくれる！ Scripting Aider コマンドラインやPythonで自動化 することができる！

aider-demo.mp4 引用：aider（https://aider.chat/）

preencoded.png Aiderとは AIペアプロ 対話しながらAIがコーディング してくれる！ Git連携 修正した内容をcommitまで やってくれる！ Scripting Aider コマンドラインやPythonで自動化 することができる！

事例紹介 〜どんな風にAiderを使ったか？２選〜

© Link and Motivation Group 14 事例1 - 大量のコード自動修正 簡単な修正をAIでできるか？

15 © Link and Motivation Group 例）Vue.jsのとある非推奨構文の書き換え これとか、これが 引用：Vue.js公式ドキュメント（https://v2.ja.vuejs.org/v2/guide/components-slots#非推奨の構文）

16 © Link and Motivation Group 例）Vue.jsのとある非推奨構文の書き換え こう 引用：Vue.js公式ドキュメント（https://v2.ja.vuejs.org/v2/guide/components-slots#名前付きスロット）

17 © Link and Motivation Group これがめっちゃある。。。 148ファイル 200箇所 ※eslintでのautofix後

18 © Link and Motivation Group 1. aiderと修正してみる Vue 2.6.0以降で非推奨になった slot お よび slot-scope 属性をv-slotを使った書 き方に修正してください。 → {{ shortenedUserName }} ↓ {{ shortenedUserName }}

19 © Link and Motivation Group 1. aiderと修正してみる Vue 2.6.0以降で非推奨になった slot お よび slot-scope 属性をv-slotを使った書 き方に修正してください。 制約として、v-slot は だけ に追加できます。それ以外の要素に付いてる 場合はその要素を残しつつtemplateで囲う ようにしてください。 # 例 ↓ → {{ shortenedUserName }} ↓ {{ shortenedUserName }}

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 © 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 © Link and Motivation Group 3. ぶん回す

23 © Link and Motivation Group 結果 103 修正完遂 Aiderで修正できた ファイル数 148 全ファイル数 修正した全ファイル数 70% 精度 自動修正できた割合 / ≒ 約4日 期間 script作成から修正完了まで 約5,000円 API料金 OpenAI API - gpt-4o

© Link and Motivation Group 24 事例2 - テストコードの生成 少し複雑な作業をAIでできるか？

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 © Link and Motivation Group 工夫① 必要とするテスト観点を決める

27 © Link and Motivation Group 工夫① 必要とするテスト観点を決める

28 © Link and Motivation Group 工夫① 必要とするテスト観点を決める

29 © Link and Motivation Group 工夫② 自動テストの結果から「学んで」修正させる

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 © Link and Motivation Group 最後はぶん回す

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

© Link and Motivation Group 33 その他の事例 他にもこんなこともできそう！

34 © Link and Motivation Group Storybookの自動生成とVRT script setup構文への自動移行 eslint errorの自動修正 TypeScriptへの自動移行（未検証） renovateのPRがコケたら自動で直す（未検証） その他こんなことも

エピローグ 〜まとめ と 伝えたいこと〜

36 © Link and Motivation Group まとめ ● 成長したプロダクトでライブラリアップデートする時の課題 ○ 単純には自動化できない ○ 大量・広範囲の修正

37 © Link and Motivation Group まとめ ● 成長したプロダクトでライブラリアップデートする時の課題 ○ 単純には自動化できない ○ 大量・広範囲の修正 ● Aiderを使いある程度自動修正させる ○ 比較的簡単な修正は可能 ○ 少し複雑な修正でもポイントを押さえれば可能に

38 © Link and Motivation Group まとめ ● 成長したプロダクトでライブラリアップデートする時の課題 ○ 単純には自動化できない ○ 大量・広範囲の修正 ● Aiderを使いある程度自動修正させる ○ 比較的簡単な修正は可能 ○ 少し複雑な修正でもポイントを押さえれば可能に ● これで大量の修正があっても、怯むことなく進められる！

やりたかったことを Aiderで始めよう

40 © Link and Motivation Group ● エンジニアリングマネージャー ● プロダクトマネージャー ● テックリード ● サーバーサイドエンジニア ● フロントエンドエンジニア ● SRE ● データエンジニア ● CRM ● UXデザイナー テックブログも更新しています！ まずはカジュアルにお話しましょう！ ご連絡お待ちしております！ 全職種、積極採用中です！ お知らせ

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 © Link and Motivation Group Appendix - Aiderを使いたい 料金はAPI利用料だけ Aiderは利用するAPIの料金だけで 使えます！ 今回の148ファイルの修正＋諸々の 検証で約¥5,000かかった APIトークンを用意しよう AIサービスのAPIトークンを発行してお きましょう。様々な言語モデルに対応し てるので、詳しくは公式ページを見てくだ さい！ 学習はOFFにしとこう Aiderはリポジトリを読み込んで精度を 高めるため、業務で利用する場合はAI の学習を無効にしておくと安心です。

43 © Link and Motivation Group Appendix - Aiderと他案の比較 AIエディタ cursor, GitHub Copilot など AIエージェント devin, Difyなど 自作AIツール OpenAI APIを使った 修正ツールを自作 自動修正ツール ライブラリアップデート用の 自動化ツール