Slide 1
Slide 1 text
AIが書いたコードをAIが検証する！
自律的なモバイルアプリ開発の実現
henteko
Slide 2
Slide 2 text
今井健太@henteko
● DeployGate inc.
Co-founder/CPO
● 2児の父
Slide 3
Slide 3 text
AIが書いたコードをAIが検証する！
自律的なモバイルアプリ開発の実現
Slide 4
Slide 4 text
Vibe Coding
Slide 5
Slide 5 text
人間がコードを一切書かず に、
AIに要件を伝えるだけでアプリを開発する
Slide 6
Slide 6 text
Vibe Codingの課題
「品質」
Slide 7
Slide 7 text
複雑なものを作ろうとすると
動くものがうまく作れない
Slide 8
Slide 8 text
動かすことができる最小単位 での開発
Slide 9
Slide 9 text
「人間がコードに一切触れない 」が影響して
デグレが発生する
Slide 10
Slide 10 text
AI自身に動作確認を行わせる
Slide 11
Slide 11 text
No content
Slide 12
Slide 12 text
No content
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
カスタムコマンドの利用
現在の差分を確認し、影響範囲において動作確認項目を作成してください。
作成した動作確認項目を isc を利用して iPhone 16 Pro(iOS 18.2) を起動し確認
してください。
WDA pathには '/your/path/WebDriverAgent' を利用してください。
画面を操作する際には必ずiscのelements sourceを利用して、画面要素を確認し
て、操作にはできる限りelements clickを利用してください。
動作確認実施時は必ず画面を録画してください。
Slide 15
Slide 15 text
実際の開発を通して紹介
Slide 16
Slide 16 text
フェーズ1: プロジェクト基盤構築
Slide 17
Slide 17 text
フェーズ2:
デザインシステムとナビゲーション骨格
Slide 18
Slide 18 text
フェーズ2: デザインシステムとナビゲーション骨格
● タブバーの作成
● 各画面の作成
● 本を追加するボタンの作成
Slide 19
Slide 19 text
No content
Slide 20
Slide 20 text
フェーズ3: 書籍登録フローと蔵書一覧
Slide 21
Slide 21 text
フェーズ3: 書籍登録フローと蔵書一覧
● 本の登録フォーム
● 作成された本の一覧画面
Slide 22
Slide 22 text
フェーズ4: 書籍詳細画面と進捗更新
Slide 23
Slide 23 text
No content
Slide 24
Slide 24 text
詳細画面に遷移すると
クラッシュ！
Slide 25
Slide 25 text
エラーログと一緒に再修正を指示
Slide 26
Slide 26 text
No content
Slide 27
Slide 27 text
更新を保存すると
クラッシュ！
Slide 28
Slide 28 text
実装が気づかなかった画面の不具合を
AIがキャッチ
Slide 29
Slide 29 text
Re: エラーログと一緒に再修正を指示
Slide 30
Slide 30 text
フェーズ5: ホームダッシュボード
Slide 31
Slide 31 text
フェーズ6: 読了ログタブ
Slide 32
Slide 32 text
No content
Slide 33
Slide 33 text
No content
Slide 34
Slide 34 text
エラーログと一緒に再修正を指示
Slide 35
Slide 35 text
No content
Slide 36
Slide 36 text
ラストフェーズ: 全体確認
Slide 37
Slide 37 text
プロンプト
アプリの内容と現在のUI実装とを確認し、できる限りユーザーストーリーにそう形で
の動作確認項目をまとめてください。
まとめた動作確認項目を isc を利用して iPhone 16 Pro(iOS 18.2) を
起動し確認してください。
WDA pathには '/your/path/WebDriverAgent' を利用してください。
画面を操作する際には必ずiscのelements sourceを利用して、画面要素を確認し
て、操作にはできる限りelements clickを利用してください。
動作確認実施時は必ず画面を録画してください。
Slide 38
Slide 38 text
No content
Slide 39
Slide 39 text
更新を保存すると
クラッシュ！(2度目)
Slide 40
Slide 40 text
エラーログと一緒に再修正を指示後
完成
Slide 41
Slide 41 text
AIによる動作確認は万能ではないが
一定有用である
Slide 42
Slide 42 text
「影響範囲がわからない」
「そんな画面いつの間に作ってたの」
しっかりと確認してくれる安心感
Slide 43
Slide 43 text
デメリット
時間がとにかくかかる
Slide 44
Slide 44 text
モデルの進化で来年には解決していそう
Slide 45
Slide 45 text
Vibe Codingにおいては
頻出するバグの箇所のみ
テストをAIに書いてもらうのが有用
Slide 46
Slide 46 text
まとめ
● 影響範囲をしっかりと確認してくれる
● AIによる動作確認は現状時間がかかる
○ これはモデルの性能が解決する可能性が高い
● AIによる動作確認で得られた知見をテストコードに反映する
Slide 47
Slide 47 text
さいごに
https://zenn.dev/henteko/articles/4e4c4de127d7a4