AIとともに踏み出す技術的負債返済への一歩 / Tech-Debt-Meetup-link-and-motivation

Tech-Debt Meetup ～技術的負債と向き合うLT Night～（主催：レバテック株式会社）

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

『AIとともに踏み出す技術的負債返済への一歩』

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

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

Transcript

1. © Link and Motivation Group AIとともに踏み出す 技術的負債返済への一歩 株式会社リンクアンドモチベーション 中上 裕基
2. 2 © Link and Motivation Group 339億円（2023年12月時点） （2023年12月時点） 8社 リンクアンドモチベーションについて
3. モチベーションクラウド 診断 変革 ※ 2023年度 実績 のべ 11,360 社 約 403 万人
4. 4 © Link and Motivation Group 中上 裕基（なかがみ ゆうき） @nakagam3 自己紹介 1 2015年〜 印刷会社でエンジニアとしてキャリアをスタート 2 2019年〜 大手通信会社でフロントエンドエンジニア/スクラムマスター としてオンラインストアの立ち上げに携わる 3 2022年〜現在 株式会社リンクアンドモチベーションでチームの生産性・開 発者体験の向上というミッションのために奮闘中
5. 5 © Link and Motivation Group 質問です 技術的負債と聞いて、 どんなものを思い浮かべますか？
6. 6 © Link and Motivation Group 質問です コードの 共通化 古い ライブラリ リアーキ テクチャ
7. 7 © Link and Motivation Group 質問です 古い ライブラリ リアーキ テクチャ 「修正自体は軽い」けど 「すっごい大量にある」やつってありません？ コードの 共通化
8. 8 © Link and Motivation Group 「大量の小さな負債」の課題 できなくはないけど 「うっ...」 正直やりたくねぇ
9. 9 © Link and Motivation Group 「大量の小さな負債」の課題 できなくはないけど 「うっ...」 正直やりたくねぇ AIで解決しちゃおう！ というお話
10. © Link and Motivation Group 10 背景と課題
11. 11 © Link and Motivation Group 置かれてる状況 FEのライブラリをアップデートしたい 新しいAPIを 使いたい 非推奨になった APIの修正 依存する ライブラリの刷新 挙動の変化 型定義の変更 廃止された構文の 書き換え
12. 12 © Link and Motivation Group 置かれてる状況 FEのライブラリをアップデートしたい 新しいAPIを 使いたい 非推奨になった 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後
17. Aiderとは AIペアプロ 対話しながらAIがコーディング Git操作 1サイクルごとにcommitして くれる CLI スクリプトに組み込みやすそう！
18. 引用：aider（https://aider.chat/）
19. © Link and Motivation Group 19 やったこと
20. 20 © 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>
21. 21 © 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>
22. 22 © 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"
23. 23 © Link and Motivation Group 3. ぶん回す
24. © Link and Motivation Group 24 結果
25. 25 © Link and Motivation Group 精度 103 修正完遂 Aiderで修正できた ファイル数 148 全ファイル数 修正した全ファイル数 70% 精度 自動修正できた割合 / ≒
26. 26 © Link and Motivation Group 精度 Aider公式のベンチマークもほぼ同じ数値 引用：aider（https://aider.chat/docs/leaderboards/）
27. 27 © Link and Motivation Group 効果 工数削減 少しは減ったが結局レビューや手直しは残る PR作成の自動化 これが一番楽でした！ 気持ちの負担軽減 「やってみよう！」と思えたのは良かった！
28. © Link and Motivation Group 28 さいごに
29. 「小さくする」が 技術的負債に対する 「やれそう！」を作る
30. 30 © Link and Motivation Group あれ？ライブラリアップデートは終わったの？
31. 31 © Link and Motivation Group あれ？ライブラリアップデートは終わったの？ Vue Fes Japan 2024でこの続きを登壇します！
32. 32 © Link and Motivation Group • エンジニアリングマネージャー • プロダクトマネージャー • テックリード • サーバーサイドエンジニア • フロントエンドエンジニア • SRE • データエンジニア • CRM • UXデザイナー 週１でテックブログ更新しています！ まずはカジュアルにお話しましょう！ ご連絡お待ちしております！ 全職種、積極採用中です！ お知らせ