Tweet
Tweet

Slide 1

Slide 1 text

© Link and Motivation Group AIとともに踏み出す 技術的負債返済への一歩 株式会社リンクアンドモチベーション 中上 裕基

Slide 2

Slide 2 text

2 © Link and Motivation Group 339億円（2023年12月時点） （2023年12月時点） 8社 リンクアンドモチベーションについて

Slide 3

Slide 3 text

モチベーションクラウド 診断 変革 ※ 2023年度 実績 のべ 11,360 社 約 403 万人

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

5 © Link and Motivation Group 質問です 技術的負債と聞いて、 どんなものを思い浮かべますか？

Slide 6

Slide 6 text

6 © Link and Motivation Group 質問です コードの 共通化 古い ライブラリ リアーキ テクチャ

Slide 7

Slide 7 text

7 © Link and Motivation Group 質問です 古い ライブラリ リアーキ テクチャ 「修正自体は軽い」けど 「すっごい大量にある」やつってありません？ コードの 共通化

Slide 8

Slide 8 text

8 © Link and Motivation Group 「大量の小さな負債」の課題 できなくはないけど 「うっ...」 正直やりたくねぇ

Slide 9

Slide 9 text

9 © Link and Motivation Group 「大量の小さな負債」の課題 できなくはないけど 「うっ...」 正直やりたくねぇ AIで解決しちゃおう！ というお話

Slide 10

Slide 10 text

© Link and Motivation Group 10 背景と課題

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

Aiderとは AIペアプロ 対話しながらAIがコーディング Git操作 1サイクルごとにcommitして くれる CLI スクリプトに組み込みやすそう！

Slide 18

Slide 18 text

引用：aider（https://aider.chat/）

Slide 19

Slide 19 text

© Link and Motivation Group 19 やったこと

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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"

Slide 23

Slide 23 text

23 © Link and Motivation Group 3. ぶん回す

Slide 24

Slide 24 text

© Link and Motivation Group 24 結果

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

26 © Link and Motivation Group 精度 Aider公式のベンチマークもほぼ同じ数値 引用：aider（https://aider.chat/docs/leaderboards/）

Slide 27

Slide 27 text

27 © Link and Motivation Group 効果 工数削減 少しは減ったが結局レビューや手直しは残る PR作成の自動化 これが一番楽でした！ 気持ちの負担軽減 「やってみよう！」と思えたのは良かった！

Slide 28

Slide 28 text

© Link and Motivation Group 28 さいごに

Slide 29

Slide 29 text

「小さくする」が 技術的負債に対する 「やれそう！」を作る

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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