取り組みの背景
2026年、モバイルアプリ開発の世界は大きく変わろうとしています。
従来の開発フロー:
要件定義 → デザイン(数日) → 実装(数週間) → テスト(数日) → リリース
新しい自動化フロー:
要件定義 + AGENTS.md → AI デザイン生成(Figma) → AI コード生成(Rork)
→ AI テスト生成 → AI コードレビュー → リリース
すべてのステップが AI エージェントによって並行実行されます。ここではその実現方法を段階的に解説します。
AIエージェント時代の開発パラダイム
従来の開発プロセスの問題点
- シリアル処理:各ステップが順序待ち → 総開発期間が長い
- コンテキストロス:ステップ間で情報が失われる(デザインで決まったことが実装で無視される)
- 人為ミス:要件 → デザイン → 実装での翻訳誤り
- 品質ばらつき:開発者のスキルに品質が左右される
AI エージェント時代の利点
- パラレル実行:デザイン・実装・テストが同時進行
- コンテキスト統一:AGENTS.md が「唯一の真実」
- 一貫性保証:AI が全ステップで共通の要件を参照
- 品質均一:AI の判断基準が一定
AGENTS.md でプロジェクトを定義
AGENTS.md とは
AGENTS.md は、GitHub で 60,000 以上のリポジトリが採用している標準フォーマット。AI エージェントがプロジェクトの構造・要件・制約を理解するための「プロジェクト憲法」です。
モバイルアプリプロジェクト用 AGENTS.md 例
# Rork Mobile App: Task Manager
## Project Overview
Build a feature-rich task management app for iOS/Android using Rork.
**Target Users**: Individual productivity enthusiasts
**Platforms**: iOS 16+, Android 12+
**Key Features**:
1. Task CRUD with due dates and priorities
2. Recurring tasks with customizable patterns
3. Dark mode support
4. Offline-first sync using local database
## Project Structuremobile-app/ ├── apps/ │ ├── ios/ # Native iOS code │ ├── android/ # Native Android code │ └── shared/ # Shared business logic ├── design/ # Figma files (auto-synced) ├── tests/ │ ├── unit/ │ ├── integration/ │ └── e2e/ └── AGENTS.md # This file
## AI Agent Capabilities
### Design Agent (Figma MCP)
- **Goal**: Generate iOS/Android UI mockups
- **Constraints**:
- Follow Material Design 3 (Android) and HIG (iOS)
- Maintain 12-point grid alignment
- Use accessible colors (WCAG AA minimum)
- **Deliverables**: Figma file with responsive variants
### Development Agent (Code Generation)
- **Goal**: Implement features from Figma designs + Code Connect
- **Tech Stack**:
- Kotlin (Android)
- Swift (iOS)
- Shared Rust layer for business logic
- **Constraints**:
- No hardcoded strings (use localization)
- 100% type-safe code
- Repository pattern for data access
### Test Agent (QA Automation)
- **Goal**: Generate comprehensive test suites
- **Coverage Target**: 85% line coverage minimum
- **Test Types**:
- Unit tests (business logic)
- Widget/Component tests (UI)
- Integration tests (database + network)
- E2E tests (critical user flows)
### Review Agent (Code Quality)
- **Goal**: Ensure code quality, security, accessibility
- **Checks**:
- Security: No hardcoded secrets, SQL injection prevention
- Performance: No N+1 queries, efficient animations
- Accessibility: All interactive elements have labels, colors pass contrast checks
- **Action**: Block merge if CRITICAL or HIGH severity
## Development Workflow
### Phase 1: Requirements & Design (Day 1)
1. AI Design Agent reads AGENTS.md
2. Generates Figma mockups for all screens
3. Creates responsive variants (mobile + tablet)
4. Applies design system tokens
### Phase 2: Code Generation (Day 2-3)
1. AI Development Agent reads Figma files via Code Connect
2. Generates platform-specific code:
- iOS: SwiftUI + Combine
- Android: Jetpack Compose + Kotlin Flow
3. Implements business logic from AGENTS.md specs
4. Configures database schema and migrations
### Phase 3: Testing (Continuous)
1. AI Test Agent generates unit tests
2. AI generates widget/component tests
3. AI generates integration tests
4. E2E test suite for critical paths
### Phase 4: Code Review & Merge (Continuous)
1. AI Review Agent validates each commit
2. Performs security, performance, accessibility checks
3. Suggests optimizations
4. Blocks unsafe code, approves safe code
## Design Automation: Figma MCP パイプライン
### Step 1: Figma でスクリーン自動生成
```typescript
// rork agent command
rork agent run --task "Generate mobile app screens from AGENTS.md"
// Behind the scenes:
// 1. AI reads AGENTS.md features
// 2. Creates Figma frame for each screen
// 3. Applies Material Design 3 / HIG tokens
// 4. Generates interactive prototypes
// 5. Creates responsive variants
Step 2: Code Connect で自動コード抽出
// figma.config.ts
figma.connect("TaskListScreen", {
component: "lib/screens/task_list_screen.dart",
props: {
tasks: figma.array("Tasks"),
onTaskTap: figma.function("onTaskTap"),
onAddTask: figma.function("onAddTask"),
},
});
// 生成コード(自動):
class TaskListScreen extends StatefulWidget {
final List<Task> tasks;
final Function(Task) onTaskTap;
final VoidCallback onAddTask;
const TaskListScreen({
required this.tasks,
required this.onTaskTap,
required this.onAddTask,
});
@override
State<TaskListScreen> createState() => _TaskListScreenState();
}コードレビュー自動化(ハーネスエンジニアリング)
ステップ1:制約定義(Constrain)
# review-constraints.yaml
constraints:
forbidden:
- hardcoded_strings # 国際化違反
- direct_database_access # Repository pattern違反
- api_key_in_code # セキュリティ違反
- weak_password_validation # 品質違反
allowed:
- add_comments
- suggest_improvements
- request_test_coverageステップ2:文脈提供(Inform)
async function gatherReviewContext(pr: PullRequest) {
return {
// コード変更
diff: pr.getDiff(),
// プロジェクト基準
agents_md: readFile("AGENTS-md"),
// テスト結果
tests: {
unit: await runUnitTests(),
widget: await runWidgetTests(),
coverage: await getCoverage(),
},
// セキュリティスキャン
security: await runSecurityScan(),
// パフォーマンス
benchmark: await runBenchmarks(),
};
}ステップ3:自動検証(Verify)
#!/bin/bash
# verify.sh
set -e
echo "Running verification suite..."
# 1. Lint & format
flutter analyze
dart format --set-exit-if-changed .
# 2. Type checking
dart analyze --fatal-infos
# 3. Unit tests
flutter test --coverage
# 4. Widget tests
flutter test test/widgets/
# 5. Security
flutter pub dev analyze
# 6. Coverage threshold
coverage_percent=$(grep -oP 'lines</key><real>\K[^<]+' coverage/lcov.info | awk '{s+=$1} END {print s/NR*100}')
if (( $(echo "$coverage_percent < 85" | bc -l) )); then
echo "❌ Coverage ${coverage_percent}% below 85% threshold"
exit 1
fi
echo "✓ All checks passed"ステップ4:自動修正(Correct)
async function autoFixCodeIssues(pr: PullRequest) {
const issues = await reviewWithAI(await gatherReviewContext(pr));
// CRITICAL & HIGH のみ修正を試みる
const criticalIssues = issues.filter(
i => ["CRITICAL", "HIGH"].includes(i.severity)
);
if (criticalIssues.length === 0) {
console.log("✓ No critical issues");
return;
}
// AI が修正を試みる
let attempt = 0;
let code = pr.getCode();
while (attempt < 3) {
const fixedCode = await ai.generateFix({
code,
issues: criticalIssues,
constraints: loadConstraints(),
agents_md: readFile("AGENTS-md"),
});
// 検証を再実行
const verification = await verify(fixedCode);
if (verification.passed) {
console.log("✓ Auto-fix successful");
return fixedCode;
}
// フィードバックをAIに与えて再試行
criticalIssues.push(...verification.failures);
code = fixedCode;
attempt++;
}
console.log("⚠️ Auto-fix failed, requiring human review");
}完全自動化ワークフローの例
Day 1: AI が要件をコード化
# AGENTS.md から開始
$ rork agent run --multi-agent
# Background:
# 1. Design Agent (Figma):
# ✓ TaskListScreen mockup
# ✓ TaskDetailScreen mockup
# ✓ AddTaskScreen mockup
# ✓ Dark mode variants
# ✓ Tablet layouts
#
# 2. Dev Agent (Code):
# ✓ Generated task_list_screen.dart (250 lines)
# ✓ Generated task_detail_screen.dart (200 lines)
# ✓ Generated task_model.dart (50 lines)
# ✓ Database schema migration
# ✓ Repository pattern implementation
#
# 3. Test Agent (QA):
# ✓ unit_test.dart (300 lines)
# ✓ widget_test.dart (250 lines)
# ✓ integration_test.dart (150 lines)
#
# 4. Review Agent (Quality):
# ✓ Code review comments (security, perf, a11y)
# ✓ Auto-fixes applied
# ✓ PR ready for merge
# Results:
# - 7 files, 1200+ lines of production code
# - 700+ lines of tests
# - All AGENTS.md requirements satisfied
# - 87% test coverage
# - 0 security issues
# - Ready to mergeDay 2: 継続的な改善
AI エージェントは以降も監視:
- 新しい PR → 自動レビュー
- テスト失敗 → 原因分析・修正提案
- パフォーマンス低下 → 最適化提案
- セキュリティアラート → 即座に修正
まとめ
AGENTS.md + Figma MCP + ハーネスエンジニアリングの組み合わせは、モバイルアプリ開発の実質的な完全自動化を可能にします。
重要なのは、AI は「品質を保証する」ツールではなく、「品質を測定・改善する」環境設計があってこそ初めて価値を発揮するということ。
あなたの Rork プロジェクトで、今日から試してみてください。
あわせて「プロを目指す人のためのTypeScript入門」(鈴木僚太 著)もぜひご覧ください。TypeScriptでの堅牢な開発を基礎から丁寧に解説しています。