© Link and Motivation Group AI初心者でも始められた！ Aiderとともに進める ライブラリアップデートの第一歩 株式会社リンクアンドモチベーション 中上 裕基

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

プロローグ 〜なぜAIを使おうと思ったか？〜

4 © Link and Motivation Group AIツールに対して斜に構えてた中上 次々出てくるしなー できないことも 多そうだしなー どうせ自分でやった方が 早いんだろうなー 何か作るのって 楽しいしなー

5 © Link and Motivation Group ところが FEのライブラリをアップデートしなきゃ！ 新しいAPIを 使いたい 非推奨になった APIの修正 依存する ライブラリの刷新 挙動の変化 型定義の変更 廃止された構文の 書き換え

6 © Link and Motivation Group あれ？ やりたくないなら AIに押し付けちゃう？ という超意識の低いスタート

No content

Aiderの注目ポイント AIペアプロ 対話しながらAIがコーディング してくれる Git操作 修正した内容をcommitまでやって くれる！ CLI スクリプトに組み込みやすい様々な機 能がある

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

© Link and Motivation Group 10 事例1 - 大量のコード自動修正 単純作業なんて押し付けちゃえ

11 © Link and Motivation Group ライブラリアップデートも分解しちゃえばタスクの集まり 引用:https://qiita.com/hirokidaichi/items/c66682a64ac2fc59cdf3 新しいAPI の利用 依存する ライブラリの更新 挙動の変化 廃止された構文の 書き換え 分解

12 © Link and Motivation Group ライブラリアップデートも分解しちゃえばタスクの集まり 引用:https://qiita.com/hirokidaichi/items/c66682a64ac2fc59cdf3 新しいAPI の利用 依存する ライブラリの更新 挙動の変化 分解 廃止された構文の 書き換え

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

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

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

16 © Link and Motivation Group そこで活用したのが... AiderのScripting機能 通常モード 対話を繰り返しながらコードを修正する Scriptingモード 1回分の修正を行うコマンドのように呼び出す 引用：Aider公式ドキュメント（https://aider.chat/docs/scripting.html）

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

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

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

21 © Link and Motivation Group 結果 103 修正完遂 Aiderで修正できた ファイル数 148 全ファイル数 修正した全ファイル数 70% 精度 自動修正できた割合 / ≒

© Link and Motivation Group 22 事例2 - テストコードの生成 テストだって押し付けちゃえ

自動テストが無い！

24 © Link and Motivation Group storybookをもっと作ってVRTしよう！ + storybook Chromatic

25 © Link and Motivation Group そこで活用したのが... 引用：Aider公式ドキュメント（https://aider.chat/docs/config/options.html#--read-file） Aiderの--readオプション 通常のファイル指定 「修正対象」として読み込む＝修正される場合あり --readオプション 「参考情報」として読み込む＝修正されない

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

28 © Link and Motivation Group 結果 44 修正完遂 Aiderで修正できた ファイル数 67 全ファイル数 修正した全ファイル数 65% 精度 自動修正できた割合 / ≒

© Link and Motivation Group 29 事例3 - 静的解析のエラー修正 プロンプト考えるのも辞めちゃえ

30 © Link and Motivation Group Vue3へのマイグレーション箇所をeslintで検出 612ファイル 2037箇所 ※eslintでのautofix後

31 © Link and Motivation Group もういっそプロンプトなしでいけないかな？

32 © Link and Motivation Group そこで活用したのが... 引用：Aider公式ドキュメント（https://aider.chat/docs/usage/lint-test.html#manually-running-code） Aiderの/runコマンド 通常の入力 プロンプトとして処理されて修正する /run コマンド 指定されたコマンドの実行結果をもとに修正する

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 © Link and Motivation Group 2. ぶん回し、中です

35 © Link and Motivation Group 途中結果 7 修正完遂 Aiderで修正できた ファイル数 10 試したファイル数 修正した全ファイル数 70% 精度 自動修正できた割合 / ≒

エピローグ 〜使ってみてどうだったか？〜

37 © Link and Motivation Group 感想 AI好きになった （ちょっと可愛く見える）

38 © Link and Motivation Group 発見 今実際に試したことを「ひたすら繰り返す」 それだけで自動化できるという体験の新鮮さ

小さなことからでいい Aiderで始めよう

40 © Link and Motivation Group あれ？ライブラリアップデートは終わったの？

41 © Link and Motivation Group あれ？ライブラリアップデートは終わったの？ Vue Fes Japan 2024でこの続きを登壇します！

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