プロジェクトに参画してから最速で成果を出す生成AI活用方法

836 Views

April 23, 25

スライド概要

【ハイブリッド開催】AI駆動開発実践の手引き -これが僕/私のAI(アイ)棒-
シリーズイベント「Hack@DELTA」v25.04
で話した内容です

profile-image

技術支援をしています。

シェア

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

(ダウンロード不可)

関連スライド

各ページのテキスト
1.

プロジェクトに参画後、 最速で成果を出す⽣成AI 活⽤⽅法 merutin 2025.04.23

2.

⾃⼰紹介 公官庁向けシステム開発 → ERPパッケージベンダー → DELTA 特定の技術にこだわらず、お客さんに合わせて何でもやっています。 直近1年くらいの仕事 - ⽣成AIを利⽤したアプリケーションの開発 - LangChain + FastAPI + Next.js / Dify 要件定義、インフラの選定等なんでも - Cloud Functions + Firestore を Laravel + Go + MySQLにリアーキテクチャ - Prismaのコネクション チューニング - コスト削減(AWS、Google Cloud)

3.

利⽤している⽣成AI - ChatGPT - 普段使い - Gemini - 昨⽇から使い始めた。まだ未知数 - NotebookLM - もっと使いたいが、まだいいユースケースが出来ていない - GitHub Copilot - tab補完でいい感じに書いてくれる時 まれに、askやagentを使ったりもする - Roo Code - BedrockでClaude 3.7 Sonnetを利⽤している - v0 - 設計書レベルでの画⾯を⽣成するのに利⽤ - 齟齬がある部分はHTMLで修正するのが⼀番はやい

4.

利⽤している⽣成AI - ChatGPT - 普段使い - Gemini - 昨⽇から使い始めた。まだ未知数 - NotebookLM - もっと使いたいが、まだいいユースケースが出来ていない - GitHub Copilot - tab補完でいい感じに書いてくれる時 まれに、askやagentを使ったりもする - Roo Code - BedrockでClaude 3.7 Sonnetを利⽤している - v0 - 設計書レベルでの画⾯を⽣成するのに利⽤ - 齟齬がある部分はHTMLで修正するのが⼀番はやい

5.

数多くのプロジェクトに関わっている 同時に数多くのプロジェクトに関わっている(2025年4⽉) - ⾃分で⼿を動かしている:2件 何かあったらフォロー:5件 ヒアリング‧提案:3件 ちょっとだけかかわっている:10件以上 余談:GitHubのOrganizationに10箇所所属しています。

6.

数多くのプロジェクトに関わっている キャッチアップに時間(コスト)をかけてもいいことがない 想定通りに開発環境が動かないことがよくある - 環境依存で動かないとか結構ある - お客さんはMac、私はWindows - node module - 構築ドキュメントが微妙に古くて動かない - Notionに構築ドキュメントがあって、権限が付与されてないために確認できない

7.

全てをキャッチアップできる必要はない お客さんのソースコードや業務を全て理解するのは無理がある → 特定の部分に注⽬して修正ができれば良い - コスト削減でも受託の場合でも⼀緒 - ⼤きくても1機能の改修まで - ほとんどは実質的には数⾏ - 数百⾏の変更

8.

全てをキャッチアップできる必要はない 簡単な動作確認が出来ればOKなのに、ちょっとした変更で全体が動かなくなること や、想定していない影響範囲があり、意外と時間がかかってしまう - ⽣成AIにお任せして上⼿くいけばいいが、そうではないことも多い 開発環境を起動するにあたって、つまずくのは⼤体関係ないところが多い

9.

全てをキャッチアップできる必要はない あるプロジェクトで調べた内容を記事にする際に、せっかくなので再現できるプロ ジェクトを作成しようとした。 - ⽣成AIに最初から書かせてみたらいいのでは?と思いRoo Codeに書かせてみた ら、割といい感じにコードを⽣成してくれた → 検証のためのコードのみのプロジェクトを作成するのがいいのでは?

10.

実例 私のGitHubのリポジトリより、最近作成したもののうち、いくつかを紹介します - express-prisma - laravel-phpunit-namaed-route - react-pdfjs-sample

11.

実例 私のGitHubのリポジトリより、最近作成したもののうち、いくつかを紹介します - express-prisma - laravel-phpunit-namaed-route - react-pdfjs-sample

12.

実例① express-prisma prismaを利⽤するにあたって、Connectionのチューニングをしたかった 公式ドキュメントを参照すると、以下のように設定ができることが分かった postgresql://USER:PASSWORD@HOST:PORT/DATABASE?schema=public&connection_limit=1 設定をすることだけは簡単だが、それで値が変っているよねという保証がないのは怖 い

13.

