Expo React Native パフォーマンスベストプラクティス

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

適用する場合

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

• 新しい React Native コンポーネントまたはスクリーンを作成する際
• FlatList または FlashList でリストを実装する際
• アニメーションまたはトランジションを追加する際
• 画像とアセット読み込みを最適化する際
• パフォーマンス問題のコードをレビューする際

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

優先度	カテゴリ	影響度	プレフィックス
1	アプリ起動とバンドルサイズ	致命的	startup-
2	リスト仮想化	致命的	list-
3	再レンダリング最適化	高	rerender-
4	アニメーションパフォーマンス	高	anim-
5	画像とアセット読み込み	中〜高	asset-
6	メモリ管理	中	mem-
7	非同期とデータ取得	中	async-
8	プラットフォーム最適化	低〜中	platform-

クイックリファレンス

1. アプリ起動とバンドルサイズ (致命的)

• startup-enable-hermes - Hermes JavaScript エンジンを有効にする
• startup-remove-console-logs - 本番環境でコンソールログを削除する
• startup-splash-screen-control - スプラッシュスクリーンの表示を制御する
• startup-preload-assets - スプラッシュ中に重要なアセットをプリロードする
• startup-async-routes - コード分割のために非同期ルートを使用する
• startup-cherry-pick-imports - バレルファイルの代わりに直接インポートを使用する

2. リスト仮想化 (致命的)

• list-use-flashlist - FlatList の代わりに FlashList を使用する
• list-estimated-item-size - 正確な estimatedItemSize を提供する
• list-get-item-type - 混合リストに getItemType を使用する
• list-stable-render-item - useCallback で renderItem を安定化させる
• list-get-item-layout - 固定高さの場合は getItemLayout を提供する
• list-memoize-items - リストアイテムコンポーネントをメモ化する

3. 再レンダリング最適化 (高)

• rerender-use-memo-expensive - コストの高い計算をメモ化する
• rerender-use-callback-handlers - useCallback でコールバックを安定化させる
• rerender-functional-setstate - 関数型 setState 更新を使用する
• rerender-lazy-state-init - 遅延状態初期化を使用する
• rerender-split-context - コンテキストを更新頻度で分割する
• rerender-derive-state - 状態を同期するのではなく導出する

4. アニメーションパフォーマンス (高)

• anim-use-native-driver - アニメーションのネイティブドライバーを有効にする
• anim-use-reanimated - 複雑なアニメーション用に Reanimated を使用する
• anim-layout-animation - シンプルなトランジションに LayoutAnimation を使用する
• anim-transform-not-dimensions - ディメンションの代わりに transform をアニメーションさせる
• anim-interaction-manager - アニメーション中に重い処理を遅延させる

5. 画像とアセット読み込み (中〜高)

• asset-use-expo-image - 画像読み込みに expo-image を使用する
• asset-prefetch-images - 表示前に画像をプリフェッチする
• asset-optimize-image-size - 適切なサイズの画像をリクエストする
• asset-use-webp-format - 画像に WebP フォーマットを使用する
• asset-recycling-key - FlashList の画像で recyclingKey を使用する

6. メモリ管理 (中)

• mem-cleanup-subscriptions - useEffect でサブスクリプションをクリーンアップする
• mem-clear-timers - アンマウント時にタイマーをクリアする
• mem-abort-fetch - アンマウント時に fetch リクエストをアボートする
• mem-avoid-inline-objects - プロップ内のインラインオブジェクトを避ける
• mem-limit-list-data - メモリ内のリストデータを制限する

7. 非同期とデータ取得 (中)

• async-parallel-fetching - 独立したデータを並列に取得する
• async-defer-await - 値が必要になるまで await を遅延させる
• async-batch-api-calls - 関連する API 呼び出しをバッチ処理する
• async-cache-responses - API レスポンスをローカルにキャッシュする
• async-refetch-on-focus - スクリーンフォーカス時にデータを再フェッチする

8. プラットフォーム最適化 (低〜中)

• platform-android-overdraw - Android オーバードローを削減する
• platform-ios-text-rendering - iOS テキストレンダリングを最適化する
• platform-android-proguard - Android リリースで ProGuard を有効にする
• platform-conditional-render - プラットフォーム固有の最適化

使用方法

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

• セクション定義 - カテゴリ構造と影響度レベル
• ルールテンプレート - 新しいルール追加用テンプレート

完全なコンパイル済みドキュメント

すべてのルールを展開した完全ガイドについては、AGENTS.md を参照してください。

リファレンスファイル

ファイル	説明
AGENTS.md	すべてのルールを展開した完全ガイド
references/_sections.md	カテゴリ定義と順序付け
assets/templates/_template.md	新しいルール用テンプレート
metadata.json	バージョンとリファレンス情報