シニアモバイルデベロッパー

iOS、Android、React Native、Flutter にわたるエキスパートレベルのモバイルアプリケーション開発。

キーワード

mobile, ios, android, react-native, flutter, swift, kotlin, swiftui, jetpack-compose, expo-router, zustand, app-store, performance, offline-first

---

クイックスタート

# React Native プロジェクトをスカフォード
python scripts/mobile_scaffold.py --platform react-native --name MyApp

# 本番環境向けにビルド
python scripts/build.py --platform ios --env production

# App Store メタデータを生成
python scripts/store_metadata.py --screenshots ./screenshots

# レンダリング性能をプロファイリング
python scripts/profile.py --platform android --output report.html

---

ツール

スクリプト	目的
scripts/mobile_scaffold.py	react-native、ios、android、flutter 用のプロジェクトをスカフォード
scripts/build.py	環境およびプラットフォームフラグを備えたビルド自動化
scripts/store_metadata.py	App Store / Play Store リスティングメタデータを生成
scripts/profile.py	レンダリング、メモリ、起動性能をプロファイリング

---

プラットフォーム選定マトリックス

項目	ネイティブiOS	ネイティブAndroid	React Native	Flutter
言語	Swift	Kotlin	TypeScript	Dart
UI フレームワーク	SwiftUI/UIKit	Compose/XML	React	Widgets
性能	最高	最高	良好	非常に良好
コード共有率	なし	なし	約80%	約95%
最適な用途	iOS のみ、ハードウェア負荷が高い	Android のみ、ハードウェア負荷が高い	Web チーム、共有ロジック	最大のコード共有

---

ワークフロー1: React Native アプリをスカフォード（Expo Router）

1. プロジェクトを生成 -- python scripts/mobile_scaffold.py --platform react-native --name MyApp
2. ディレクトリ構造が以下のレイアウトと一致することを確認:

   src/
   ├── app/              # Expo Router ファイルベースルート
   │   ├── (tabs)/       # タブナビゲーショングループ
   │   ├── auth/         # 認証画面
   │   └── _layout.tsx   # ルートレイアウト
   ├── components/
   │   ├── ui/           # 再利用可能なプリミティブ（Button、Input、Card）
   │   └── features/     # ドメインコンポーネント（ProductCard、UserAvatar）
   ├── hooks/            # カスタムフック（useAuth、useApi）
   ├── services/         # API クライアントとストレージ
   ├── stores/           # Zustand ステートストア
   └── utils/            # ヘルパー関数
   

3. ナビゲーションを設定 -- app/_layout.tsx で Stack と Tabs を構成。
4. ステート管理をセットアップ -- Zustand + AsyncStorage 永続化を使用。
5. 検証 -- iOS シミュレータと Android エミュレータの両方でアプリを実行。ナビゲーションとステート永続化が機能することを確認。

ワークフロー2: SwiftUI フィーチャーを構築（iOS）

1. View を作成 -- NavigationStack、ViewModel バインディング用の @StateObject、非同期データ読み込み用の .task を使用。
2. ViewModel を作成 -- @MainActor class として、@Published プロパティを持つ。テスト性のためプロトコル経由でサービスを注入。
3. データフローを接続: View が ViewModel を観察 -> ViewModel がサービスを呼び出し -> サービスがデータを返す -> ViewModel が @Published を更新 -> View が再レンダリング。
4. 検索/リフレッシュを追加 -- フィルタリング用に .searchable(text:)、プルトゥリフレッシュ用に .refreshable。
5. 検証 -- まず Xcode プレビューで実行、その後シミュレータで実行。非同期読み込み、エラー状態、空状態がすべて正しくレンダリングされることを確認。

例: SwiftUI ViewModel パターン

@MainActor
class ProductListViewModel: ObservableObject {
    @Published private(set) var products: [Product] = []
    @Published private(set) var isLoading = false
    @Published private(set) var error: Error?

    private let service: ProductServiceProtocol

    init(service: ProductServiceProtocol = ProductService()) {
        self.service = service
    }

    func loadProducts() async {
        isLoading = true
        error = nil
        do {
            products = try await service.fetchProducts()
        } catch {
            self.error = error
        }
        isLoading = false
    }
}

ワークフロー3: Jetpack Compose フィーチャーを構築（Android）

1. Composable 画面を作成 -- Scaffold、TopAppBar、collectAsStateWithLifecycle() によるステート収集を使用。
2. UI ステートを処理 -- sealed interface で処理: Loading、Success<T>、Error。
3. ViewModel を作成 -- @HiltViewModel、MutableStateFlow、リポジトリ注入を使用。
4. リスト UI を構築 -- LazyColumn を使用、安定した識別用に key パラメータ、スペーシング用に Arrangement.spacedBy()。
5. 検証 -- エミュレータで実行。ステート遷移（loading -> success、loading -> error -> retry）が正しく機能することを確認。

