AI駆動開発

Transcript

1. AI駆動開発 生成AI LT AIエージェントによる効率的な未来型開発 2025年4月10日 下半期
2. 生成AIを活用してシステム開発を 効率化・高速化するための開発手法 生成AIや自動化ツールを組み合わせることで、要件定義から 実装・テストに至るまでのプロセスを効率化し、スピードと品質の 両面で飛躍的な向上を目指す手法。 本LTでは、Next.jsやPrismaといったモダンな技術スタックに加え、 Vercelの「v0」やCursorなどのAIツールを活用した事例を通じて、 短期間でアプリケーションを実装する方法をご紹介します。 まだ試行段階ではありますが、これからの開発スタイルを大きく変え る可能性を秘めた「AI駆動開発」の全体像を、一緒に探っていきまし ょう。 はじめに AI駆動開発とは
3. 今回作成するアプリケーション
4. 今回作成するアプリケーション
5. 今回作成するアプリケーション
6. 今回作成するアプリケーション
7. バックエンド Next.js Prisma - ORM フロントエンド Next.js Tailwind CSS shadcn/ui IDE Cursor データベース MySQL AI/自動化関連 Mastra - AI機能の統合フレームワーク Tavily - 検索機能 AIツール v0 by Vercel Cursor composer ChatGPT(o1) Deepreaserch (NotebookLM) 技術スタック Laravel＋jQueryからNext.jsへ
8. バックエンドの作成 フロントエンドの実装 作成した要件定義書を渡し、UIを作成する。 ShadcnUI(カスタマイズ性に優れた UIコンポーネントの集まり)を使用するため、 カスタマイズ性が高く、綺麗なUIを作成する ことが可能。 まだまだ検証段階でありベストプラクティスではありません AI駆動開発の流れ 要件定義の作成 GPT-o1や4.5、Claude-3.7-sonnetなどの 高性能モデルを使用し、要件定義書を作成。 要件定義書作成時は、OpenAIやGeminiなど のDeepResearchを用いて情報を集める。 v0で作成したコードをローカル環境に クローンし、DB接続やバックエンドの開発 を行う。 Cursor Composerを用いたAIエージェント モードでバックエンドを実装してもらう。 AIが99%のコードを生成
9. 要件定義を作成 GPT-o1で要件定義を行う ⚠️ 注意：１回のプロンプトで一気に作成しようとしないこと！ プロンプトの内容を一部聞いてくれなかったりAIがバイアスにかか ってしまい、一般的な要件定義書しか作成できなくなる。 ① DeepResearchで言語やアーキテクトの懸念点や 　 ベストプラクティスを調べる ② ChatGPTでアプリケーションの作成目的や必要機能について 　壁打ちする(どんな課題があるか何をしたいのかを明確にする) ③ ②とは違う新たなスレッドを立ち上げ①の情報と②の情報を　 　 GPT4oに送信する。 　その後モデルをo1に切り替え要件定義書を作成してもらう。 ここが一番大事
10. 要件定義を作成 ① DeepResearchで調査 ② o3モデルと壁打ちし目的を明確にし、 　 必要画面や機能を洗い出す ③ 新たなチャットを立ち上げ①②を送信し、 要件定義書を作成する
11. 実装 v0でフロント・Cursorでバックエンドを 作成する v0とはVercelが提供している、自然言語でUIデザインとフロントエンドの コードを自動生成してくれるAIツール。 99%以上のコードを自動生成
12. デモ(v0でのフロントエンド作成)
13. デモ(Cursorでバックエンド作成)
14. AI駆動開発のメリット 超・時間短縮できる リクルートステーションのようなアプリケーションで あれば１週間あれば実装が可能に。 昔は画面デザインを考えるのに１週間以上かかってい た。 その１ UIUXの勉強になる 世界中で使われているモダンなUIUXを知ることができ る。 生成AIに作られる事で自分の知ってる範囲外のレイア ウトを出力する事が多くあるので、開発現場でも生き てくる。 その３ 懸念点をあらい出せる インフラやアーキテクチャ、セキュリティ面の提案も利用 人数や環境等も踏まえて考慮してくれる。 非機能要件で予め考慮しておかないといけないことが網羅 的に出力されるので気づけなかった部分に気づけたり、知 らないことを学ぶことも出来る。 その２ 言語化力を上げる練習になる AIが意図した回答をしなかった時に何が期待と異なってい るかを言語化できないと望む結果が得られない。 AIに伝えるためには言語化をしないといけない。 また、伝わりにくいポイントもある程度分かってくるので マネジメント能力も上がる(たぶん) その４
15. AI駆動開発の悩みポイント バックエンドの精度は低め データベースがや条件が複雑になるとプロンプトを守 らないことが増える。 cursorでファイルごとや拡張子ごとなど詳細にルール が作れるようになったのでプロンプト次第で精度向上 が見込めるかも。要研究 その１ 選定技術がある程度限られてくる Next.jsやPython製のライブラリが多い。 最新技術を取り込みたい、すぐに試してみたい場合は 現実的にNext.jsかPythonの２択になっている。 その３ 新規開発でない場合使い方が難しい AIが読みにくい構造になっていることが多い。 ルールがあまり明確にないプロジェクトの場合、コードを 修正する精度がかなり落ちる。 その２ 大規模プロジェクトでコンテキスト を保持できなくなる？ ファイル数が多くなると関係性を正しく把握できなくなり 正しい場所に正しい条件でコードを追加してくれなくなる 恐れがある。 Cursorのツール申請が通り次第試してみる。 その４
16. ご清聴ありがとうございました！ 生成AIについて一緒に学びましょう！
17. フロントエンドの作成 デザインの作成 設計書の作成 FigmaMCPで自然言語ベースでデザ インを作成し、Figma上で微調整す る。 現状思いつくAI駆動開発の最適解 今後試したいAI駆動開発の流れ v0はコードだけでなくmermaid形 式のER図はフローチャートなども 作成できるため画面遷移図なども同 時に出力できる。 AIエージェントで 要件定義の作成 ・ファシリテーター ・プロジェクトマネージャー ・リードエンジニア ・QAエンジニア ・ユーザー 上記のAIエージェントを議論さ せ予算・ビジネス価値・アーキ テクトなどの最適を議論させて 要件定義を作成する。 作成した要件定義書を渡し、UIを作 成する。 ShadcnUI(カスタマイズ性に優れた UIコンポーネントの集まり)を使用 するため、 カスタマイズ性が高く、綺麗なUIを 作成することが可能。
18. CI/CD E2Eテスト 自然言語でE2Eテストを自動で行う ユニットテスト 現状思いつくAI駆動開発の最適解 今後試したいAI駆動開発の流れ バックエンドの作成と同時にユニッ トテストも作成してもらい実行も行 う。 バックエンドの作成 v0で作成したコードをローカル環境 に クローンし、DB接続やバックエン ドの開発を行う。 Cursor Composerを用いたAIエージ ェント モードでバックエンドを実装しても らう。 自然言語で自動テストや本番デプロ イなどを行う仕組みを構築する
19. v0とは？ v0は、Next.jsの開発元として知られる Vercel Labsが提供する生成AIサービス 人間のデザイナーと対話しているように、生成AIと対話しながらUIを作成 できることを目指して開発されています。 【利用例】 Webサイト作成 お問い合わせフォーム作成 LPの作成 ログインページの作成 cookie同意バナーの作成 よくある質問ページの作成 ダッシュボード画面の作成 プログレスバーやローディング画面のデザイン ユーザープロフィール編集ページの設計 多言語切り替え機能付きのナビゲーションバー ER図の作成 HTMLバナーの作成
20. モデルの使い分け方 基本的には「claude-3.7-sonnet」でOK １ファイルが対象で複雑な処理の時は「Gemini2.5 Pro」が強い OpenAIのモデルはChatGPT上で使うのはいいがAPIで使うのはかなり精度が低い Claude-3.7-sonnet ≧ Gemini 2.5Pro >>>>>>>> OpenAI