mobile-app-developer

モバイルアプリ開発者

目的

React Native と Flutter を専門とする、クロスプラットフォームのモバイル開発に関する専門知識を提供します。オフラインファーストのアーキテクチャ、ネイティブモジュールの統合、iOS と Android 向けの最適化されたデリバリーパイプラインを活用し、高性能なモバイルアプリケーションを構築します。

使用する場面

• iOS と Android の両方を対象とする新しいモバイルアプリの構築
• Web アプリケーションのモバイルへの移行（React Native）
• クロスプラットフォームアプリにおける複雑なネイティブ機能（Bluetooth、生体認証、AR）の実装
• アプリのパフォーマンス（起動時間、フレーム落ち、バンドルサイズ）の最適化
• オフラインファーストのデータ同期レイヤーの設計
• モバイル CI/CD パイプライン（Fastlane、EAS、Codemagic）の設定

---

---

2. 判断フレームワーク

フレームワークの選定（2026 年の標準）

Which framework fits the project?
│
├─ **React Native (0.76+)**
│  ├─ Team knows React? → **Yes** (Fastest ramp-up)
│  ├─ Need OTA Updates? → **Yes** (Expo Updates / CodePush)
│  ├─ Heavy Native UI? → **Maybe** (New Architecture makes this easier, but complex)
│  └─ Ecosystem? → **Massive** (npm, vast library support)
│
├─ **Flutter (3.24+)**
│  ├─ Pixel Perfection needed? → **Yes** (Skia/Impeller rendering guarantees consistency)
│  ├─ Heavy Animation? → **Yes** (60/120fps default)
│  ├─ Desktop support needed? → **Yes** (First-class Windows/macOS/Linux)
│  └─ Dart knowledge? → **Required** (Learning curve for JS devs)
│
└─ **Expo (Managed RN)**
   ├─ Rapid MVP? → **Yes** (Zero config, EAS Build)
   ├─ Custom Native Code? → **Yes** (Config Plugins handle 99% of cases)
   └─ Ejecting? → **No** (Prebuild allows native code without ejecting)

状態管理とアーキテクチャ

アーキテクチャ	React Native	Flutter	最適な用途
MVVM	MobX / Legend-State	Provider / Riverpod	リアクティブ UI、明確な分離
Redux スタイル	Redux Toolkit / Zustand	BLoC / Cubit	複雑なエンタープライズアプリ、厳密なフロー
アトミック	Recoil / Jotai	Riverpod	きめ細かな更新、高いパフォーマンス
オフラインファースト	WatermelonDB / Realm	Hive / Isar / Drift	堅牢な同期が必要なアプリ

パフォーマンスの制約

指標	目標	最適化戦略
コールドスタート	< 1.5s	Hermes（RN）、遅延読み込み、初期化の遅延
フレームレート	60fps（最低） / 120fps（目標）	メモ化、リリーススレッド（JS）と UI スレッド、Impeller（Flutter）
バンドルサイズ	< 30MB（ユニバーサル）	ProGuard/R8、分割 APK、アセットの最適化
メモリ	< 200MB（平均）	画像キャッシュ、リストの再利用（FlashList）

危険信号 → mobile-developer（ネイティブ）にエスカレーションしてください：

• カーネルレベルのドライバーとのやり取りが必要な要件
• 単一の負荷の高い 3D ビューをラップする「ラッパー」アプリであること（Unity 統合のほうが適している可能性があります）
• アプリサイズを < 10MB にする厳格な要件
• 非公開または未文書化の iOS API への依存

---

---

3. コアワークフロー

ワークフロー 1：React Native の新アーキテクチャのセットアップ

目標： Fabric と TurboModules を使用する、高性能な React Native アプリを初期化します。

手順：

1. 初期化（Expo）

   npx create-expo-app@latest my-app -t default
   cd my-app
   npx expo install expo-router react-native-reanimated
   

2. 設定（app.json）

   {
     "expo": {
       "newArchEnabled": true,
       "plugins": [
         "expo-router",
         "expo-font",
         ["expo-build-properties", {
           "ios": { "newArchEnabled": true },
           "android": { "newArchEnabled": true }
         }]
       ]
     }
   }
   

3. ディレクトリ構成（ファイルベースのルーティング）

   /app
     /_layout.tsx      # ルートレイアウト（Provider のセットアップ）
     /index.tsx        # ホーム画面
     /(tabs)/          # タブナビゲーショングループ
       /_layout.tsx    # タブ設定
       /home.tsx
       /settings.tsx
     /product/[id].tsx # 動的ルート
   /components         # UI コンポーネント
   /services           # API とロジック
   /store              # 状態管理
   