例: Compose UiState パターン

sealed interface UiState<out T> {
    data object Loading : UiState<Nothing>
    data class Success<T>(val data: T) : UiState<T>
    data class Error(val message: String) : UiState<Nothing>
}

@HiltViewModel
class ProductListViewModel @Inject constructor(
    private val repository: ProductRepository
) : ViewModel() {
    private val _uiState = MutableStateFlow<UiState<List<Product>>>(UiState.Loading)
    val uiState: StateFlow<UiState<List<Product>>> = _uiState.asStateFlow()

    fun loadProducts() {
        viewModelScope.launch {
            _uiState.value = UiState.Loading
            repository.getProducts()
                .catch { e -> _uiState.value = UiState.Error(e.message ?: "Unknown error") }
                .collect { products -> _uiState.value = UiState.Success(products) }
        }
    }
}

ワークフロー4: モバイル性能を最適化

1. プロファイリング -- python scripts/profile.py --platform <ios|android> --output report.html
2. React Native の最適化を適用:
   • FlatList に keyExtractor、initialNumToRender=10、windowSize=5、removeClippedSubviews=true を使用
   • React.memo でコンポーネント、useCallback でハンドラをメモ化
   • 固定高さの行に getItemLayout を提供して測定をスキップ
3. ネイティブ iOS の最適化を適用:
   • コレクションビューでの画像プリロード用に prefetchItemsAt を実装
4. ネイティブ Android の最適化を適用:
   • RecyclerView で setHasFixedSize(true) と setItemViewCacheSize(20) を設定
5. 検証 -- プロファイラを再実行、フレーム低下が削減され起動時間が改善されたことを確認。

ワークフロー5: App Store / Play Store に提出

1. メタデータを生成 -- python scripts/store_metadata.py --screenshots ./screenshots
2. リリースをビルド -- python scripts/build.py --platform ios --env production
3. 生成されたリスティングをレビュー -- タイトル、説明、キーワード、スクリーンショット。
4. アップロード -- Xcode（iOS）または Play Console（Android）経由。
5. 検証 -- レビューステータスを監視、拒否フィードバックに対応。

---

リファレンスマテリアル

ドキュメント	パス
React Native ガイド	references/react_native_guide.md
iOS パターン	references/ios_patterns.md
Android パターン	references/android_patterns.md
App Store ガイド	references/app_store_guide.md
完全なコード例	REFERENCE.md

---

トラブルシューティング

問題	原因	解決策
新しい依存関係を追加後にアプリがロード時にクラッシュ	互換性のないネイティブモジュールバージョンまたは pod install / gradle sync の漏れ	npx pod-install（iOS）または cd android && ./gradlew clean（Android）を実行。依存関係バージョンの互換性をチェンジログで確認。
FlatList が空白またはちらつきを表示	keyExtractor がない、キーが不安定、またはインラインの renderItem で完全な再レンダリングが発生	安定した keyExtractor を追加、renderItem を useCallback でラップ、固定高さの行に getItemLayout を提供。
iOS ビルドが「署名」エラーで失敗	プロビジョニングプロファイルの不一致または期限切れの証明書	Xcode > Signing & Capabilities を開き、正しいチームとプロファイルを選択。security find-identity -v -p codesigning を実行して証明書を確認。
Android ビルド中の dex 作成時に OOM 発生	大規模プロジェクトの JVM ヒープ不足	gradle.properties に org.gradle.jvmargs=-Xmx4096m を追加。build.gradle で dexOptions { javaMaxHeapSize "4g" } を有効化。
プライバシーマニフェスト漏れで App Store から拒否	Apple が必要理由 API（UserDefaults、ファイルタイムスタンプなど）を使用するアプリに対して PrivacyInfo.xcprivacy を要求	PrivacyInfo.xcprivacy ファイルを追加して各必要理由 API を宣言。store_metadata_generator.py を実行してプライバシーラベルガイダンスを確認。
起動時間が遅い（3秒以上）	起動時にメインスレッドで同期操作が多すぎる、バンドルサイズが大きい、または画像が最適化されていない	非要件の初期化を遅延、モジュールを遅延読み込み、画像を圧縮、app_performance_analyzer.py でボトルネックを特定。
ホットリロード / Fast Refresh が機能しなくなった	モジュール境界内の構文エラー、無名デフォルトエクスポート、またはクラスコンポーネントステート	ターミナルでエラーメッセージを確認、名前付きエクスポートを確認、Metro バンドラーまたは Flutter デーモンをキャッシュクリアして再起動。

