Rork × Claude でアプリ開発 — AI生成アプリをブラッシュアップする方法

プロトタイプと本番品質のあいだ

モバイルアプリ開発は複雑で時間がかかります。しかし、AI の進化により、その風景は大きく変わろうとしています。Rork と Claude Code の組み合わせは、アイデアから本番品質のアプリへの道を劇的に短縮できます。

このガイドでは、Rork で迅速にプロトタイプを生成し、Claude Code でそれを磨き上げるワークフローを解説します。

Rork とは何か

Rork は、自然言語のプロンプトだけで、本物のモバイルアプリ（React Native / Expo）を生成する AI を搭載したアプリビルダーです。

Rork は、開発チームが数週間かかるような基本的なアプリ構造を、わずか数分で作成できるツールです。しかし、生成されたアプリはあくまで「スターター」であり、本番レベルの品質にするには、さらに磨く必要があります。ここで Claude Code が活躍します。

Rork Max — ネイティブ Swift アプリの新時代

2026年2月、Rork は Rork Max をリリースしました。従来の React Native ベースの Rork とは別の、まったく新しいプロダクトです。

Rork Max の特徴

Rork Max は Claude Code と Opus を搭載し、ネイティブ Swift アプリを生成します。React Native では実現できなかった Apple プラットフォームの深い機能にアクセスできるのが最大の強みです。

React Native 版との違い

従来の Rork は React Native / Expo ベースで、クロスプラットフォーム（iOS + Android）に対応していました。Rork Max は Apple エコシステムに特化する代わりに、以下のネイティブ機能をフルサポートします：

• ARKit / LiDAR スキャン — 拡張現実体験、3D オブジェクト配置
• Metal グラフィックス — 3D ゲーム、高度なビジュアル
• ホーム画面ウィジェット / Dynamic Island / Live Activities
• Siri Intents — 音声コマンドでアプリを操作
• HealthKit / HomeKit / NFC
• Core ML — オンデバイス機械学習
• App Clips — インストール不要の小さなアプリ体験

2クリックで App Store に公開

Rork Max の最も注目すべき機能は、Xcode なし・Mac なしで App Store に公開できることです。

1. ブラウザ上でアプリを構築
2. クラウド Mac でネイティブコンパイル
3. ストリーミングシミュレータでプレビュー
4. QR コードでデバイスにインストール
5. 2クリックで App Store に提出

Apple Developer Program のメンバーシップ（$99/年）は別途必要ですが、Xcode のダウンロードや Mac の所有は不要です。

Rork Max の料金

• Free: 週5プロンプト程度（お試し用）
• Max プラン: $200/月 — 無制限のネイティブ Swift ビルド、全プラットフォーム対応

ローンチからわずか3日で ARR $1.5M を達成するなど、開発者コミュニティからの注目度は非常に高いです。

Rork Max × Claude Code のワークフロー

Rork Max で生成されたネイティブ Swift プロジェクトも、エクスポートして Claude Code でブラッシュアップできます。Swift / SwiftUI のコードベースに対して、Claude Code は以下のような改善が可能です：

• Swift のベストプラクティスに沿ったリファクタリング
• MVVM アーキテクチャの適用
• Swift Concurrency（async/await）の導入
• XCTest によるテストスイートの生成
• Core Data や SwiftData によるデータ永続化

Rork でアプリを生成する

基本的な使い方

Rork を使ってアプリを生成するプロセスは単純です：

1. アプリの説明を入力 — "タスク管理アプリ、ユーザー認証機能付き、ダークモード対応" など、希望するアプリの機能と外観を自然言語で記述
2. AI が生成を開始 — Rork の AI がプロンプトを解析し、React Native のコンポーネント、ナビゲーション、スタイルを自動生成
3. リアルタイム プレビュー — Expo Go を使用して、自分のデバイス上でアプリをプレビュー
4. コードをエクスポート — 気に入ったら、完全な React Native プロジェクトをダウンロード

