Aiderとともに進めるライブラリアップデートの第一歩 / ai-agent-software-link-and-motivation

第0回 AIエージェント ソフトウェア開発勉強会

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

『AI初心者でも始められた！Aiderとともに進めるライブラリアップデートの第一歩』

#リンモチ
=============================================
【イベント情報】
■イベントページ
https://aiagentsoftware.connpass.com/event/330539/

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

Transcript

1. © Link and Motivation Group AI初心者でも始められた！ Aiderとともに進める ライブラリアップデートの第一歩 株式会社リンクアンドモチベーション 中上 裕基
2. 2 © Link and Motivation Group 中上 裕基（なかがみ ゆうき） @nakagam3 自己紹介 1 2015年〜 印刷会社でエンジニアとしてキャリアをスタート 2 2019年〜 大手通信会社でフロントエンドエンジニア/スクラムマスターとしてオンライ ンストアの立ち上げに携わる 3 2022年〜現在 株式会社リンクアンドモチベーションでチームの 生産性・開発者体験の向上というミッションのために奮闘中
3. プロローグ 〜なぜAIを使おうと思ったか？〜
4. 4 © Link and Motivation Group AIツールに対して斜に構えてた中上 次々出てくるしなー できないことも 多そうだしなー どうせ自分でやった方が 早いんだろうなー 何か作るのって 楽しいしなー
5. 5 © Link and Motivation Group ところが FEのライブラリをアップデートしなきゃ！ 新しいAPIを 使いたい 非推奨になった APIの修正 依存する ライブラリの刷新 挙動の変化 型定義の変更 廃止された構文の 書き換え
6. 6 © Link and Motivation Group あれ？ やりたくないなら AIに押し付けちゃう？ という超意識の低いスタート
8. Aiderの注目ポイント AIペアプロ 対話しながらAIがコーディング してくれる Git操作 修正した内容をcommitまでやって くれる！ CLI スクリプトに組み込みやすい様々な機 能がある
9. 事例紹介 〜どんな風にAiderを使ったか？〜
10. © Link and Motivation Group 10 事例1 - 大量のコード自動修正 単純作業なんて押し付けちゃえ
11. 11 © Link and Motivation Group ライブラリアップデートも分解しちゃえばタスクの集まり 引用:https://qiita.com/hirokidaichi/items/c66682a64ac2fc59cdf3 新しいAPI の利用 依存する ライブラリの更新 挙動の変化 廃止された構文の 書き換え 分解
12. 12 © Link and Motivation Group ライブラリアップデートも分解しちゃえばタスクの集まり 引用:https://qiita.com/hirokidaichi/items/c66682a64ac2fc59cdf3 新しいAPI の利用 依存する ライブラリの更新 挙動の変化 分解 廃止された構文の 書き換え
13. 13 © Link and Motivation Group 例）Vue.jsのとある非推奨構文の書き換え これとか、これが 引用：Vue.js公式ドキュメント（https://v2.ja.vuejs.org/v2/guide/components-slots#非推奨の構文）
14. 14 © Link and Motivation Group 例）Vue.jsのとある非推奨構文の書き換え こう 引用：Vue.js公式ドキュメント（https://v2.ja.vuejs.org/v2/guide/components-slots#名前付きスロット）
15. 15 © Link and Motivation Group これがめっちゃある。。。 148ファイル 200箇所 ※eslintでのautofix後
16. 16 © Link and Motivation Group そこで活用したのが... AiderのScripting機能 通常モード 対話を繰り返しながらコードを修正する Scriptingモード 1回分の修正を行うコマンドのように呼び出す 引用：Aider公式ドキュメント（https://aider.chat/docs/scripting.html）
17. 17 © 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>
18. 18 © 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>
19. 19 © Link and Motivation Group 2. aiderに自分を自動化してもらう aiderコマンドの–message-fileオプションを 使ってファイルの修正をしてPRを自動で作る shellスクリプトを作ってください。 - ファイルは引数から受け取ること - PRにはaiderラベルをつけること - PRのタイトルは「[Vue3化] aiderによる v-slot対応の自動修正」 ※ 残ってなかったので記憶のやつです → #!/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を作成 sed "s|{{FILE_PATH}}|$file_path|g" pr_template.md > tmp.md cat aider_prompt.md >> tmp.md gh pr create ¥ --title "[Vue3化] aiderによるv-slot対応の自動修正 @$suffix" ¥ --body-file tmp.md ¥ --base master ¥ --label "aider"
20. 20 © Link and Motivation Group 3. ぶん回す
21. 21 © Link and Motivation Group 結果 103 修正完遂 Aiderで修正できた ファイル数 148 全ファイル数 修正した全ファイル数 70% 精度 自動修正できた割合 / ≒
22. © Link and Motivation Group 22 事例2 - テストコードの生成 テストだって押し付けちゃえ
23. 自動テストが無い！
24. 24 © Link and Motivation Group storybookをもっと作ってVRTしよう！ + storybook Chromatic
25. 25 © Link and Motivation Group そこで活用したのが... 引用：Aider公式ドキュメント（https://aider.chat/docs/config/options.html#--read-file） Aiderの--readオプション 通常のファイル指定 「修正対象」として読み込む＝修正される場合あり --readオプション 「参考情報」として読み込む＝修正されない
26. 26 © Link and Motivation Group 1. 既にあるStoryファイルを参考にさせる {{FILE_PATH}}のstorybookファイルを 作成してください。sample.storiesを 参考にできる限り同じ書き方にすることを、必 ず守ってください。以下は作成時の禁止事項 です。 • ダミーデータはコンポーネントのソースコードを踏まえて参照 エラーが出ないようなデータを作成してください。 • VRTに使用するため、ダミーデータは固定の時刻になるよう にしてください。 • slotがあったら、slotの内容を入れてください。 → #!/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 ¥ --read sample.stories.ts ¥ --read $file_path # pushする git push --set-upstream origin aider/slot-syntax-$suffix # PRを作成 sed "s|{{FILE_PATH}}|$file_path|g" pr_template.md > tmp.md cat aider_prompt.md >> tmp.md gh pr create ¥ --title "[Vue3化] aiderによるv-slot対応の自動修正 @$suffix" ¥ --body-file tmp.md ¥ --base master ¥ --label "aider"
27. 27 © Link and Motivation Group 2. ぶん回す
28. 28 © Link and Motivation Group 結果 44 修正完遂 Aiderで修正できた ファイル数 67 全ファイル数 修正した全ファイル数 65% 精度 自動修正できた割合 / ≒
29. © Link and Motivation Group 29 事例3 - 静的解析のエラー修正 プロンプト考えるのも辞めちゃえ
30. 30 © Link and Motivation Group Vue3へのマイグレーション箇所をeslintで検出 612ファイル 2037箇所 ※eslintでのautofix後
31. 31 © Link and Motivation Group もういっそプロンプトなしでいけないかな？
32. 32 © Link and Motivation Group そこで活用したのが... 引用：Aider公式ドキュメント（https://aider.chat/docs/usage/lint-test.html#manually-running-code） Aiderの/runコマンド 通常の入力 プロンプトとして処理されて修正する /run コマンド 指定されたコマンドの実行結果をもとに修正する
33. 33 © Link and Motivation Group 1. プロンプトの代わりにlintコマンドを渡す file_path="$1" max_attempts=3 attempt=0 until pnpm run lint:which "$file_path" || [ "$attempt" -ge "$max_attempts" ]; do expect -c " set timeout -1 # Aiderを起動 spawn aider --4o $file_path # Aiderのプロンプトを待つ expect ¥">¥" # プロンプトを送信 send -- ¥"/run pnpm run lint:which ${file_path}¥r¥" ... " # ループ回数をカウント attempt=$((attempt + 1)) done
34. 34 © Link and Motivation Group 2. ぶん回し、中です
35. 35 © Link and Motivation Group 途中結果 7 修正完遂 Aiderで修正できた ファイル数 10 試したファイル数 修正した全ファイル数 70% 精度 自動修正できた割合 / ≒
36. エピローグ 〜使ってみてどうだったか？〜
37. 37 © Link and Motivation Group 感想 AI好きになった （ちょっと可愛く見える）
38. 38 © Link and Motivation Group 発見 今実際に試したことを「ひたすら繰り返す」 それだけで自動化できるという体験の新鮮さ
39. 小さなことからでいい Aiderで始めよう
40. 40 © Link and Motivation Group あれ？ライブラリアップデートは終わったの？
41. 41 © Link and Motivation Group あれ？ライブラリアップデートは終わったの？ Vue Fes Japan 2024でこの続きを登壇します！
42. 42 © Link and Motivation Group • エンジニアリングマネージャー • プロダクトマネージャー • テックリード • サーバーサイドエンジニア • フロントエンドエンジニア • SRE • データエンジニア • CRM • UXデザイナー テックブログも更新しています！ まずはカジュアルにお話しましょう！ ご連絡お待ちしております！ 全職種、積極採用中です！ お知らせ