LLMを使ったチームのプロダクト開発の生産性を向上させる取り組み

LLMをプロダクト開発の生産性をアップつなげるために取り組んできた事例についてお話しさせていただきます。

Transcript

1. LLMを使ってチームのプログラム開発生産 効率向上させる取り組み ピュアポムメディアラボ 青木光平
2. 好きなAWSサービスは、Lamda です。 CEO / CTO / プログラマー / 開発ディレクター / UIUXデザイナー 青木光平 日本電気株式会社、KLab株式会社、フリーランスで技術顧問、スタートアップのCTOを 経験後、Purpom Media Labを設立。フロントエンド、サーバレス開発、プロダクト開 発、UIUX を得意としています。 AWS主催イベントなどにも多数登壇。React/ Amplify エヴァンジェリスト OSS活動、勉強会、コミュニティ支援なども行っております。 3
3. Company 会 社 概 要 4
4. UI Design UIデザイン デザインシステムからすばやくデザインを制作 MVP development MVP開発 サービスの核となる機能を高速開発 UX consulting UXコンサルティング 対話を重ねながら、ユースケースやユーザージャーニーを策定 01 02 03 7 事業内容 Our Approach グローバルで展開される新しい技術を積極的に研究し、 スピード感のあるサービス開発を行います。 新規サービス開発、技術基盤の構築を得意しております。
5. UX consulting UXコンサルティング アイディアをヒアリングし、ユースケース、ジャーニーに置 き換えるなど、対話しながら仮説を具体化していきます。 8
6. UI Design UXコンサルティング ストーリー、オブジェクト分析結果をデザインシステムを使 って美しいUI を作ります。 9
7. MVP development MVP開発 AWS Amplifyを使い、インフラ構築、開発、公開を最短で行 います。 10
8. 21 LLMを使ってチームの生産性をあげるには？ LLMをプロダクト開発の生産性をアップつなげるために取り組んできた事例についてお話しさせていただきま す。
9. 開発 16
10. 21 私たちがこれまでの生産性をあげるために取り組んでいた歴史 2007年 github 提供スタート 2006年 クラウドの開始 AWSのEC2 提供スタート 2014年 サーバレススタート AWS lambda 登場 2014年 コンテナスタート Dockerの登場 など、使うことで大きく生産性に関わるプロダクトが次々生まれてきました。 これまで新しい技術を投入してきた経験を思い出しながら、LLMをチームに取り組んでいきたいと考えました。
11. 21 新技術や開発手法をチームに効果的に取り込むためのステップ 新技術や開発手法をチームに効果的に取り込むためのステップを簡潔にまとめます。 1. 認識と理解: - トレンド調査と教育を通じて最新の技術や手法について学ぶ。 2. 評価と選択: - 実験的プロジェクトで新技術の効果を検証し、チーム内でフィードバックを収集する。 3. 導入計画の策定: - 段階的に導入し、適切なトレーニングとサポート体制を提供する。 4. 実装と評価: - 実際のプロジェクトに適用し、パフォーマンスを定期的に監視して改善を続ける。 5. 知識の共有と拡散: - 成功事例を共有し、コミュニティへの参加を通じて外部の知識も取り入れる。
12. デプロイの頻度 変更を本番環境にデプロイ、あるいはエンドユーザーにリリースした頻度 変更のリードタイム 変更のコミットから、本番環境で正常に実行されるまでの時間 変更失敗率 デプロイによって本番環境で障害が発生する割合 デプロイ失敗時の復元まで の時間 本番環境での障害から復元までにかかる時間 21 評価軸 LLMを使った開発手法を共有し、DevOps の4keys など、一定表の評価軸を使い生産性を評価します。
13. 21 事例）Copliot の活用 目標設定のため、Copliot ができることをざっくり書き出します。 ワークスペースにあるコードを学習した上でのコード生成 1. 発生したエラーの説明 2. コミットメッセージ、PRの説明の生成 3. コードの説明 4. コメントからコードの生成 5. テストコードの生成 6.
14. 21 活用度の収集 当社の場合、イシューあるいはPullRequest 完了時に下記の7つの項目において何を行なったかを報告をしてもら い、Copilot をどれぐらい活用できたのかをタスクごとに共有をしてもらっています。 例 発生したエラーの説明 △△△△ のエラーを把握に使った コードの説明 src/△△△△のコードの把握に利用した コメントからコードの生成 コメント経由して △△△△のコードを生成した テストコードの生成 Copliot を使って生成した 既存のコードから類似のコードを生成 していない
15. 21 活用度の収集 計測したいことをイシューテンプレートなどに記載し、情報を収集をするフロー化を行なっています。
16. 設計 16
17. 21 事例）Figma Jam AI の活用 目標設定のため、Figma Jam AI ができることをざっくり書き出します。 文章からフローチャートの生成 1. 文章から図を作成 2.
18. 21 フローチャートの作成 モンスターに料理を食べさせるゲームの画面遷移図を作成するにあたり、下記の概要に従って詳細を整理しました。 このゲームでは、プレイヤーがログイン後、ステージを選択してゲームを始め、モンスターに料理を与えることで進行します。ライフがない場合には動画広告を見ることでラ イフを回復できる流れになっています。 ユースケース 起動: ゲームが起動し、初期画面が表示される。 ログイン確認: プレイヤーがログインしているかを確認。 ログインしていない場合: ログイン画面に遷移し、ログインを促す。 ログインしている場合: ステージ選択画面に直接遷移。 ステージ選択: プレイヤーが挑戦したいステージを選択。 ライフの確認: 選択したステージをプレイする前に、プレイヤーのライフの残量を確認。 ライフがない場合: 動画広告を見ることを促す画面に遷移。 動画広告を見る: ライフが回復し、ステージ選択画面に戻る。 動画広告を見ない: ステージ選択画面に留まる。 ライフがある場合: ゲームプレイ画面に遷移。 プレイ開始: プレイヤーがゲームを開始し、モンスターに料理を食べさせる。 ゲーム完了: ゲームが完了し、結果画面が表示される。 ライフ消費: ゲームを一度プレイすることでライフが消費され、ステージ選択画面に戻る。 入力値
19. 21 フローチャートの作成
20. デザイン 16
21. 21 事例）デザイナーの課題 GPT4 を使ったデザインできることをリストアップ ランディングのLPの文言を生成する ユースケースをブラッシュアップする ユースケースから画面遷移図を作成する ユースケースからモデリングする
22. 21 モデリング例
23. 新規事業ビジネスコンサル 16
24. 21 ビジネスモデルキャンバス生成 秋頃にリリースする予定です。
25. 成果と評価 16
26. 21 成果と評価 デザイン工程において、工数が大幅に向上した これまで2週間かかっていたLPの提案が2日に短縮。 Pull Request の時間のコードレビューの短縮 https://coderabbit.ai/ というPull Request を自動で見てくれるツールの導入によって品質向上 マージまでの時間が、1/3 程度 テストコードの生成 これまで作りきれなかったフロントエンドのテストケースが生成できるようになった。 できるところからコツコツと成果を可視化しながら進めております。
27. Thank you !