プロンプトのコツ

Rork で良い結果を得るには、プロンプトを明確かつ詳細に作成することが重要です：

よい例：

Create a weather app with:
- A main screen showing current temperature and conditions
- Search functionality to find other cities
- A 5-day forecast section
- Temperature conversion (Celsius/Fahrenheit)
- Dark mode support with a toggle button in the header

避けるべき例：

天気アプリを作成してください

具体的な機能、UI レイアウト、デザイン要件を含めると、より高品質なアプリが生成されます。

生成されるファイル構造

Rork が生成するプロジェクトは、以下の構造を持つ標準的な React Native / Expo プロジェクトです：

my-app/
├── app/
│   ├── (tabs)/
│   │   ├── index.tsx
│   │   ├── explore.tsx
│   │   └── profile.tsx
│   ├── _layout.tsx
│   └── +html.tsx
├── components/
│   ├── ThemedText.tsx
│   ├── ThemedView.tsx
│   └── Navigation.tsx
├── constants/
│   ├── Colors.ts
│   └── Layout.ts
├── hooks/
│   └── useColorScheme.ts
├── app.json
├── package.json
├── tsconfig.json
└── .gitignore

このプロジェクト構造は Expo Router に基づいており、ファイルベースのルーティングを使用します。

生成されたアプリの限界

Rork で生成されたアプリは、迅速なプロトタイピングには理想的ですが、いくつかの限界があります：

デザインの汎用性

生成されたアプリは、基本的なデザイン システム（Colors.ts、レイアウト定数など）を使用しています。本番アプリでは、ブランドに合わせたカスタム デザインが必要です。

ビジネスロジックの不完全性

AI が生成できるのは、基本的な UI スケルトンとダミーデータです。実際の API 統合、ユーザー認証、データベース接続は、開発者が実装する必要があります。

テストの欠如

生成されたコードにはテストが含まれません。Jest や React Native Testing Library を使用したテストスイートの作成が必要です。

パフォーマンス最適化なし

生成されたアプリは最適化されていません。大規模なリストのメモ化、画像の最適化、バンドル サイズの削減などは、後で実装する必要があります。

Claude Code でブラッシュアップするプロセス

ステップ 1: プロジェクトの準備

Rork から生成したプロジェクトを Claude Code で開く準備をします：

1. プロジェクトをローカルにダウンロード — Rork から React Native プロジェクトをエクスポート
2. Git リポジトリを初期化 — git init でバージョン管理を開始
3. CLAUDE.md を作成 — プロジェクトのコンテキスト、アーキテクチャ、開発ガイドラインをまとめたファイル

CLAUDE.md の例：

# MyWeatherApp - Development Context
 
## Overview
A React Native weather application built with Expo Router, providing current conditions, forecasts, and city search functionality.
 
## Project Structure
- `/app` - Expo Router screens and layouts
- `/components` - Reusable React components
- `/hooks` - Custom React hooks
- `/constants` - Design tokens and configuration
- `/services` - API integration (future)
 
## Technology Stack
- React Native 0.74
- Expo Router 3.x
- TypeScript
- TailwindCSS (via NativeWind)
 
## API Integration Requirements
- OpenWeatherMap API for weather data
- Location services for geolocation
 
## Known Limitations
- No authentication system yet
- Static mockup data only
- No persistent storage
- Performance not optimized for large datasets
 
## Development Priorities
1. API integration and real weather data
2. Custom authentication flow
3. Unit and integration tests
4. Performance optimization
5. Accessibility improvements

ステップ 2: Claude Code でコードを読み込む

claude .

このコマンドで Claude Code が現在のプロジェクトを読み込み、対話型の開発セッションが開始されます。

ステップ 3: 改善をリクエスト

Claude Code に対して、具体的な改善リクエストを出します。

UI/UX の改善

