VueとAIは相性悪い？そんなの都市伝説です / vuefes2025-link-and-motivation

by リンクアンドモチベーション

Slide 1

Slide 1 text

Slide 2

Slide 2 text

2 © Link and Motivation Group みなさん Vue好きですか？好きな人挙手〜

Slide 3

Slide 3 text

3 © Link and Motivation Group 私もVue好きです！

Slide 4

Slide 4 text

4 © Link and Motivation Group そんな私には気になることがあります

Slide 5

Slide 5 text

5 © Link and Motivation Group 「生成AI使うならReact」っていう風潮ないですか？

Slide 6

Slide 6 text

6 © Link and Motivation Group 「VueはAIと相性良くない」になっちゃわない？ React以外≒

Slide 7

Slide 7 text

7 © Link and Motivation Group VueってAIと相性良くない？いやいやっ！ Vueでも使えるって証明するぞ！

Slide 8

Slide 8 text

8 © Link and Motivation Group VueってAIと相性良くない？いやいやっ！実際に半年間挑戦してみた結果 Vueでも使えるって証明するぞ！

Slide 9

Slide 9 text

9 © Link and Motivation Group ② 実装ロジック Vueでの開発の全工程でAIを活用中！ ① 実装コンポーネント ③ PRレビュー/QA 「AIが全て実装したPR」が全体の60%まで到達

Slide 10

Slide 10 text

10 © Link and Motivation Group ② 実装ロジック Vueでの開発の全工程でAIを活用中！ ① 実装コンポーネント ③ PRレビュー/QA 「AIが全て実装したPR」が全体の60%まで到達 VueってAIと相性が良くない? → そんなこと全然ないよ！

Slide 11

Slide 11 text

実現できた活用例〜Vue×AIでできたこと〜

Slide 12

Slide 12 text

12 © Link and Motivation Group ① 実装〜コンポーネント編〜 ② 実装ロジック ① 実装コンポーネント ③ PRレビュー/QA

Slide 13

Slide 13 text

13 © Link and Motivation Group ① Figmaからコンポーネントの生成 Figma MCP Figmaデザイン

Slide 14

Slide 14 text

14 © Link and Motivation Group ① Figmaからコンポーネントの生成 Supernova MCP Figma MCP Figmaデザイン Supernova上のデザインシステム

Slide 15

Slide 15 text

15 © Link and Motivation Group ① Figmaからコンポーネントの生成 Supernova MCP Figma MCP Figmaデザイン Supernova上のデザインシステム Vueコンポーネント

Slide 16

Slide 16 text

16 © Link and Motivation Group ① Figmaからコンポーネントの生成活用のポイント → 「思ったんと違う。。。」画面丸ごと指定して「コードを生成して」「いい感じ！」コンポーネントごとに分割して生成させる

Slide 17

Slide 17 text

17 © Link and Motivation Group ② 実装(ロジック)編 ② 実装ロジック ① 実装コンポーネント ③ PRレビュー/QA

Slide 18

Slide 18 text

18 © Link and Motivation Group ② OpenAPIから通信関係のコードを生成 API定義

Slide 19

Slide 19 text

19 © Link and Motivation Group ② OpenAPIから通信関係のコードを生成 API Client API定義

Slide 20

Slide 20 text

20 © Link and Motivation Group ② OpenAPIから通信関係のコードを生成 API Client API定義 Command Query

Slide 21

Slide 21 text

21 © Link and Motivation Group ② OpenAPIから通信関係のコードを生成 API Client API定義 Command Query unit test unit test

Slide 22

Slide 22 text

22 © Link and Motivation Group ② OpenAPIから通信関係のコードを生成 API Client API定義 Command Query unit test unit test API mock

Slide 23

Slide 23 text

23 © Link and Motivation Group ② OpenAPIから通信関係のコードを生成活用のポイント → 「コードを生成して」からの暗黙的ルールを後出し責務で区切ったレイヤーごとに明確なルールを設定する OpenAPIを元に処理を実装して Commandはこの観点をテストする API Clientでやる観点は不要 Queryはこんな風に書く Commandはこんな風に書く QueryとCommandがあって pinia/coladaを使って実装する実装はこの順番で行う

Slide 24

Slide 24 text

24 © Link and Motivation Group ③ PRレビュー/QA編 ② 実装ロジック ① 実装コンポーネント ③ PRレビュー/QA

Slide 25

Slide 25 text

25 © Link and Motivation Group ③ PRを出すとAIがレビューしてくれるコーディング規約に基づくレビューアーキテクチャ設計に基づくレビュー依存関係に基づくテスト観点レビュー

Slide 26

Slide 26 text

26 © Link and Motivation Group ③ PRを出すとAIがレビューしてくれる活用のポイント → 目的がふわっとしたまま「このPRレビューして」明確なレビュー観点と必要十分な情報を与える → E2Eテスト観点でレビューして影響の大きいもの優先で修正内容はAPI関係なので結合部分を中心にレビューして影響範囲はdiffから算出した依存グラフを使って判断してなんかいい感じにレビューして欲しいな →

Slide 27

Slide 27 text

27 © Link and Motivation Group Vueでの開発の全工程でAIを活用中！ ② 実装ロジック ① 実装コンポーネント ③ PRレビュー/QA コンポーネントは分割して生成させよう明確なルールを持ったレイヤーに分けよう AIが扱える必要十分な情報を揃える

Slide 28

Slide 28 text

28 © Link and Motivation Group Vueでの開発の全工程でAIを活用中！ ② 実装ロジック ① 実装コンポーネント ③ PRレビュー/QA コンポーネントは分割して生成させよう明確なルールを持ったレイヤーに分けよう AIが扱える必要十分な情報を揃えるフレームワークの影響よりも「AIの働きやすさ」の方がはるかに重要

Slide 29

Slide 29 text

29 © Link and Motivation Group Vueでの開発の全工程でAIを活用中！ ② 実装ロジック ① 実装コンポーネント ③ PRレビュー/QA コンポーネントは分割して生成させよう明確なルールを持ったレイヤーに分けよう AIが扱える必要十分な情報を揃えるフレームワークの影響よりも「AIの働きやすさ」の方がはるかに重要 VueってAIと相性が良くない? → そんなこと全然ないよ！

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

Slide 32

Slide 32 text

Slide 33

Slide 33 text

Slide 34

Slide 34 text

Slide 35

Slide 35 text

好きを諦めなくていい

Slide 36

Slide 36 text

だから明日からVue使いましょ Keep on using Vue.js forever

Slide 37

Slide 37 text

37 © Link and Motivation Group 明日からもVueを使いたいあなたへ！ ● サーバーサイドエンジニア ● フロントエンドエンジニア ● SRE ● エンジニアリングマネージャー ● テックリード ● データエンジニア技術広報の公式X、発信強化中です！全職種、積極採用中です！