AI駆動開発パターン~3つの使い方とVibe Codingの勘所~

13.5K Views

June 27, 25

スライド概要

下記イベントでの発表資料です。

AI駆動開発(AI-Driven Development) 勉強会 【大阪支部 #2】
https://aid.connpass.com/event/356707/

profile-image

AIに夢を見てるWEBエンジニアです こんなもの作ってます👇 ・リアルタイム音声認識ノートアプリ https://solaoi.github.io/lycoris/

シェア

またはPlayer版

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

(ダウンロード不可)

関連スライド

各ページのテキスト
1.

AI駆動開発パターン ~3つの使い方とVibe Codingの勘所~ @aorblue 1

2.

あなたのコード、 AIが書きましたか? AIと『対話』しましたか? 2

3.

自己紹介 青山 広大(Aoyama Kodai) #テックリード #Certified ScrumMaster® エンジニアリング領域 WEBフロントエンド/バックエンド(React.js, Next.js, Node.js, Python) モダンデータスタック(特にSnowflake) AI(特にOpenAI, Azure) 音声(個人開発アプリ作ってます! ️Lycoris) 3

4.

本日のテーマ AI駆動開発の3つのパターン パターンを踏まえた開発ワークフロー パターンを踏まえて、"Vibe Coding" をどう捉える? 4

5.

本日紹介する3つのパターン 1. 知っていることをコードに起こす 的確な指示で高品質な実装を高速化する 2. 知らないことをコードに起こす AIとの対話で不明点を明確にし、深い思考を行う 3. そもそも分からないことをコードに起こす UIなど正解のない領域で、仮説検証サイクルを加速する 5

6.

1. 知っていることをコードに起こす 質の高いインプット(指示・スキーマ) で、 質の高いアウトプット(コード) を引き出す。 「Garbage In, Garbage Out」の逆。 6

7.

2つのアプローチ A: 対話・指示ベース AIの優れたコード読解力を活用し、開発 者の明確な意図をコードに変換する。 1. Claude Code: 詳細な要件定義からの生成 既存コードの読解とリファクタリン グ B: スキーマ・定義ベース 曖昧さのない「スキーマ」を正とし、コ ードを機械的に生成。 1. スキーマからコードへと自動生成環境: openapi.yaml , dab-config.json , schema.hcl 2. Cursorのタブ補完でスキーマ生成: 宣言的で人にとってもAIにとっても 明らかな生成、変更内容を担保 7

8.

Tips: スキーマ駆動のススメ APIのIF実装: Orval × Hono OpenAPIスキーマからHonoのプレゼンテーション層を自動生成。 参考: https://zenn.dev/soartec_lab/articles/9b6178c3010c7d DBのAPI化: Data API Builder (Microsoft) DBスキーマからREST/GraphQL APIを即座に生成。パスワードレス対応も。 参考: https://github.com/Azure/data-api-builder DBのマイグレーション: Atlas (Ariga) schema.hcl でDBスキーマを宣言的に管理・マイグレーション。 参考: https://github.com/ariga/atlas 8

9.

2. 知らないことをコードに起こす AIとのチャットやWEB検索を通じて、知らないことを明確にする 壁打ち相手として活用し、自身の考えを整理する 最終的に 「知っている状態(パターン1)」へ移行 することがゴール 9

10.

主な利用ツール 目的 網羅的 な情報 収集 対話に よる思 考整理 主なツール ChatGPT (o3) × DeepResearch Gemini 2.5 Pro ※ 特徴・使いどころ 未知の技術について、Web上の情報を広く深く収 集・要約する。網羅性に優れるが、ハルシネーショ ンを考慮し、情報の取捨選択が必要。 収集した情報を基に、具体的な疑問を投げかけ、ア イデアを壁打ちする。高速なレスポンスで思考のテ ンポを維持し、理解を確かなものに変えていく。 個人的にはo1-proが思考のパートナーとして最高でしたが、今は次点のGemini 2.5 Proが活躍。 レスポンスが速く対話のターンを重ねやすいのは利点。 10

11.

3. そもそも分からないことをコードに起こす 正解のないもの(特にUI) の仮説検証を高速化する Claude の Artifacts や v0.dev を活用し、リアルタイムでUIを生成・確認 動くものをベースに、開発者自身やステークホルダーと対話する 11

12.

なぜ、この3つのパターンで考えるのか? 目的の明確化: 今、AIに何をさせたいのかがハッキリする 最適なツール選定: 目的に合ったAIツールを選べる チームの共通言語: 「今はパターン2の状態だね」と認識が揃う 👉️ 再現性のある、質の高いAI駆動開発へ 12

13.

パターンを踏まえた開発ワークフロー そもそも分からないことをコードに起こす => v0 でUIのアイデアを出す ↓↑ 知らないことをコードに起こす => Gemini 2.5 Pro で実装方針を壁打ち ↓↑ 知っていることをコードに起こす => Claude Code on Cursor で明確になった仕様を実装 13

14.

つまり、各パターンを行き来しており、 自身が何をさせたいのか目的をハッキリさせ、それに応じたAIツール を活用するのが大事! (再掲)なぜ、この3つのパターンで考えるのか? 目的の明確化: 今、AIに何をさせたいのかがハッキリする 最適なツール選定: 目的に合ったAIツールを選べる チームの共通言語: 「今はパターン2の状態だね」と認識が揃う 14

15.

用途に応じた活用例:Claude Code vs Gemini CLI Claude Code (4 Opus) Gemini CLI (2.5 Pro) ユースケース 既存コードの深い理解による コーディング 発言意図を推測・考慮した スライド作成 強み 複雑なコードの文脈把握 思考の副操縦士 対応パターン 知っていることをコードに起こす 知らないことをコードに起こす 15

16.

パターンを踏まえて、"Vibe Coding" をどう捉える? パターン1, 3では、思考の高速化やアイデアの具現化に有効な武器となる パターン2(知らないことをコードに起こす) で、理解のない"Vibe Coding"は 危 険な罠 エンジニアとしての成長機会の損失 生成されたコードへの責任が持てない 自分が今どのパターンにいるか意識し、Vibe Codingを使い分けることが重要 16

17.

まとめ AI駆動開発を3つのパターンで捉え、目的を明確にする ワークフローの中でパターンを意識的に行き来する Vibe Codingの罠を理解し、効果的に活用する 17

18.

ご清聴ありがとうございました! 18

19.

Q&A ご質問どうぞ! 19