例 1: ログイン画面のデザイン改善

claude "Improve the login screen with modern styling:
- Add gradient background (blue to purple)
- Use rounded buttons with shadow effects
- Add subtle animations for input focus
- Improve spacing and typography
- Add forgot password link"

Claude Code は以下を自動的に行います：

• 新しいスタイルファイルを生成または更新
• アニメーション ライブラリ（react-native-reanimated など）を追加
• コンポーネントを最新のスタイルで修正
• 変更内容をレビュー用に提示

例 2: ダーク モード の完全実装

claude "Ensure complete dark mode support:
- Review all color definitions in Colors.ts
- Update every screen to use theme colors
- Test color contrast for accessibility
- Add smooth theme transitions
- Persist user theme preference to AsyncStorage"

ビジネスロジックの追加

API 統合

Rork が生成したアプリには、多くの場合、ダミーデータが含まれています。Claude Code を使用して、実際の API との統合を追加します：

claude "Add OpenWeatherMap API integration:
1. Create a services/weatherApi.ts file
2. Implement functions:
   - fetchCurrentWeather(lat, lon)
   - fetchForecast(lat, lon)
   - searchCities(query)
3. Handle errors gracefully
4. Add request caching to reduce API calls
5. Create TypeScript types for API responses"

ユーザー認証フロー

claude "Implement secure user authentication:
1. Set up authentication context using React Context
2. Add sign up, login, and logout flows
3. Use AsyncStorage for token persistence
4. Add JWT token refresh logic
5. Implement protected routes
6. Add password reset via email"

データ永続化

claude "Add local data persistence:
1. Set up SQLite database using expo-sqlite
2. Create schema for user preferences
3. Implement CRUD operations
4. Add data synchronization with backend API
5. Handle offline mode gracefully"

テストの追加

Jest テストスイートの生成

Rork が生成したコンポーネントにはテストがありません。Claude Code でテストを追加します：

claude "Create comprehensive tests:
1. Generate Jest configuration
2. Add unit tests for all utility functions
3. Add component tests using React Native Testing Library
4. Create mocks for API calls
5. Aim for at least 70% code coverage"

Claude Code は以下を生成します：

• __tests__/components — コンポーネント テスト
• __tests__/services — API サービス テスト
• jest.config.js — Jest 設定
• __mocks__ — API、ライブラリ用のモック

テストの実行

npm test

パフォーマンス最適化

メモ化とレンダリング最適化

claude "Optimize rendering performance:
1. Use React.memo for expensive components
2. Apply useMemo for computed values
3. Apply useCallback for event handlers
4. Fix unnecessary re-renders using React DevTools Profiler
5. Review and fix memory leaks"

画像の最適化

claude "Optimize image handling:
1. Replace all Image components with optimized versions
2. Add lazy loading for below-the-fold images
3. Implement image caching strategy
4. Compress and convert images to modern formats (WebP, AVIF)
5. Add image size constraints to prevent bloating"

バンドル サイズの削減

claude "Reduce bundle size:
1. Audit current dependencies with 'npm ls'
2. Remove unused packages
3. Replace heavy packages with lighter alternatives
4. Code split large screens using dynamic imports
5. Enable tree-shaking in build configuration"

Claude Code MCP を使用した高度な統合

Claude Code の Model Context Protocol（MCP）を使用すれば、Rork プロジェクトの操作をさらに自動化できます。

実践ワークフロー：完全な例

実際のプロジェクトのライフサイクルを見てみましょう。

フェーズ 1: Rork でプロトタイプ生成（30 分）

プロンプト: "Create a task management app with:
- Task list showing incomplete tasks
- Add new task button
- Mark task as complete/incomplete
- Delete task functionality
- Task categories
- Dark mode support"

結果： 基本的な UI スケルトン、ナビゲーション、スタイル

フェーズ 2: Claude Code でコードレビュー（30 分）

