Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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