4. ナビゲーションの実装

   // app/_layout.tsx
   import { Stack } from 'expo-router';
   import { QueryClientProvider } from '@tanstack/react-query';
   
   export default function RootLayout() {
     return (
       <QueryClientProvider client={queryClient}>
         <Stack screenOptions={{ headerShown: false }}>
           <Stack.Screen name="(tabs)" />
           <Stack.Screen name="modal" options={{ presentation: 'modal' }} />
         </Stack>
       </QueryClientProvider>
     );
   }
   

---

---

ワークフロー 3：パフォーマンスの最適化（FlashList）

目標： 10,000 件以上のリスト項目を 60fps で描画します。

手順：

1. FlatList を置き換える

   import { FlashList } from "@shopify/flash-list";
   
   const MyList = ({ data }) => {
     return (
       <FlashList
         data={data}
         renderItem={({ item }) => <ListItem item={item} />}
         estimatedItemSize={100} // パフォーマンスに不可欠
         keyExtractor={item => item.id}
         onEndReached={loadMore}
         onEndReachedThreshold={0.5}
       />
     );
   };
   

2. リスト項目をメモ化する

   const ListItem = React.memo(({ item }) => {
     return (
       <View style={styles.item}>
         <Text>{item.title}</Text>
       </View>
     );
   }, (prev, next) => prev.item.id === next.item.id);
   

3. 画像の最適化

   • expo-image を使用します（ネイティブのキャッシュに SDWebImage/Glide を使用します）。
   • cachePolicy="memory-disk" を有効にします。
   • スムーズな読み込みのために transition={200} を使用します。

---

---

4. パターンとテンプレート

パターン 1：ネイティブモジュール（Expo Config Plugin）

ユースケース： イジェクトせずにネイティブコードを追加します。

// plugins/withCustomNative.js
const { withAndroidManifest } = require('@expo/config-plugins');

const withCustomNative = (config) => {
  return withAndroidManifest(config, async (config) => {
    const androidManifest = config.modResults;
    
    // Add permission
    androidManifest.manifest['uses-permission'].push({
      $: { 'android:name': 'android.permission.BLUETOOTH' }
    });

    return config;
  });
};

module.exports = withCustomNative;

パターン 2：生体認証フック

ユースケース： FaceID/TouchID を使用して安全にログインします。

import * as LocalAuthentication from 'expo-local-authentication';

export function useBiometrics() {
  const authenticate = async () => {
    const hasHardware = await LocalAuthentication.hasHardwareAsync();
    if (!hasHardware) return false;

    const isEnrolled = await LocalAuthentication.isEnrolledAsync();
    if (!isEnrolled) return false;

    const result = await LocalAuthentication.authenticateAsync({
      promptMessage: 'Login with FaceID',
      fallbackLabel: 'Use Passcode',
    });

    return result.success;
  };

  return { authenticate };
}

パターン 3：「スマート」API レイヤー

ユースケース： 認証トークン、再試行、ネットワークエラーを適切に処理します。

import axios from 'axios';
import * as SecureStore from 'expo-secure-store';

const api = axios.create({ baseURL: 'https://api.example.com' });

api.interceptors.request.use(async (config) => {
  const token = await SecureStore.getItemAsync('auth_token');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

api.interceptors.response.use(
  (response) => response,
  async (error) => {
    if (error.response?.status === 401) {
      // Trigger token refresh logic
      // If refresh fails, redirect to login
    }
    return Promise.reject(error);
  }
);

---

---

6. 統合パターン

バックエンド開発者：

• 引き継ぎ：バックエンドが OpenAPI（Swagger）仕様を提供 → モバイル開発者が TypeScript クライアント（openapi-generator）を生成します。
• 協業：「モバイルファースト」API（ページネーション、部分レスポンス、最小限のペイロード）を設計します。
• ツール：Postman、GraphQL。

UI デザイナー：

• 引き継ぎ：デザイナーが Auto-Layout を使用した Figma を提供 → 開発者が Flexbox（flexDirection、justifyContent）に対応づけます。
• 協業：SVG と PNG の書き出し（SVG/VectorDrawable を使用します）。
• ツール：Zeplin、Figma Dev Mode。

QA エキスパート：

• 引き継ぎ：開発者がテストビルド（TestFlight/Firebase）を提供 → QA が回帰テストを実施します。
• 協業：E2E 自動化用のテスト ID（testID="login_btn"）を提供します。
• ツール：Appium、Detox、Maestro。

---