Community Expo React Native Best Practices

Expo React Native アプリケーションのための包括的なパフォーマンス最適化ガイド。9つのカテゴリにわたる54個のルールを含み、自動リファクタリングとコード生成を導くため影響度で優先順位付けされています。

適用するタイミング

以下の場合にこのガイドラインを参照してください:

• 新しい Expo React Native コンポーネントを書く場合
• アプリ起動時間と Time to Interactive を最適化する場合
• リスト、画像、またはアニメーションを実装する場合
• バンドルサイズとメモリ使用量を削減する場合
• モバイルパフォーマンスの問題についてコードをレビューする場合

ルールカテゴリの優先度順

優先度	カテゴリ	影響度	プレフィックス
1	起動時間最適化	CRITICAL	launch-
2	バンドルサイズ最適化	CRITICAL	bundle-
3	リスト仮想化	HIGH	list-
4	画像最適化	HIGH	image-
5	データ取得パターン	HIGH	data-
6	ナビゲーションパフォーマンス	MEDIUM-HIGH	nav-
7	再レンダリング防止	MEDIUM	rerender-
8	アニメーションパフォーマンス	MEDIUM	anim-
9	メモリ管理	LOW-MEDIUM	mem-

クイックリファレンス

1. 起動時間最適化 (CRITICAL)

• launch-splash-screen-control - アセット読み込み中のスプラッシュスクリーン表示を制御
• launch-preload-critical-assets - スプラッシュ中にフォントと画像をプリロード
• launch-hermes-engine - Hermes エンジンを使用して起動を高速化
• launch-defer-non-critical - 非重要な初期化を遅延
• launch-new-architecture - New Architecture を有効化して同期ネイティブ通信
• launch-minimize-root-imports - ルート App コンポーネントのインポートを最小化

2. バンドルサイズ最適化 (CRITICAL)

• bundle-avoid-barrel-files - バレルファイルのインポートを避ける
• bundle-analyze-size - リリース前にバンドルサイズを分析
• bundle-remove-unused-dependencies - 未使用の依存関係を削除
• bundle-split-by-architecture - アーキテクチャ固有の APK を生成
• bundle-enable-proguard - Android リリースビルドで ProGuard を有効化
• bundle-optimize-fonts - カスタムフォントを使用文字にサブセット化
• bundle-use-lightweight-alternatives - 軽量なライブラリ代替案を使用

3. リスト仮想化 (HIGH)

• list-use-flashlist - FlatList の代わりに FlashList を使用
• list-provide-estimated-size - 正確な estimatedItemSize を提供
• list-avoid-inline-functions - renderItem でインライン関数を避ける
• list-provide-getitemlayout - 固定高さアイテムに対して getItemLayout を提供
• list-avoid-key-prop - FlashList アイテム内での key prop を避ける
• list-batch-rendering - リストバッチレンダリングを設定
• list-memoize-item-components - リストアイテムコンポーネントをメモ化

4. 画像最適化 (HIGH)

• image-use-expo-image - React Native Image の代わりに expo-image を使用
• image-resize-to-display-size - 画像を表示サイズにリサイズ
• image-use-webp-format - より小さいファイルサイズのために WebP 形式を使用
• image-use-placeholders - BlurHash または ThumbHash プレースホルダを使用
• image-preload-critical - 重要なビューポート上部の画像をプリロード
• image-lazy-load-offscreen - オフスクリーン画像を遅延読み込み

5. データ取得パターン (HIGH)

• data-parallel-fetching - 独立したデータを並列でフェッチ
• data-request-deduplication - 同時リクエストを重複排除
• data-abort-requests - コンポーネント アンマウント時にリクエストを中止
• data-pagination - 効率的なページネーション戦略を実装
• data-cache-strategies - 適切なキャッシング戦略を使用
• data-optimistic-updates - 応答性のために楽観的更新を適用

6. ナビゲーションパフォーマンス (MEDIUM-HIGH)

• nav-use-native-stack - ネイティブスタックナビゲータを使用
• nav-unmount-inactive-screens - 非アクティブなタブスクリーンをアンマウント
• nav-prefetch-screen-data - ナビゲーション前にデータをプリフェッチ
• nav-optimize-screen-options - スクリーンオプションを最適化
• nav-avoid-deep-nesting - 深くネストされたナビゲータを避ける

7. 再レンダリング防止 (MEDIUM)

• rerender-use-memo-components - React.memo で高コストなコンポーネントをメモ化
• rerender-use-callback - useCallback でコールバックを安定化
• rerender-use-memo-values - useMemo で高コストな計算をメモ化
• rerender-avoid-context-overuse - 頻繁な更新での Context 乱用を避ける
• rerender-split-component-state - コンポーネントを分割して更新状態を隔離
• rerender-use-react-compiler - 自動メモ化のために React Compiler を有効化
• rerender-avoid-anonymous-components - JSX での匿名コンポーネントを避ける

8. アニメーションパフォーマンス (MEDIUM)

• anim-use-reanimated - UI スレッドアニメーション用に Reanimated を使用
• anim-use-native-driver - Animated API で useNativeDriver を有効化
• anim-avoid-layout-animation - レイアウトアニメーションよりも transform を優先
• anim-gesture-handler-integration - Gesture Handler と Reanimated を統合して使用
• anim-interaction-manager - アニメーション中の重い処理を遅延

9. メモリ管理 (LOW-MEDIUM)

• mem-cleanup-useeffect - サブスクリプションとタイマーをクリーンアップ
• mem-abort-fetch-requests - アンマウント時にフェッチリクエストを中止
• mem-avoid-closure-leaks - クロージャベースのメモリリークを避ける
• mem-release-heavy-resources - 不要な重いリソースを解放
• mem-profile-with-tools - 開発ツールでメモリ使用量をプロファイル

使い方

詳細な説明とコード例については、個別のリファレンスファイルを読んでください:

• Section definitions - カテゴリ構造と影響レベル
• Rule template - 新しいルールを追加するためのテンプレート
• ルール例: launch-splash-screen-control, list-use-flashlist

フルコンパイルドキュメント

すべてのルールを展開した完全なガイド: AGENTS.md