実例① express-prisma connectionの数が設定の通りに変っていることを確認するのは意外と難しい - select for updateでロックをしているテーブルに対して、そのテーブルに対する CRUDを実⾏するリクエストを実⾏すれば、コネクションを利⽤したままにでき る - 意図しない部分で⽌まってしまう可能性があり、上記を確認するのはシンプルな 構成にしたい

14.

実例① express-prisma Roo Codeでいい感じにCRUDをするプログラムを書いてもらう - 当時のログは残ってないのですが、express + prismaでCRUDするプログラムを 書いてとお願いしたら、⼀通り書いてくれた印象です。

15.

実例① express-prisma 作成したコードをもとにConnectionの数が意図したとおりに変わるのかを確認 - コンソールからselect for updateをしてテーブルをロック - 該当のテーブルに対して、createを⾏うリクエストを実⾏ - テーブルがロックされているので、解除待ちになる コネクションを保持したままになる - createを⾏うリクエストを再度実⾏する - コネクションを2つ利⽤した状況になる 繰り返しで指定の数のコネクションが作成できるかを検討し、想定通りになっている ことを確認

16.

実例① express-prisma 業務側でちょうどいいコードを探して、 ロックの⽅法を考えて、 開発環境を頑張って起動して、 検証する というステップを⼤幅に短縮して検証ができた。

17.

実例 私のGitHubのリポジトリより、最近作成したもののうち、いくつかを紹介します - express-prisma - laravel-phpunit-namaed-route - react-pdfjs-sample

18.

実例② laravel-phpunit-namaed-route - Laravelのmiddlewareで名前付きのRouteを利⽤していた - middlewareのテストを実⾏しようとしたが、なぜか名前でのRouteが取得出来 なかった(下の書き⽅だと、test.indexという名称での処理ができない)

19.

実例② laravel-phpunit-namaed-route ⾊々調べていくと根が深く、テスト側で⼯夫が必要なことが分かった 参考になるサイトはあったが、これだというものは無かった -

20.

実例② laravel-phpunit-namaed-route 試⾏錯誤した結果、実現出来たので、記事としてまとめることにした。 当の部分だけを書いても良かったが、改めて⾃分の内容を整理するためにも、同じ状 況を再現するコードを作成したかった 最初から書くのは⼤変だなと思い書くのをためらっていたが、ちょうど当時話題にな り始めていてたRoo Codeに書いてもらうのにちょうどいいと思い、試してみた。

21.

実例② laravel-phpunit-namaed-route 意図せずステップバイステップで書いてもらっていた そのためか、綺麗にコードを作成できた 公開した記事(https://zenn.dev/team_delta/articles/55ca1a713291b9)

22.

実例 私のGitHubのリポジトリより、最近作成したもののうち、いくつかを紹介します - express-prisma - laravel-phpunit-namaed-route - react-pdfjs-sample - (うまくいかなかったパターン)

23.

実例③ react-pdfjs-sample Reactでpdfを表⽰する処理を作成したかった pdfjsというライブラリで簡単に描画はできる - ブラウザ埋め込みのpdf表⽰とダウンロードボタンが出ない以外は⼀緒にしたい

24.

実例③ react-pdfjs-sample Copilot Agentに書いてもらったが、canvasの領域にpdfを表⽰するのみで、ページ ネーションや他のボタンが表⽰されない - pdfjsのreact⽤のラッパーがあるものの、ブラウザ埋め込みのpdfを再現するも のではない

25.

実例③ react-pdfjs-sample pdfjsのライブラリに同梱されている、viewer.htmlとviewer.jsをReactでも使いた かった - 埋め込みのPDFと同じような動きをする - URLのパラメータを設定すると、同じドメインの任意のファイルを表⽰できる Reactでも利⽤すると、jsで意図しないエラーになった ElementがDom Treeにマウントされてなく、描画位置の取得でのエラーで詰まる

26.

実例③ react-pdfjs-sample - エラーの解消なら⽣成AIでできるでしょと任せてみた(Copilot Agent) 修正しました。と出るが変更点が0⾏が続いて諦めました。。

27.

まとめ - ⽣成AIはプロジェクトのテンプレートを作成するみたいな処理は向いている - 学習元のサンプルとして多いからだと思われる - テンプレートから修正することで検証内容のみが⼊ったリポジトリができる - 後から、どうやって解決したっけっていう振り返りにもちょうどいい - 検証をもとに、プロジェクトのコードに落とし込む - 動くことまでは分かっているので、迷うことなく修正ができる

28.

まとめ 課題を分割して、⽣成AIで解決できるレベルまで落とし込むことが⼤事 - ⽣成AIに限らず、課題の設定を上⼿くできるかが鍵になる - 聞かれたものを作成するので、課題が悪いと、微妙なものができる ⽣成されるものの正解がわかってないと厳しい pdfjsの場合、viewer周りのコードが⻑いのと、課題が抽象的だったのが解決出来な かった要因か - bundleされているソースなので数万⾏あった - ちゃんと調査すれば解消できるとは思っている

29.

おわり