VibeCodingで 加速する開発と支援

Transcript

1. 1 VibeCodingで 加速する開発と⽀援 GMOペパボ株式会社 事業開発部 永⽥哲平
2. 2 AI駆動開発・ AIツール活用 事例LT
3. 3 AI駆動開発・ AIツール活用事例 LT 話すこと ・弊チームでのAI活用事例について 対象公聴者 ・AI活用事例について興味がある方 ・AIの推進や導入は進んでいるが、それがエンジニアに留 まってしまっていることに課題を感じたことがある方
4. 4 ⾃⼰紹介 事業開発部 Alive Projectチーム 2024年 ⼊社 永⽥ 哲平 社内では「てつを。」と呼ばれています。 フロントエンドの開発することが多いです。 claude code ✖ git worktreeの並列開発体験が良す ぎてびっくりしています。 ゲーム（Valorant）とポーカーが趣味です。 • X : @tetsuwo0717
7. 7 はじめに
8. 8 OBSのフィルターの無料配布も 行なっている はじめに
9. 9 OBSって？ Open Broadcaster Softwareの略で、配信者がオンライン配信や録 画を行うためのオープンソースソフトウェア はじめに
10. 10 OBSのフィルターって？ 配信者が配信画面にエフェクト を加えるためのもので、例えば配信内 のソースの色を変えたり、画面の一部をモザイクにしたり、動きをつけ たりすることができる はじめに
11. 11 OBSのフィルターって？ →Luaスクリプトで作成することができる →フィルターのLuaスクリプトは主に、設定管理、レンダリング処理、 シェーダーコードの3つの構成要素から構成されている はじめに
12. 12 一見すると「専門的な知識がないと作成できない」 弊チームではAIを活用することで、専門的な知識が無くてもフィル ターの作成を進める ことができ、かつ安全にリリースできるように取り 組んでいる。 はじめに
13. 13 実際に以下のフィルターはSNSマーケター自らCursorを用いて作成 を行なった。 はじめに
14. 14 アジェンダ 1. はじめに 2. 開発時のポイント 3. エンジニアとしての⽀援 4. まとめ
15. 開発時のポイント 15 • Cursorで快適なVibe Codingをするために • ドキュメント化と知⾒の蓄積 開発時のポイント
16. Cursorで快適なVibe Codingをするために 開発時のポイント 16 Agent modeのON → デフォルトでoffになっている auto saveのON → on Focus Changeがおすすめ
17. Cursorで快適なVibe Codingをするために 開発時のポイント 17 rulesの整備 冗⻑なコメント/過剰なtry-catch/急な英語での返答、等々を抑制 →質の向上につながる 毎回伝えているプロンプトが不要 →速度の向上につながる
18. 開発時のポイント 18 フィルターはスクリプトの中でOBS の機能を呼び出している。 OBSの機能を使ったフィルターで何 ができるのかを確認。 ドキュメント化と知⾒の蓄積
19. 開発時のポイント 19 OBSの機能だけではできないことをAIと作ろうとしても存在 しない機能を使おうとして、いつまで経っても完成しない。  →OBSはOSSなのでソースコードが公開されている。 ドキュメント化と知⾒の蓄積
20. 開発時のポイント 20 →できること。できないこと。してほしくないことをまとめる ドキュメント化と知⾒の蓄積
21. 開発時のポイント Cursorにコンテキストとして与える →ワンパンの精度が劇的に向上した →「〇〇はできないですが〇〇ならできます」 のような代替案の提⽰まで 21 ドキュメント化と知⾒の蓄積
22. 22 アジェンダ 1. はじめに 2. 開発時のポイント 3. エンジニアとしての⽀援 4. まとめ
23. エンジニアとしての⽀援 23 • すぐ試せる環境 • 既存のプロダクトが壊れないこと エンジニアとしての⽀援
24. 24 OBSはもともとLuaスクリプトの変更が即時反映される仕組みを持ってい る→ワンクリックで結果をすぐ確認できる。 すぐ試せる環境 エンジニアとしての⽀援
25. 25 フィルター配布は既存のプロダクトとは完全に 独⽴したリポジトリで管理している →「⾃分が作ったスクリプトをリリースすることによって既存のプロダクト が壊れてしまうかもしれない」という不安を払拭することができる。 既存のプロダクトが壊れないこと エンジニアとしての⽀援
26. 26 アジェンダ 1. はじめに 2. 開発時のポイント 3. エンジニアとしての⽀援 4. まとめ
27. まとめ 「コードを書くこと」はエンジニアだけが⾏うものではなくなりつつある →イメージ（デザイン/スタイル/企画）を持つ本⼈がAIなどを活⽤して⾃ら 実装することで、役割をまたいだやりとりを省き、より効率的にアウトプッ トができた。 →エンジニアはAIが書くコードをより安全により楽にリリースできるように 努めるのも⼀つの⼿段。 27 まとめ
28. GMOペパボでは、新しい仲間を募集しています 募集中の職種や、詳しい社内の環境や制度に関しては GMOペパボ株式会社 採用サイト をご 覧ください。 28 まとめ
29. 29 Thank you!