---

成功基準

• アプリ起動時間が 2 秒以下 でのコールドスタート（中程度のデバイスで測定、iOS と Android 両方）。
• すべてのサポート対象 OS バージョンで 99.5% 以上のクラッシュフリー率 -- Crashlytics または Sentry で追跡。
• スクロールリストとアニメーションで 60 fps でのフレームレンダリング（フレームあたり 16ms）、典型的なユーザーフロー中のジャンクフレームゼロ。
• 初期ダウンロードで 50 MB 以下のバンドルサイズ（オンデマンドリソース除外）、各リリース前に検証。
• app_performance_analyzer.py 実行時に 75 以上のパフォーマンス解析スコア（Grade B 以上）。
• ストアに提出前にパフォーマンス解析で重大問題ゼロ、警告が 5 件未満。
• App Store / Play Store が初回提出で承認 -- 完全なメタデータ、正しいプライバシーラベル、適切な年齢レーティング、store_metadata_generator.py で検証。

---

スコープと制限事項

このスキルでカバーする範囲:

• React Native（Expo Router）、Flutter、iOS ネイティブ（SwiftUI）、Android ネイティブ（Jetpack Compose）向けの本番対応モバイルプロジェクトのスカフォーディング。
• 画像アセットサイジング、再レンダリング検出、メモリリークパターン、バンドルサイズ推定を含む静的パフォーマンス解析。
• タイトル、キーワード、プライバシーラベル、年齢レーティング、提出チェックリストを含む App Store および Play Store メタデータ生成。
• プラットフォーム固有のアーキテクチャパターン（MVVM、ステート管理、ナビゲーション）。

このスキルでカバーしない範囲:

• バックエンド API 開発またはサーバー側ロジック（senior-backend および senior-fullstack スキルを参照）。
• モバイルビルドの CI/CD パイプライン構成と自動配布（senior-devops および release-orchestrator スキルを参照）。
• UI/UX デザインシステム、アクセシビリティ監査、デザイントークン管理（senior-frontend および design-auditor スキルを参照）。
• ネイティブツールでのランタイムプロファイリング（Xcode Instruments、Android Studio Profiler） -- アナライザーは静的コード解析のみを実行、ライブデバイスプロファイリングは非対応。

---

統合ポイント

スキル	統合	データフロー
senior-frontend	共有コンポーネントパターン、スタイリング規約、React Native Web ターゲットのレスポンシブデザイン原則	フロントエンドデザイントークンとコンポーネント API がモバイル UI コンポーネントに流れ込む
senior-backend	API コントラクト定義、認証フロー、モバイルクライアントが消費するデータモデル	バックエンド OpenAPI スペックがモバイルサービスレイヤーのインターフェースを定義
senior-devops	ビルドパイプライン、コード署名自動化、モバイルリリースのデプロイメントワークフロー	モバイルビルド成果物が TestFlight / Play Console 配布用 CI/CD パイプラインに流れ込む
senior-qa	テスト戦略の調整、デバイスマトリックスカバレッジ、モバイル画面の E2E テストパターン	QA テスト計画がデバイスカバレッジを駆動；モバイルスカフォードにテストディレクトリ構造を含む
senior-security	セキュアストレージパターン（Keychain/Keystore）、証明書ピンニング、モバイルアプリのデータ暗号化	セキュリティ要件が Keychain ヘルパー実装とネットワーククライアント構成に通知
release-orchestrator	バージョンバンプ、チェンジログ生成、iOS と Android 間の調整リリース	オーケストレータからのリリースメタデータとバージョン情報がストア提出ワークフローに流れ込む

---

ツールリファレンス

mobile_scaffold.py

目的: 適切なディレクトリ構造、ナビゲーションセットアップ、ステート管理、基本構成ファイルを備えた本番対応モバイルプロジェクトをスカフォード。

使用法:

python scripts/mobile_scaffold.py <name> --platform <platform> [options]

パラメータ:

パラメータ	タイプ	必須	デフォルト	説明
name	位置引数	はい	--	プロジェクト名、ディレクトリ名として使用
--platform, -p	選択肢	はい	--	ターゲットプラットフォーム: android-native、flutter、ios-native、react-native
--typescript, -t	フラグ	いいえ	False（react-native で自動有効化）	TypeScript を使用（React Native のみ）
--state, -s	文字列	いいえ	none	ステート管理ライブラリ。React Native: zustand、redux、jotai、none。Flutter: riverpod、bloc、provider、none。ネイティブプラットフォームには適用不可。
--output-dir, -o	パス	いいえ	.（現在のディレクトリ）	生成されたプロジェクトの親ディレクトリ
--json	フラグ	いいえ	False	人間が読める概要ではなく JSON として結果を出力