claude "Review the generated code:
1. Check code quality and TypeScript types
2. Identify architectural issues
3. Suggest performance improvements
4. List missing features and edge cases
5. Create a prioritized improvement plan"

Claude Code がレビュー レポートを生成します。

フェーズ 3: 機能の完成（2～3 時間）

claude "Implement complete feature set:
1. Add Firebase Realtime Database for data persistence
2. Implement user authentication with Firebase Auth
3. Add task editing functionality
4. Implement task filtering and sorting
5. Add task categories management
6. Create user settings screen for preferences"

フェーズ 4: テストとQA（2～3 時間）

claude "Create and run comprehensive tests:
1. Unit tests for business logic
2. Integration tests for database operations
3. Component tests for all screens
4. Test error handling and edge cases
5. Manual testing checklist
6. Prepare for beta testing"

テストが完成し、バグが修正されます。

フェーズ 5: デプロイ準備（1 時間）

claude "Prepare for production deployment:
1. Enable release builds for both iOS and Android
2. Create app signing certificates
3. Prepare store listings (descriptions, screenshots, icons)
4. Set up analytics and crash reporting
5. Create deployment checklist
6. Verify all configurations"

フェーズ 6: App Store/Google Play への公開

Rork は App Store と Google Play への直接デプロイを支援します。

ベストプラクティス

1. インクリメンタルな改善

一度にすべてを改善しようとするのではなく、段階的に行いましょう：

# Step 1: 基本的なスタイル改善
claude "Polish the UI with modern design principles"
 
# Step 2: 認証の追加
claude "Add user authentication"
 
# Step 3: テストの追加
claude "Add comprehensive tests"

2. CLAUDE.md を最新に保つ

プロジェクトが進化するにつれて、CLAUDE.md を更新し、最新の状態を反映させます。これにより、Claude Code が常に最新のコンテキストで作業できます。

3. Git でコミットを管理

各フェーズでコミットを作成し、変更を追跡します：

git add .
git commit -m "Improve login screen UI"
git commit -m "Add Firebase integration"
git commit -m "Add unit tests"

4. 小さなプロンプトで正確に指示

曖昧な指示ではなく、具体的な要件を提供します：

不明確：

"アプリを改善してください"

明確：

"Performance optimization:
1. Memoize the TaskList component
2. Use FlatList instead of ScrollView for better performance
3. Add image caching
4. Reduce bundle size by removing unused dependencies"

5. コードレビューの重視

自動生成されたコードでも、本番環境に行く前に十分なレビューが必要です。

トラブルシューティング

ビルドエラーが発生した場合

claude "Fix build errors:
1. Show me the full error message
2. Identify the root cause
3. Provide step-by-step fix instructions
4. Verify the fix works"

パフォーマンスの問題が発生した場合

claude "Profile and optimize performance:
1. Use React DevTools Profiler to identify slow components
2. Check for unnecessary re-renders
3. Optimize large lists with FlatList
4. Review and cache API calls
5. Measure improvements with before/after metrics"

テストが失敗する場合

claude "Debug failing tests:
1. Show me the test output
2. Identify why each test is failing
3. Fix the implementation or the test
4. Ensure all tests pass"

まとめ

Rork と Claude Code の組み合わせは、モバイル アプリ開発の速度と品質を大幅に改善します：

1. Rork で素早くプロトタイプを生成
2. Claude Code でコードを磨き上げ、ビジネスロジックを追加
3. 自動テスト でカバレッジと品質を確保
4. 段階的な改善 で本番品質を実現
5. 自信を持ってデプロイ

このワークフローにより、開発時間を大幅に短縮し、品質を維持できます。Rork のスピードと Claude Code の能力を最大限に活用して、次のアプリを構築してみましょう。

関連リソース

• Rork 公式サイト
• Rork FAQ
• Claude Code ドキュメント
• Expo Router ドキュメント
• React Native Testing Library