MVP開発における生成AIの活用と導入事例

MVP開発における生成AIの活用と導入事例グリーエックス社古屋研太

アジェンダ 1. はじめに：AI開発の理想と現実 2. 開発におけるAI活用(バイブコーディング) 3. アプリケーション機能としてのAI活用 4. まとめ

最初の理想：AIならいい感じに仕様書作ってくれる？ちょうど社内向けツールを作りたいという要望があったので、AI活用の実践もかねてアプリ開発を開始・営業チームの要望に加え、将来的な利用を踏まえた大まかな内容をまとめた企画書がある・それを元にAIが仕様書を書いてくれれば、その仕様書を元に内容をすり合わせできて楽・仕様書をAIが生成できれば、アプリ開発に詳しくない人でもアプリを作って業務効率化できて便利現実は甘くなかった…

理想と現実 : ハルシネーション AIのハルシネーションが出やすい… 「生成AIが事実とは異なる情報や存在しない情報を、あたかも正しい情報であるかのように出力してしまう現象」   簡単な企画書段階の資料では、解釈の幅が大きすぎるので、アプリケーションの仕様書に起こすには情報が不足しすぎている生成した仕様書にはそれっぽい内容が書いているが、不足して
いる部分を無理に補おうとした結果、不自然な仕様があちこちに見られた

理想と現実 : ハルシネーション生成した仕様書を検証するのが大変すぎる前述のハルシネーションを起こした内容を添削するためには、文章からアプリの仕様をちゃんと読んで理解して、矛盾点な変な内容を確認しないといけない最初からアプリに詳しい人間が書いたほうが早くない…？簡単なwebページでもなければさすがにAIだけで完璧に作ることは現状は困難

活用方針の転換 : 詳細仕様書よりプロトタイピング • 膨大な文章を読むより、「動くモノ」を触る方が分かりやすい • ソースコードから仕様を文章にしてもらう方が正確な内容が出る最速で「動くプロトタイプ」を作りそれをもとに議論する方針へ。 ※
多く工数が空いていたのがエンジニア1名かつ内製開発だったのでこの方針ができたが、必ずしもこの方法ができるわけではないので注意

AIとのペアプロ「バイブコーディング」「こんな感じ」という感覚（Vibe）を頼りに、AI と対話しながら試行錯誤する開発スタイルまた、自分の得意分野を生かしつつ詳しくない分野をAIが補完してくれるのがよい。一方で、「こんなアプリを作りたい」という仕様を一生懸命指示しているのにうまくいかない経験をした方もいるのではないでしょうか？

バイブコーディングの勘所 (ハルシネーションを回避するには？) 最初が肝心アプリの土台をちゃんと作ってから少しずつ作っていく AIから見ても曖昧な指示から１からアプリを作るには、どのようなシステム構成や技術選定をするのか選択肢が多すぎて、変な土台から作り始めてしまう。絞れる選択肢は可能な限り絞ってあげるとよい
① 壁打ち ② 生成＆試行 ③ 改善 ④ エラー解決の４つのステップを少しずつ繰り返して作る AIが変な方向に実装していかないようにするには、少しずつ確認しながら作るのが一番常にアプリがエラーなく実行できるようになってからマージする

バックエンドはOpenAPIとAIの相性が〇 AIに直接バックエンドを作成させるのは前述のハルシネーションの問題が起きやすい Open API形式のドキュメントを元にバイブコーディングすれば、AIのコンテキストに収まりやすいので精度もよく、Swagger Editorで見やすく理解しやすい。ある程度問題なければAPIのソースコードを生
成し、その雛型を元に再度バイブコーディングしていくと早く実装できるソースコード

バックエンドができればフロントエンドは早い • 情報が少ない企画書の段階でAIにアプリを作らせるのは大変だが、そこにバックエンドのAPI定義があると一気に精度が上がる印象。基本的なwebアプリはバックエンドの情報を表現することなので、どんなデータ構造か決まっていれば非常に良い成果物が出てくる。 • ややこしいUIのレイアウトも、気になった点があれば自然言語で指摘すれば直してくれる
「◦◦を右寄せにして」「文字を全体小さく」など • ブラウザの「検証」メニューからUIのclass名を取得して指示を出すとさらに効果的

アプリ構造を把握しやすい文書を生成させるプロトタイピングによってとりあえず触って理解しやすい部分は一気に構築できるものの、内部の権限やアプリの全体的な画面設計など俯瞰してみる必要がある部分もある適宜必要なタイミングで、AIにソースコードを元に画面遷移図や権限表など、見てわかりやすい図を描いてもらうのも効果的 Mermaid記法はMarkdown記法みたいな特定の記号と書き方で図をかけるので、文字を扱うのが得意な
生成AIと相性が良いのでお勧め

アプリケーション機能としてのAI活用アプリ側の機能としてもAIを活用 • 文書の解析と構造化 • 表記ゆれ対策この２つに関して、AIを活用することでユーザビリティの改善や運用コストの削減を見込んでいる

文書の解析と構造化をAIでアップロードされた書類の要約と評価を自動実行する仕組みを構築構造化出力(structured output)機能を使うことで、数枚の文書であればかなりの精度で行い、目的のデータ構造に落とし込むことが現在でも可能 GeminiであればGoogle AI Studio上で試すことができるので、エンジニア以外でも実装が可能
今まで絶対にできなかった領域を作業分担できる

表記ゆれ対策にAIを表記ゆれの修正はプログラムだけで実装はかなり難しい (Excel / Microsoft Excelは同じだけど、Java / Java Script
はぜんぜん違う) 生成ＡＩであれば単語の意味から推察してくれるので効果的に利用できるただし、毎回の入力の度に生成AIを起動しているとコストと時間がかかるので、深夜のバッチで実行 Java Java Script C# C++ Excel MicrosoftExcel Javascript Java Java Script C# C++ Excel MicrosoftExcel Javascript Java Script Java C# C++ Excel DB

まとめ • プロトタイプをバイブコーディングで作って認識合わせは効果的 • 生成AIに1からすべて1回で作らせない少しずつ確認しながら作る ➡ 正しい情報を積み重ねていくほど、AIの成果物も精度が高まるプロト段階でエンジニア以外でも作りやすく　➡
パフォーマンスは無視して簡単にモックサーバーが作れるような仕組みプロトタイプから仕様書作成を仕組化　➡ 動いてる仕組みを元に仕様書を書けば精度も高い課題

MVP開発における生成AIの活用と導入事例

MVP開発における生成AIの活用と導入事例

gree_tech PRO

More Decks by gree_tech

Other Decks in Technology

Featured

Transcript