React Native & Expo 開発ガイド

本番環境対応の React Native および Expo アプリケーション構築のための実用的なガイド。UI、アニメーション、状態、テスト、パフォーマンス、デプロイをカバーしています。

リファレンス

必要に応じてこれらのリソースを参照してください:

• references/navigation.md — Expo Router: Stack、Tabs、NativeTabs (headerLargeTitle、headerBackButtonDisplayMode)、リンク、モーダル、シート、コンテキストメニュー
• references/components.md — FlashList パターン、expo-image、セーフエリア (contentInsetAdjustmentBehavior)、ネイティブコントロール、ブラー/グラスエフェクト、ストレージ
• references/styling.md — StyleSheet、NativeWind/Tailwind、プラットフォームスタイル、テーミング、ダークモード
• references/animations.md — Reanimated 3: 入退出、共有値、ジェスチャー、スクロール駆動
• references/state-management.md — Zustand (セレクター、永続化)、Jotai (アトム、派生)、React Query、Context
• references/forms.md — React Hook Form + Zod: バリデーション、マルチステップ、動的配列
• references/networking.md — fetch ラッパー、React Query (楽観的更新)、認証トークン、オフライン、API ルート、Webhook
• references/performance.md — プロファイリングワークフロー、FlashList + memo、バンドル分析、TTI、メモリリーク、アニメーションパフォーマンス
• references/testing.md — Jest、React Native Testing Library、Maestro による E2E
• references/native-capabilities.md — カメラ、位置情報、パーミッション (use*Permissions フック)、ハプティクス、通知、バイオメトリクス
• references/engineering.md — プロジェクトレイアウト (components/ui/、stores/、services/)、パスエイリアス、SDK アップグレード、EAS ビルド/送信、CI/CD、DOM コンポーネント

クイックリファレンス

コンポーネントの推奨事項

用途	使用	避けるべき
リスト	FlashList (@shopify/flash-list) + memo アイテム	FlatList (ビュー再利用なし)
画像	expo-image	RN <Image> (キャッシュなし、WebP 非対応)
プレス	Pressable	TouchableOpacity (レガシー)
オーディオ	expo-audio	expo-av (非推奨)
ビデオ	expo-video	expo-av (非推奨)
アニメーション	Reanimated 3	RN Animated API (限定的)
ジェスチャー	Gesture Handler	PanResponder (レガシー)
プラットフォーム確認	process.env.EXPO_OS	Platform.OS
Context	React.use()	React.useContext() (React 18)
セーフエリアスクロール	contentInsetAdjustmentBehavior="automatic"	<SafeAreaView>
SF Symbols	expo-image with source="sf:name"	expo-symbols

スケーリング

状況	検討対象
長いリストでスクロール時のジャンク	仮想化リストライブラリ (例: FlashList)
Tailwind スタイルのクラスが必要	NativeWind v4
ストレージの読み取り頻度が高い	同期ベースのストレージ (例: MMKV)
Expo での新規プロジェクト	React Navigation ではなく Expo Router を使用

状態管理

状態タイプ	ソリューション
ローカル UI 状態	useState / useReducer
共有アプリ状態	Zustand または Jotai
サーバー / 非同期データ	React Query
フォーム状態	React Hook Form + Zod

パフォーマンス優先度

優先度	問題	修正
重大	長いリストのジャンク	FlashList + メモ化されたアイテム
重大	大きなバンドル	バレルインポートを回避、R8 を有効化
高	再レンダリングが多い	Zustand セレクター、React Compiler
高	起動が遅い	バンドル圧縮を無効化、ネイティブナビゲーション
中	アニメーションがドロップ	transform/opacity のみをアニメート化

新規プロジェクト初期化

# 1. プロジェクトを作成
npx create-expo-app@latest my-app --template blank-typescript
cd my-app

# 2. Expo Router + コア依存関係をインストール
npx expo install expo-router react-native-safe-area-context react-native-screens

# 3. (オプション) よく使う追加パッケージ
npx expo install expo-image react-native-reanimated react-native-gesture-handler

その後、以下を設定します:

1. package.json のエントリーポイントを設定: "main": "expo-router/entry"
2. app.json にスキームを追加: "scheme": "my-app"
3. App.tsx と index.ts を削除
4. ルート Stack レイアウトとして app/_layout.tsx を作成
5. タブナビゲーション用に app/(tabs)/_layout.tsx を作成
6. app/(tabs)/ 内にルートファイルを作成 (navigation.md を参照)

Web サポートの場合、さらに以下もインストール: npx expo install react-native-web react-dom @expo/metro-runtime

コアプリンシパル

参照資料を先に確認する: ナビゲーション、リスト、ネットワーキング、プロジェクトセットアップを実装するときは、上記の対応する参照ファイルを読んでパターンと落とし穴を確認してください。

最初に Expo Go で試す (npx expo start)。カスタムビルド (eas build) が必要なのは、ローカル Expo モジュール、Apple ターゲット、または Expo Go に含まれていない サードパーティネイティブモジュールを使用する場合のみです。

条件付きレンダリング: {count && <Text />} ではなく {count > 0 && <Text />} を使用 ("0" がレンダリングされます)。

アニメーションルール: transform と opacity のみをアニメート化 — GPU コンポジット済み、レイアウトスラッシュなし。

インポート: 常にソースから直接インポート。バレルファイルからのインポートは避ける — バンドルブロートを回避します。

リストと画像: FlatList または RN Image を使用する前に、上記のコンポーネント推奨表を確認してください — FlashList と expo-image がほぼ常に正しい選択肢です。

ルートファイル: 常に kebab-case を使用。app/ 内にコンポーネント/型/ユーティリティを共存させないでください。

チェックリスト

新規プロジェクトセットアップ

• tsconfig.json パスエイリアスが設定されている
• EXPO_PUBLIC_API_URL 環境変数が環境ごとに設定されている
• ルートレイアウトに GestureHandlerRootView がある (ジェスチャーを使用する場合)
• すべてのスクロールビューで contentInsetAdjustmentBehavior="automatic" が設定されている
• 20 項目以上のリストに FlatList ではなく FlashList を使用

配信前

• --profile モードでプロファイリング、フレーム > 16ms を修正
• バンドルを分析 (source-map-explorer)、バレルインポートなし
• Android で R8 を有効化
• 重要なパスのユニット + コンポーネントテスト
• ログイン、コア機能、チェックアウトの E2E フロー

---

Flutter 開発 → flutter-dev スキルを参照してください。 iOS ネイティブ (UIKit/SwiftUI) → ios-application-dev スキルを参照してください。 Android ネイティブ (Kotlin/Compose) → android-native-dev スキルを参照してください。

React Native は Meta Platforms, Inc. の商標です。Expo は 650 Industries, Inc. の商標です。その他すべての製品名はそれぞれの所有者の商標です。