© RAKUS Co., Ltd. AIエージェントを使った爆速デモアプリ作成 株式会社ラクス  開発本部 フロントエンド開発課 北嶋初⾳ 2025/9/30 1 

アジェンダ 2 1 デモアプリ作成の背景 2 利⽤技術について 3 AI活⽤フロー（全体と各ステップ） 4 AI活⽤の効果とメリット‧デメリット 5 まとめと今後の展望 

3 デモアプリ作成の背景 ● デザインは未確定：Miroのワイヤーのみ ● 仕様も流動的：作りながら決める 新規プロダクトの⽴ち上げ 【スピード】や【柔軟性】 が求められていた状況 とりあえず関係者に⾒せられる 動くデモアプリ（PoC）が欲しい！ 1 

利⽤技術について 4 ‧フロントエンドは他のサービス開発でも使い慣れていたReactを利⽤ ‧加えてAI駆動開発を実践（Claude Code, Codex） 2 とにかくスピードを重視！ ✖ 

利⽤技術について 5 ‧IDEはVSCodeを利⽤ ‧AIは拡張機能経由で呼び出す 2 壁打ちのしやすいAIの利⽤⽅式を採⽤ 

利⽤技術について 6 MCPサーバーで有⽤だったのは以下の2つ ‧Playwright：AI⾃⾝による動作確認⽤ ‧Context7：利⽤ライブラリの最新情報の収集⽤ 2 

AI活⽤フロー（全体） 7 3 step1 最初の1画⾯は、⾒本として⼈が⾃⼒で実装 step2 2画⾯⽬以降は、⾒本コード + ワイヤーのスクリーンショットを元にAIが画⾯の⼟台を実装 step3 ⼈とAIで壁打ちをして、AIにコードを修正させる step4 細かいUI/UX調整などの仕上げを、⼈が実施 step5 第三者によるレビューを実施し、コードFix 

AI活⽤フロー（step1） 8 3 step1 最初の1画⾯は、⾒本として⼈が⾃⼒で実装 ● AIに頼らず、⾃⼒でReactコンポーネントを実装 ○ 以降のAI出⼒の「お⼿本」になる ● Readme等への書き込みで、開発⽅針を⽰すことでAIの精度が向上 0~1の段階は、⼈が実施してルールを作ってあげる必要がある 

AI活⽤フロー（step2） 9 3 step2 2画⾯⽬以降は、⾒本コード + ワイヤーのスクリーンショットを元にAIが画⾯の⼟台を実装 ● 「この画⾯の⾒本のコードを真似してReact + Ionic Frameworkで作成して」というように依頼 ○ UIライブラリは明⽰的に指定しないと、別ライブラリを勝⼿に使いたがる場⾯があった ○ ここはContext7 MCPのおかげ、Ionic Frameworkを使ってくれるようになった この段階で、完成度30〜60%程度のコードが⼀瞬で⽣成される！ 

AI活⽤フロー（step3） 10 3 step3 ⼈とAIで壁打ちをして、AIにコードを修正させる ● 「ここが間違っているから直して」というように⼈からAIに修正依頼を繰り返すだけ ○ Playwrightで動作確認をさせながら実装させるのも効果的 ○ スクリプトエラーで画⾯が⽩くなることを⾃⼒で検知して修正してくれる場⾯も この段階で、完成度は80%程度までに引き上がる 

AI活⽤フロー（step4~5） 11 3 step4 細かいUI/UX調整などの仕上げを、⼈が実施 ● 細かいUI調整（⾊‧余⽩‧フォント）等は⼈が直す ● 動きの部分UX（スクロール時の挙動等）も同様に⼈が動かしてみて直す step5 第三者によるレビューを実施し、コードFix ● AIはあくまでサポート、第三者視点でのチェックが不可⽋ 80~100%への仕上げは、まだまだ⼈が⼿がかかせない状況 

AI活⽤の効果とメリット‧デメリット 12 ● 体感30〜40%の⼯数削減の効果を実感 ● AIの回答待ち時間を他作業（仕様検討等）に活⽤できたことも⼤きい 4 ● 新しく画⾯を⽣成する際にコードを書く 速度が⼤幅に向上 ● 仕様変更に追従する速度の加速 ● ⼈間よりも堅牢なコード（try-catchな ど）を⽣成可能 メリット ● AIコードは書いている本⼈も理解が浅く なりがち ● 「動くからOK」という思考リスク ○ 不要な処理の⾒逃し ● 細かいUIや複雑なUXの再現には不向き デメリット 

まとめと今後の展望 13 「AIは万能ではないが、正しく役割分担すれば強⼒なアシスタントになる」 4 ● 役割分担の有効性 ○ 0→1は⼈間 ○ 1→80はAI ○ 80→100は⼈間 ● 最終責任 ○ AIはあくまでアシスタントであり、最終的な品質は⼈間が責任を持つ必要がある ● 今後の展望 ○ ユニットテスト、インテグレーションテストの⾃動⽣成