cross-platform

クロスプラットフォーム

目的

このスキルでは、React Native with Expo、Dart を使用する Flutter（Bloc または Riverpod を使用）、Capacitor、Kotlin Multiplatform Mobile（KMM）などのクロスプラットフォームモバイルフレームワークの選定と実装方法を説明します。プロジェクトのニーズに基づいて適切なフレームワークを選ぶことに重点を置き、効率的なモバイルアプリ開発のための段階的な統合方法を紹介します。

使用するタイミング

コードの重複を減らすため、複数のプラットフォーム（iOS／Android）へのデプロイが必要なプロジェクトでこのスキルを使用します。E コマースアプリ、ソーシャルネットワーク、生産性ツールなど、ビジネスロジックを共有するアプリの構築に適用してください。リソースが限られたチームや、ネイティブモジュールの統合、プラットフォーム間の状態管理など、迅速なプロトタイピングが必要な場合に最適です。

主な機能

• フレームワークの選定：JavaScript を多く使用するアプリには React Native、Dart でカスタム UI を構築する場合は Flutter、Web アプリをモバイルアプリに変換する場合は Capacitor、Kotlin コードベースを共有する場合は KMM を選択します。
• Expo の統合：EAS（Expo Application Services）を使用して、OTA アップデートやクラウドサービスを含むビルドを効率化します。
• 状態管理：Flutter でイベント駆動型の状態管理を実装するには Bloc を、Flutter／Dart アプリでリアクティブな状態管理を実装するには Riverpod を使用します。
• クロスプラットフォーム機能：Capacitor のブリッジや KMM の expect/actual 宣言を使って、デバイス API（カメラ、GPS など）へのアクセスといったプラットフォーム固有のコードを処理します。
• 設定：ルーティングや権限設定に使用する Expo の app.json など、JSON／YAML 形式のアプリ設定を管理します。

使用パターン

フレームワークを選ぶには、技術スタックに基づいて評価します。チームが JS に慣れている場合は React Native、高性能な UI が必要な場合は Flutter を使用します。まず、プロジェクトを初期化します。

• Expo を使用した React Native の場合：expo init MyApp --template blank を実行してから、npm install @react-navigation/native で依存関係を追加します。
• Riverpod を使用した Flutter の場合：flutter create MyApp でプロジェクトを作成し、Dart ファイルで final counterProvider = StateProvider((ref) => 0); を設定して状態管理を準備します。 プラットフォーム固有のコードは必ずラップしてください。KMM では、共通コードに expect fun platformFunction() {} を記述し、iOS／Android モジュールで実装します。 Capacitor の場合は、Web プロジェクトをセットアップした後に npx cap add android を実行して変換します。

一般的なコマンド／API

• Expo（React Native）：expo login（$EXPO_API_KEY 環境変数が必要）を使用し、複数プラットフォーム向けのビルドには eas build --platform all を使用します。プロジェクト管理には API エンドポイント POST https://api.expo.dev/v2/projects を使用します。
• Flutter：Bloc には flutter pub add flutter_bloc を実行します。特定のエミュレーターを対象にするには flutter run --device-id emulator-5554 を実行します。状態を変更するには、BlocProvider.of(context).add(Event()) などの API を使用します。
• Capacitor：ネイティブプロジェクトを更新するには npx cap sync を、Android Studio を起動するには npx cap open android を実行します。JavaScript では、Capacitor.Plugins.Camera.getPhoto() など、Capacitor の Plugins API を使用します。
• KMM：共有モジュールで ./gradlew build を実行してビルドします。iOS では KMM Bridge を使用します。Swift では import shared.Platform().hello() を使用します。 設定形式：Expo の app.json は { "expo": { "name": "MyApp", "slug": "myapp", "platforms": ["ios", "android"] } } のように編集します。Flutter の場合は、pubspec.yaml の dependencies: flutter_riverpod: ^2.0.0 を変更します。

統合に関する注意事項

認証などのバックエンドとの統合では、API 呼び出し用に環境変数を設定します（例：API 呼び出し用に export $BACKEND_API_KEY）。React Native では、Expo の Fetch API を使用します。fetch('https://api.example.com/data', { headers: { Authorization: Bearer ${process.env.BACKEND_API_KEY} } })。Flutter では、HTTP パッケージを追加します。http.get(Uri.parse('https://api.example.com/data'), headers: {'Authorization': 'Bearer $envVar'}).then((response) => ...);。Capacitor では、Web リクエストをブリッジします。@capacitor/core をインストールし、CapacitorHttp.get({url: 'https://api.example.com/data', headers: {Authorization: $BACKEND_API_KEY}}); を使用します。KMM との統合では、共通モジュールを介してネットワークコードを共有し、ネイティブアプリから呼び出します。依存関係を反映するため、Gradle の同期を忘れずに行ってください。

エラー処理

プラットフォームの不一致を確認して、よくあるエラーに対処します。React Native では、expo build が "Invalid platform" で失敗する場合、app.json の platforms 配列を確認してください。Flutter では、flutter run が "No devices" でエラーになる場合、flutter emulators --launch Pixel_API_33 を実行してから再試行してください。Capacitor の "Plugin not found" などのエラーには、npx cap sync を実行し、package.json を確認してください。KMM では、キャッシュの破損によるビルド失敗を ./gradlew clean で解決します。エラーは必ずログに記録してください。Expo では console.error(e) を使い、EAS のビルドログを確認します。Flutter では try-catch で囲みます。try { await http.get(...); } catch (e) { print(e.toString()); }。キーの漏えいを防ぐため、環境変数を使用してください。

グラフの関係

• 接続先：モバイルクラスター
• 関連項目：react-native スキル、flutter スキル、expo スキル、capacitor スキル
• 依存先：埋め込み用のクロスプラットフォームタグ
• 連携先：モバイルエコシステムの kmm フレームワーク