例:

# Zustand ステート管理を備えた React Native アプリをスカフォード
python scripts/mobile_scaffold.py MyApp --platform react-native --state zustand

# Riverpod を備えた Flutter アプリをスカフォード、JSON として出力
python scripts/mobile_scaffold.py my-flutter-app --platform flutter --state riverpod --json

# 特定のディレクトリに iOS ネイティブアプリをスカフォード
python scripts/mobile_scaffold.py HealthTracker --platform ios-native --output-dir ~/Projects

出力形式:

• 人間が読める形式（デフォルト）: プロジェクト名、プラットフォーム、ステート管理の選択、作成されたディレクトリパス、生成されたすべてのファイルのリストを出力。
• JSON（--json）: project_name、platform、typescript、state_management、output_directory、files_created、generated_at フィールドを含む JSON オブジェクトを返す。

---

store_metadata_generator.py

目的: App Store（iOS）および Google Play Store（Android）提出用の構造化メタデータを生成 -- タイトルバリエーション、キーワード、カテゴリ推奨事項、プライバシーラベル、年齢レーティングガイダンス、提出チェックリストを含む。

使用法:

python scripts/store_metadata_generator.py --app-name <name> --category <category> --features <features> [options]

パラメータ:

パラメータ	タイプ	必須	デフォルト	説明
--app-name	文字列	はい	--	ストアリスティング用のアプリ名
--category	選択肢	はい	--	プライマリアプリカテゴリ。選択肢: business、education、entertainment、finance、food、games、health、lifestyle、music、navigation、news、photo、productivity、shopping、social、sports、travel、utilities、weather
--features	文字列	はい	--	カンマ区切りのフィーチャーリスト（例: "offline,sync,biometric"）。認識されたフィーチャーはキーワードに展開され、プライバシー/年齢レーティングガイダンスをトリガー。
--description	文字列	いいえ	""	生成されたストアコピーで使用される短いアプリ説明
--json	フラグ	いいえ	False	結果を JSON として出力

例:

# ヘルスケアアプリ用メタデータを生成
python scripts/store_metadata_generator.py --app-name "FitTrack" --category health --features "workout,tracking,social" --description "Track your workouts"

# CI 統合用 JSON 出力
python scripts/store_metadata_generator.py --app-name "BudgetPal" --category finance --features "payment,offline,biometric,push" --json

出力形式:

• 人間が読める形式（デフォルト）: Title Variants、Keywords（iOS 100 文字フィールド付き）、Store Categories、Privacy Labels / Data Safety、Age Rating Guidance、Submission Checklist セクションを含む形式化されたレポート。
• JSON（--json）: titles、keywords、categories、descriptions、privacy_labels、age_rating、screenshot_specs、submission_checklist を含む完全なメタデータオブジェクト。

---

app_performance_analyzer.py

目的: モバイルプロジェクトディレクトリを解析して一般的なパフォーマンス問題を検出 -- 過度なサイズの画像アセット、再レンダリングパターン、メモリリークパターン、バンドルサイズ推定、プラットフォーム固有のアンチパターンを含む。

使用法:

python scripts/app_performance_analyzer.py <project_dir> [options]

パラメータ:

パラメータ	タイプ	必須	デフォルト	説明
project_dir	位置引数	はい	--	解析対象のモバイルプロジェクトディレクトリパス
--platform, -p	選択肢	いいえ	自動検出	ターゲットプラットフォーム: react-native、flutter、ios-native、android-native。省略時はプロジェクトファイルから自動検出。
--json	フラグ	いいえ	False	結果を JSON として出力

例:

# 自動検出されたプラットフォームで解析
python scripts/app_performance_analyzer.py ./my-app

# React Native プロジェクトを明示的に解析
python scripts/app_performance_analyzer.py ./my-app --platform react-native

# CI パイプライン統合用 JSON 出力
python scripts/app_performance_analyzer.py ./my-app --platform flutter --json

出力形式:

• 人間が読める形式（デフォルト）: パフォーマンススコア（0-100 と文字グレード）、問題概要（critical/warning/info カウント）、バンドルサイズ推定、カテゴリ別グループ化された詳細問題、プラットフォーム固有推奨事項。
• JSON（--json）: performance_score、summary、bundle_estimate（ソースコードサイズ、アセットサイズ、ファイルカウント）、issues_by_category を含む完全なレポートオブジェクト、および issue ごとに category、severity、file、line、message を含むフラット issues 配列。