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

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

VueとAIは相性悪い？そんなの都市伝説です

#vuefes #リンモチ

===========================================
【イベント情報】
■イベントページ
　https://vuefes.jp/2025/

【株式会社リンクアンドモチベーション】
■お問合せ先
　engineer_pr@lmi.ne.jp
■テックブログ
　https://link-and-motivation.hatenablog.com/
■開発組織の公式X
　https://x.com/LinkandM_dev
=============================================

Transcript

1. © Link and Motivation Group 株式会社リンクアンドモチベーション エンゲージメントプロダクトユニット 中上 裕基 VueとAIは相性悪い？ そんなの都市伝説です
2. 2 © Link and Motivation Group みなさん Vue好きですか？ 好きな人挙手〜
3. 3 © Link and Motivation Group 私もVue好きです！
4. 4 © Link and Motivation Group そんな私には 気になることがあります
5. 5 © Link and Motivation Group 「生成AI使うならReact」 っていう風潮ないですか？
6. 6 © Link and Motivation Group 「VueはAIと相性良くない」 になっちゃわない？ React以外≒
7. 7 © Link and Motivation Group VueってAIと相性良くない？いやいやっ！ Vueでも使えるって証明するぞ！
8. 8 © Link and Motivation Group VueってAIと相性良くない？いやいやっ！ 実際に半年間挑戦してみた結果 Vueでも使えるって証明するぞ！
9. 9 © Link and Motivation Group ② 実装 ロジック Vueでの開発の全工程でAIを活用中！ ① 実装 コンポーネント ③ PRレビュー/QA 「AIが全て実装したPR」が全体の60%まで到達
10. 10 © Link and Motivation Group ② 実装 ロジック Vueでの開発の全工程でAIを活用中！ ① 実装 コンポーネント ③ PRレビュー/QA 「AIが全て実装したPR」が全体の60%まで到達 VueってAIと相性が良くない? → そんなこと全然ないよ！
11. 実現できた活用例 〜Vue×AIでできたこと〜
12. 12 © Link and Motivation Group ① 実装 〜コンポーネント編〜 ② 実装 ロジック ① 実装 コンポーネント ③ PRレビュー/QA
13. 13 © Link and Motivation Group ① Figmaからコンポーネントの生成 Figma MCP Figmaデザイン
14. 14 © Link and Motivation Group ① Figmaからコンポーネントの生成 Supernova MCP Figma MCP Figmaデザイン Supernova上のデザインシステム
15. 15 © Link and Motivation Group ① Figmaからコンポーネントの生成 Supernova MCP Figma MCP Figmaデザイン Supernova上のデザインシステム Vueコンポーネント
16. 16 © Link and Motivation Group ① Figmaからコンポーネントの生成 活用のポイント → 「思ったんと違う。。。」 画面丸ごと指定して 「コードを生成して」 「いい感じ！」 コンポーネントごとに 分割して生成させる
17. 17 © Link and Motivation Group ② 実装(ロジック)編 ② 実装 ロジック ① 実装 コンポーネント ③ PRレビュー/QA
18. 18 © Link and Motivation Group ② OpenAPIから通信関係のコードを生成 API定義
19. 19 © Link and Motivation Group ② OpenAPIから通信関係のコードを生成 API Client API定義
20. 20 © Link and Motivation Group ② OpenAPIから通信関係のコードを生成 API Client API定義 Command Query
21. 21 © Link and Motivation Group ② OpenAPIから通信関係のコードを生成 API Client API定義 Command Query unit test unit test
22. 22 © Link and Motivation Group ② OpenAPIから通信関係のコードを生成 API Client API定義 Command Query unit test unit test API mock
23. 23 © Link and Motivation Group ② OpenAPIから通信関係のコードを生成 活用のポイント → 「コードを生成して」からの 暗黙的ルールを後出し 責務で区切ったレイヤーごとに 明確なルールを設定する OpenAPIを元に処理を実装して Commandはこの観点をテストする API Clientでやる観点は不要 Queryはこんな風に書く Commandはこんな風に書く QueryとCommandがあって pinia/coladaを使って実装する 実装はこの順番で行う
24. 24 © Link and Motivation Group ③ PRレビュー/QA編 ② 実装 ロジック ① 実装 コンポーネント ③ PRレビュー/QA
25. 25 © Link and Motivation Group ③ PRを出すとAIがレビューしてくれる コーディング規約 に基づくレビュー アーキテクチャ設計 に基づくレビュー 依存関係に基づく テスト観点レビュー
26. 26 © Link and Motivation Group ③ PRを出すとAIがレビューしてくれる 活用のポイント → 目的がふわっとしたまま 「このPRレビューして」 明確なレビュー観点と 必要十分な情報を与える → E2Eテスト観点でレビューして 影響の大きいもの優先で 修正内容はAPI関係なので 結合部分を中心にレビューして 影響範囲はdiffから算出した 依存グラフを使って判断して なんかいい感じに レビューして欲しいな →
27. 27 © Link and Motivation Group Vueでの開発の全工程でAIを活用中！ ② 実装 ロジック ① 実装 コンポーネント ③ PRレビュー/QA コンポーネントは 分割して生成させよう 明確なルールを持った レイヤーに分けよう AIが扱える必要十分な 情報を揃える
28. 28 © Link and Motivation Group Vueでの開発の全工程でAIを活用中！ ② 実装 ロジック ① 実装 コンポーネント ③ PRレビュー/QA コンポーネントは 分割して生成させよう 明確なルールを持った レイヤーに分けよう AIが扱える必要十分な 情報を揃える フレームワークの影響よりも 「AIの働きやすさ」の方がはるかに重要
29. 29 © Link and Motivation Group Vueでの開発の全工程でAIを活用中！ ② 実装 ロジック ① 実装 コンポーネント ③ PRレビュー/QA コンポーネントは 分割して生成させよう 明確なルールを持った レイヤーに分けよう AIが扱える必要十分な 情報を揃える フレームワークの影響よりも 「AIの働きやすさ」の方がはるかに重要 VueってAIと相性が良くない? → そんなこと全然ないよ！
30. エピローグ 〜まなび と 伝えたいこと〜
31. 31 © Link and Motivation Group まなび ① 問題を小さく分解する ② 明確なルールを設定する ③ AIが扱える必要十分な情報を揃える やったことはこの3つだけ
32. 32 © Link and Motivation Group 簡単に言ってくれるけど それって大変じゃない？ まなび
33. 33 © Link and Motivation Group 簡単に言ってくれるけど それって大変じゃない？ まなび それはそう
34. 34 © Link and Motivation Group 簡単に言ってくれるけど それって大変じゃない？ まなび 大変だからこそ 「情熱」や「好き」が大事だった
35. 好きを諦めなくていい
36. だから明日からVue使いましょ Keep on using Vue.js forever
37. 37 © Link and Motivation Group 明日からもVueを使いたいあなたへ！ • サーバーサイドエンジニア • フロントエンドエンジニア • SRE • エンジニアリングマネージャー • テックリード • データエンジニア 技術広報の公式X、 発信強化中です！ 全職種、積極採用中です！