AIエージェントを使った爆速デモアプリ作成 / Rapid demo app creation using AI agents

◆イベント名
AI導入最前線！理想 vs 現実『AIドリブン開発』 〜エンジニア視点で語るリアル活用術〜
https://connpass.com/event/370611/

◆発表タイトル
AIエージェントを使った爆速デモアプリ作成

◆登壇者
株式会社ラクス　フロントエンド開発課　北嶋初音

Transcript

1. © RAKUS Co., Ltd. AIエージェントを使った爆速デモアプリ作成 株式会社ラクス  開発本部 フロントエンド開発課 北嶋初⾳ 2025/9/30 1
2. アジェンダ 2 1 デモアプリ作成の背景 2 利⽤技術について 3 AI活⽤フロー（全体と各ステップ） 4 AI活⽤の効果とメリット‧デメリット 5 まとめと今後の展望
3. 3 デモアプリ作成の背景 • デザインは未確定：Miroのワイヤーのみ • 仕様も流動的：作りながら決める 新規プロダクトの⽴ち上げ 【スピード】や【柔軟性】 が求められていた状況 とりあえず関係者に⾒せられる 動くデモアプリ（PoC）が欲しい！ 1
4. 利⽤技術について 4 ‧フロントエンドは他のサービス開発でも使い慣れていたReactを利⽤ ‧加えてAI駆動開発を実践（Claude Code, Codex） 2 とにかくスピードを重視！ ✖
5. 利⽤技術について 5 ‧IDEはVSCodeを利⽤ ‧AIは拡張機能経由で呼び出す 2 壁打ちのしやすいAIの利⽤⽅式を採⽤
6. 利⽤技術について 6 MCPサーバーで有⽤だったのは以下の2つ ‧Playwright：AI⾃⾝による動作確認⽤ ‧Context7：利⽤ライブラリの最新情報の収集⽤ 2
7. AI活⽤フロー（全体） 7 3 step1 最初の1画⾯は、⾒本として⼈が⾃⼒で実装 step2 2画⾯⽬以降は、⾒本コード + ワイヤーのスクリーンショットを元にAIが画⾯の⼟台を実装 step3 ⼈とAIで壁打ちをして、AIにコードを修正させる step4 細かいUI/UX調整などの仕上げを、⼈が実施 step5 第三者によるレビューを実施し、コードFix
8. AI活⽤フロー（step1） 8 3 step1 最初の1画⾯は、⾒本として⼈が⾃⼒で実装 • AIに頼らず、⾃⼒でReactコンポーネントを実装 ◦ 以降のAI出⼒の「お⼿本」になる • Readme等への書き込みで、開発⽅針を⽰すことでAIの精度が向上 0~1の段階は、⼈が実施してルールを作ってあげる必要がある
9. AI活⽤フロー（step2） 9 3 step2 2画⾯⽬以降は、⾒本コード + ワイヤーのスクリーンショットを元にAIが画⾯の⼟台を実装 • 「この画⾯の⾒本のコードを真似してReact + Ionic Frameworkで作成して」というように依頼 ◦ UIライブラリは明⽰的に指定しないと、別ライブラリを勝⼿に使いたがる場⾯があった ◦ ここはContext7 MCPのおかげ、Ionic Frameworkを使ってくれるようになった この段階で、完成度30〜60%程度のコードが⼀瞬で⽣成される！
10. AI活⽤フロー（step3） 10 3 step3 ⼈とAIで壁打ちをして、AIにコードを修正させる • 「ここが間違っているから直して」というように⼈からAIに修正依頼を繰り返すだけ ◦ Playwrightで動作確認をさせながら実装させるのも効果的 ◦ スクリプトエラーで画⾯が⽩くなることを⾃⼒で検知して修正してくれる場⾯も この段階で、完成度は80%程度までに引き上がる
11. AI活⽤フロー（step4~5） 11 3 step4 細かいUI/UX調整などの仕上げを、⼈が実施 • 細かいUI調整（⾊‧余⽩‧フォント）等は⼈が直す • 動きの部分UX（スクロール時の挙動等）も同様に⼈が動かしてみて直す step5 第三者によるレビューを実施し、コードFix • AIはあくまでサポート、第三者視点でのチェックが不可⽋ 80~100%への仕上げは、まだまだ⼈が⼿がかかせない状況
12. AI活⽤の効果とメリット‧デメリット 12 • 体感30〜40%の⼯数削減の効果を実感 • AIの回答待ち時間を他作業（仕様検討等）に活⽤できたことも⼤きい 4 • 新しく画⾯を⽣成する際にコードを書く 速度が⼤幅に向上 • 仕様変更に追従する速度の加速 • ⼈間よりも堅牢なコード（try-catchな ど）を⽣成可能 メリット • AIコードは書いている本⼈も理解が浅く なりがち • 「動くからOK」という思考リスク ◦ 不要な処理の⾒逃し • 細かいUIや複雑なUXの再現には不向き デメリット
13. まとめと今後の展望 13 「AIは万能ではないが、正しく役割分担すれば強⼒なアシスタントになる」 4 • 役割分担の有効性 ◦ 0→1は⼈間 ◦ 1→80はAI ◦ 80→100は⼈間 • 最終責任 ◦ AIはあくまでアシスタントであり、最終的な品質は⼈間が責任を持つ必要がある • 今後の展望 ◦ ユニットテスト、インテグレーションテストの⾃動⽣成