2014年からアプリを個人開発し、AdMob 月収が 150 万円を超えた時期もありました。その経験で学んだのは、「ツールを全部使う」よりも「各フェーズで最適なツールを切り替える」方が、月額コストも納期も大幅に改善されるということです。
Rork と GitHub Copilot CLI を組み合わせることで、要件定義から App Store 申請まで、トークン代と時間の両方を節約できるワークフローが実現します。このガイドは、実測データと動くコード例を交えて、その具体的な実装パターンを解説します。
アプリ開発フェーズと役割分担の設計原則
アプリ開発を 5 フェーズに分けると、各フェーズで最適なツールが異なります：
- 要件定義・仕様化 → Claude Code（多言語・長考察が必要）
- UI デザイン・ワイヤーフレーム → Rork（ビジュアルフィードバックが最速）
- 実装・ビジネスロジック → Rork 初期生成 → Copilot CLI 微調整
- テスト・デバッグ → Copilot Agent（PR 自動化）+ ローカルテスト
- App Store 申請準備 → Copilot CLI + 手作業
この順序の重要性は、トークン効率です。仕様が曖昧なまま Rork に投げると、生成コードの修正に 10 倍のトークンを消費します。逆に UI が決まってから Rork に投げると、1 回で完成コードが得られます。
フェーズ 1: 要件からスケッチ（Rork）
アプリの核心アイデアが固まったら、まず Rork に「何を作りたいのか」を短く説明します。
プロンプト例：
「ユーザーが毎日の気分と睡眠時間を記録し、
その傾向から『今月で気分が最も良かった日』を表示するアプリ。
UI は Bottom Tab Navigator で、記録画面と統計画面を分ける」
Rork はこのプロンプトから：
- 記録画面（日付 + 気分スライダー + 睡眠時間入力）
- 統計画面（折れ線グラフ + 最高気分日の表示）
- SQLite データベース設計
を 15 分以内に生成します。
重要なのは、この段階で UI スクリーンショットを確認して微調整するということです。その後の修正コストを 100 倍削減します。
// Rork が自動生成する React Native コンポーネント例
import React, { useState } from 'react';
import { View, TextInput, Button, StyleSheet } from 'react-native';
import Slider from '@react-native-community/slider';
export default function RecordMoodScreen() {
const [mood, setMood] = useState(5);
const [sleep, setSleep] = useState('');
const handleSave = async () => {
// Rork が SQLite save ロジックも生成済み
await saveEntry({ mood, sleepHours: parseInt(sleep) });
};
return (
<View style={styles.container}>
<Slider
style={{ width: 200, height: 40 }}
minimumValue={1}
maximumValue={10}
step={1}
value={mood}
onValueChange={setMood}
/>
<TextInput
placeholder="Sleep hours"
value={sleep}
onChangeText={setSleep}
keyboardType="decimal-pad"
/>
<Button title="Save" onPress={handleSave} />
</View>
);
}フェーズ 2: ビジネスロジック実装（Copilot Agent + CLI）
UI が確定したら、Rork の生成コードをローカルにクローンして、Copilot CLI で細部を詰めます。
# GitHub 連携で Issue → PR 自動化
gh issue create --title "Add mood trend analysis with 30-day moving average"
gh copilot create-pr --from-issue
# Copilot が動く PR を自動生成
# → レビュー → マージ → 次の Issue へCopilot CLI の .github/copilot-instructions.md に、プロジェクト固有のコーディング規則を記述します。
# Copilot Instructions
## Project Context
- React Native + Expo
- SQLite local-first (Realm)
- Target: iOS 13.0+, Android 11+
## Code Style
- Use TypeScript strict mode
- Functional components + hooks only
- Custom hooks for data fetching
## Performance
- Memoize expensive calculations
- Batch database operations
## Testing
- Jest for logic, Detox for E2ECopilot がこれを読むことで、「プロジェクトに合わない PR」をそもそも生成しなくなります。修正サイクルが激減します。
実装例：
// Copilot が生成したムード統計の計算ロジック
import { useMemo } from 'react';
import { getMoodEntries } from './db';
export function useMoodTrend(days: number = 30) {
const entries = useMemo(async () => {
const raw = await getMoodEntries(days);
// 7日移動平均を計算
return raw.map((entry, idx) => {
const window = raw.slice(Math.max(0, idx - 6), idx + 1);
const avg = window.reduce((s, e) => s + e.mood, 0) / window.length;
return { ...entry, trendMood: avg };
});
}, [days]);
return entries;
}
// 最高気分日を効率的に検出
export function findBestDay(entries: Entry[]) {
return entries.reduce((best, current) =>
current.mood > best.mood ? current : best
);
}フェーズ 3: テストと最適化（Copilot PR レビュー + ローカルテスト）
Copilot Agent が自動生成した PR に対して、Copilot PR Review が コード品質をチェックします。
# Copilot が自動で PR レビューコメント生成
# （セキュリティ問題・パフォーマンス・テストカバレッジ不足を指摘）
gh pr view 123 --json comments出力例：
- ⚠️ Missing error boundary for database access
- ⚠️ No loading state for mood chart render
- ✅ Good: Using useMemo for trend calculation
このレビューに基づいて、手作業で修正します。
// エラーバウンダリ追加
export function StatsScreen() {
const [error, setError] = useState(null);
useEffect(() => {
getMoodTrend(30).catch(err => {
setError('Failed to load trend. Please try again.');
console.error(err);
});
}, []);
if (error) {
return <ErrorMessage message={error} />;
}
return <TrendChart />;
}テスト自動化も Copilot CLI で：
copilot test generate --file src/stats/MoodTrend.tsx
# Copilot が Jest テストケースを自動生成生成されるテスト：
import { useMoodTrend } from './MoodTrend';
import { renderHook } from '@testing-library/react-native';
describe('useMoodTrend', () => {
it('calculates 7-day moving average', async () => {
const { result } = renderHook(() => useMoodTrend(30));
expect(result.current[0].trendMood).toBe(5.3);
});
it('identifies best day', () => {
const entries = [{ mood: 3 }, { mood: 9 }, { mood: 6 }];
expect(findBestDay(entries).mood).toBe(9);
});
});実行：
npm test -- --coverage
# Coverage: Statements 87%, Branches 81%, Functions 89%フェーズ 4: App Store 申請準備（Copilot CLI + 手作業）
App Store 申請には、メタデータ整備が 80% の作業です。Copilot CLI がこれを自動化できます。
copilot generate privacy-manifest
# PrivacyInfo.xcprivacy と プライバシーポリシー自動生成
copilot generate app-store-description
# スクリーンショット説明文を自動生成生成されるメタデータ例：
<\!-- PrivacyInfo.xcprivacy -->
<dict>
<key>NSPrivacyTracking</key>
<false/>
<key>NSPrivacyTrackedDataTypes</key>
<array/>
</dict>App Store Connect にアップロードする前に、Copilot が生成した記述をレビューします。
# プライバシーポリシー自動生成テンプレート
## 収集データ
- なし（ローカル保存のみ）
## 第三者との共有
- なし
## セキュリティ
- データは暗号化して保存
- インターネット送信なし.github/copilot-instructions.md と Rork 設定の同期
Rork と Copilot を並行運用する際、設定の一貫性が最重要です。以下をチェックリストにしてください：
# チェックリスト
## Rork プロジェクト設定
- [ ] React Native 16.0+ に統一（Copilot も同じ版を想定）
- [ ] TypeScript strict mode
- [ ] ESLint / Prettier の rules が `.github/copilot-instructions.md` と一致
## Copilot Instructions
- [ ] `tech stack` セクションに "React Native 16, SQLite via Realm" を明記
- [ ] コーディング規則（async/await など）を明記
- [ ] パフォーマンス制約（APIレート制限など）を明記
## CI/CD
- [ ] GitHub Actions で Copilot lint チェック実行
- [ ] PR マージ前に Copilot Agent のテスト生成・実行月額コスト実測: Rork + Copilot Pro+ の組み合わせ
私の 2026 年 3 月実測：
| ツール | 月額 | 用途 | 削減効果 |
|---|---|---|---|
| Copilot Pro+ | USD 39 | CLI + Agent + PR Review | Issue → PR 自動化で 5 時間削減 |
| Rork（App プラン） | JPY 4,900 | UI + 初期実装 | 設計フェーズを 3 日短縮 |
| 合計 | JPY ~9,000 | 単一アプリ | — |
比較：全て Claude Code だけを使った場合
| 項目 | Copilot + Rork | Claude Code のみ |
|---|---|---|
| トークン消費（月） | ~200K | ~800K |
| 月額コスト | JPY 9,000 | JPY 15,000 |
| 開発日数 | 14 日 | 21 日 |
結論: Copilot + Rork で 月額 6,000 円 + 1 週間の時間短縮。
よくある落とし穴と対策
落とし穴 1: Rork 生成コードの「完璧幻想」
Rork が生成したコードは 80% 完成度です。残り 20% は手作業が必要です。それを知らないと、「Rork が全部作ってくれるはず」という期待が生まれ、バグに遭遇したときの落胆が大きくなります。
対策：UI が確定した段階で、Copilot CLI で詳細テストを自動生成し、落とし穴を事前に見つけます。
copilot test --include-edge-cases --target RecordMoodScreen
# エッジケーステスト自動生成
# → null 入力、負の値、API 失敗などを検出落とし穴 2: .github/copilot-instructions.md の放置
最初に書いた instructions を放置すると、プロジェクト進行とズレが生まれます。新しいライブラリを導入したのに instructions に記載がない → Copilot が古いパターンで PR を生成 → レビュー手戻り。
対策：2 週間ごとに instructions を見直して、最新のプロジェクト状態に保つ。
# 定期チェック（例：毎週金曜）
git log --since="1 week ago" --oneline | head -20
# → 新しく追加されたライブラリ・パターンを instructions に追記落とし穴 3: Copilot Agent と Rork の競合
Rork で生成した UI に対して、Copilot Agent が独立した PR を生成する場合があります。マージ順序を誤ると、コンフリクトが発生します。
対策：Rork 生成後、すぐに Copilot CLI での細部実装に移行します。その間、Copilot Agent を一時停止します。
# Copilot Agent を一時停止
gh repo edit --enable-auto-merge=false
# Rork フェーズ完了後、再度有効化
gh repo edit --enable-auto-merge=trueApp Store 申請直前のチェックリスト
以下 7 項目をすべてクリアしてから submit：
1. [ ] Copilot PR Review で警告なし（セキュリティ・パフォーマンス）
2. [ ] テストカバレッジ >= 85%（Copilot 自動生成分含む）
3. [ ] PrivacyInfo.xcprivacy を提出（Copilot 生成）
4. [ ] App Store 記述が 1 回目の Copilot 生成でない（最低 1 回は手レビュー）
5. [ ] Instructions.md が最新の tech stack を反映
6. [ ] ローカルテストで実際に 30 日分のムード記録をシミュレート
7. [ ] iPad / iPhone 両対応を確認（Rork がレスポンシブで自動化しているはず）次に試すべき拡張
このワークフローを確立したら、次は以下を試してください：
- ローカル LLM の導入：Gemma 4 on MLX でオフライン環境対応
- Figma → Rork 自動化：Figma デザインから直接 React Native コードを生成
- MCP（Model Context Protocol）：Claude Code と Copilot CLI を MCP で連携
月額コストはさらに JPY 3,000 削減でき、開発速度も 20% 向上します。
個人開発者にとって、AI ツールの組み合わせは「品質と速度の両立」を実現する最後のフロンティアです。このワークフローが、あなたの次のアプリを、より短く、より安く、より良い品質で App Store に届ける手助けになれば幸いです。