expo

Community Expo React Native のベストプラクティス

Expo React Native アプリケーション向けの包括的なパフォーマンス最適化ガイドです。9 つのカテゴリーにわたる 54 のルールを収録し、自動リファクタリングとコード生成の指針となるよう、影響度の高い順に優先順位を付けています。

適用するタイミング

次の場合に、これらのガイドラインを参照してください。

• Expo React Native コンポーネントを新しく作成するとき
• アプリの起動時間と操作可能になるまでの時間を最適化するとき
• リスト、画像、アニメーションを実装するとき
• バンドルサイズとメモリ使用量を削減するとき
• モバイルのパフォーマンスに関する問題がないかコードをレビューするとき

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

優先度	カテゴリー	影響度	プレフィックス
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 プロパティを使わない
• 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. 再レンダリングの防止（中）

• 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. アニメーションのパフォーマンス（中）

• 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. メモリ管理（低〜中）

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

使用方法

詳しい説明とコード例については、各リファレンスファイルを参照してください。

• セクションの定義 - カテゴリー構成と影響レベル
• ルールのテンプレート - 新しいルールを追加するためのテンプレート
• ルールの例：launch-splash-screen-control、list-use-flashlist

完全版ドキュメント

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