React Native ベストプラクティス

概要

JavaScript/React、Native（iOS/Android）、バンドリングの最適化をカバーする React Native アプリケーションのパフォーマンス最適化ガイドです。Callstack の「Ultimate Guide to React Native Optimization」に基づいています。

スキル形式

各リファレンスファイルは、高速な検索と深い理解のためのハイブリッド形式に従います：

• Quick Pattern: 迅速なパターン マッチングのための正しい/誤ったコード スニペット
• Quick Command: プロセス/測定スキルのためのシェル コマンド
• Quick Config: セットアップ指向のスキルのための設定スニペット
• Quick Reference: 概念的なスキルのための要約テーブル
• Deep Dive: 使用時期、前提条件、段階的手順、よくある落とし穴を含む完全なコンテキスト

影響度評価: CRITICAL（即座に修正）、HIGH（大幅な改善）、MEDIUM（価値のある最適化）

適用時期

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

• 遅い、またはジャンキーな UI またはアニメーションをデバッグしている
• メモリ リーク（JS またはネイティブ）を調査している
• アプリ起動時間（TTI）を最適化している
• バンドルまたはアプリサイズを削減している
• ネイティブ モジュール（Turbo Modules）を作成している
• React Native パフォーマンスをプロファイリングしている
• React Native コードをパフォーマンスについて確認している

セキュリティに関する注釈

• これらのリファレンスのシェル コマンドをローカル開発者操作として扱ってください。実行前に確認し、バージョン固定ツールを使用し、リモート スクリプトをシェルに直接パイプすることは避けてください。
• サードパーティのライブラリとプラグインを、通常のサプライチェーン管理を必要とする依存関係として扱ってください：バージョンをピン留めし、出所を確認し、標準的なレビュー プロセスを通じて更新してください。
• Re.Pack コード分割を第一方のアーティファクト配信のみとして扱ってください。リモート チャンクは、あなたが管理する信頼できる HTTPS オリジンからのみ来るべきであり、現在のアプリ リリースにピン留めされるべきです。

優先度順ガイドライン

優先度	カテゴリ	影響	プレフィックス
1	FPS と再レンダリング	CRITICAL	js-*
2	バンドル サイズ	CRITICAL	bundle-*
3	TTI 最適化	HIGH	native-*, bundle-*
4	ネイティブ パフォーマンス	HIGH	native-*
5	メモリ管理	MEDIUM-HIGH	js-*, native-*
6	アニメーション	MEDIUM	js-*

クイック リファレンス

最適化ワークフロー

パフォーマンス問題については、このサイクルに従ってください：測定 → 最適化 → 再測定 → 検証

1. 測定: 変更前にベース メトリクスをキャプチャします。実行時の問題については、コミット タイムライン、再レンダリング数、遅いコンポーネント、最も重いコミット分解、利用可能な場合は起動/TTI を優先してください。コンポーネント ツリーの深さまたは数は、代替としてではなく、オプションのコンテキストです。
2. 最適化: 関連するリファレンスから対象の修正を適用します
3. 再測定: 同じ測定を実行して、更新されたメトリクスを取得します
4. 検証: 改善を確認します（例：FPS 45→60、TTI 3.2s→1.8s、バンドル 2.1MB→1.6MB）

メトリクスが改善されなかった場合は、元に戻して次の推奨修正を試してください。

レビュー ガイドレール

• API 固有の修正を提案する前にライブラリ バージョンを確認してください。例：FlashList v2 は estimatedItemSize を廃止しているため、そこで欠落していると指摘しないでください。
• 動作が実証的に正しくないか、プロファイリングがその値に関連する無駄な作業を示さない限り、useMemo または useCallback の依存関係の変更を提案しないでください。
• 推測的にステイル クロージャを報告しないでください。ステイル読取パス、リプロダクション、またはプロファイラー証拠を示した上で指摘してください。
• フローをプロファイリングするときは、対象のインタラクション自体を測定してください。コンポーネント ツリーの深さまたはコンポーネント数をメイン パフォーマンス証拠として扱わないでください。

重大：FPS と再レンダリング

まずプロファイリング：

# React Native DevTools を開く
# Metro で 'j' を押すか、デバイスを振る → "Open DevTools"

よくある修正：

• ScrollView をリスト用に FlatList/FlashList に置き換える
• React Compiler を使用して自動メモ化を行う
• アトミック状態（Jotai/Zustand）を使用して再レンダリングを削減する
• 高コストの計算に useDeferredValue を使用する

重大：バンドル サイズ

バンドルを分析：

npx react-native bundle \
  --entry-file index.js \
  --bundle-output output.js \
  --platform ios \
  --sourcemap-output output.js.map \
  --dev false --minify true

npx source-map-explorer output.js --no-border-checks

最適化後の改善を確認：

# 変更前にベース サイズを記録
ls -lh output.js  # 例：変更前：2.1 MB

# 修正を適用した後、再バンドルして比較
npx react-native bundle --entry-file index.js --bundle-output output.js \
  --platform ios --dev false --minify true
ls -lh output.js  # 例：変更後：1.6 MB（24% 削減）

よくある修正：

• バレル インポートを避ける（ソースから直接インポートする）
• Hermes API とメソッド カバレッジを確認した後のみ、不要な Intl ポリフィルを削除する
• ツリーシェイキングを有効にする（Expo SDK 52+ または Re.Pack）
• Android ネイティブ コード縮小のために R8 を有効にする

高：TTI 最適化

TTI を測定：

• react-native-performance をマーカーに使用する
• コールド スタートのみを測定する（ウォーム/ホット/プレウォームを除外）

よくある修正：

• Android での JS バンドル圧縮を無効にする（Hermes mmap を有効にする）
• ネイティブ ナビゲーション（react-native-screens）を使用する
• ナビゲーション前に一般的に使用される高コスト スクリーンをプリロードする

高：ネイティブ パフォーマンス

ネイティブ プロファイル：

• iOS：Xcode Instruments → Time Profiler
• Android：Android Studio → CPU Profiler

よくある修正：

• 重いネイティブ作業にはバックグラウンド スレッドを使用する
• 同期 Turbo Module メソッドよりも非同期を優先する
• クロスプラットフォームのパフォーマンス クリティカルなコードに C++ を使用する

リファレンス

references/ の完全なドキュメンコード例：

JavaScript/React（js-*）

ファイル	影響	説明
js-lists-flatlist-flashlist.md	CRITICAL	ScrollView を仮想化リストに置き換える
js-profile-react.md	MEDIUM	React DevTools プロファイリング
js-measure-fps.md	HIGH	FPS モニタリングと測定
js-memory-leaks.md	MEDIUM	JS メモリ リーク検出
js-atomic-state.md	HIGH	Jotai/Zustand パターン
js-concurrent-react.md	HIGH	useDeferredValue、useTransition
js-react-compiler.md	HIGH	自動メモ化
js-animations-reanimated.md	MEDIUM	Reanimated ワークレット
js-bottomsheet.md	HIGH	ボトム シート最適化
js-uncontrolled-components.md	HIGH	TextInput 最適化

ネイティブ（native-*）

ファイル	影響	説明
native-turbo-modules.md	HIGH	高速なネイティブ モジュール構築
native-sdks-over-polyfills.md	HIGH	ネイティブ vs JS ライブラリ
native-measure-tti.md	HIGH	TTI 測定セットアップ
native-threading-model.md	HIGH	Turbo Module スレッド
native-profiling.md	MEDIUM	Xcode/Android Studio プロファイリング
native-platform-setup.md	MEDIUM	iOS/Android ツール ガイド
native-view-flattening.md	MEDIUM	ビュー階層デバッグ
native-memory-patterns.md	MEDIUM	C++/Swift/Kotlin メモリ
native-memory-leaks.md	MEDIUM	ネイティブ メモリ リーク検出
native-android-16kb-alignment.md	CRITICAL	Google Play 用のサード パーティ ライブラリ アライメント

バンドリング（bundle-*）

ファイル	影響	説明
bundle-barrel-exports.md	CRITICAL	バレル インポートを避ける
bundle-analyze-js.md	CRITICAL	JS バンドル可視化
bundle-tree-shaking.md	HIGH	デッド コード削除
bundle-analyze-app.md	HIGH	アプリ サイズ分析
bundle-r8-android.md	HIGH	Android コード縮小
bundle-hermes-mmap.md	HIGH	バンドル圧縮を無効にする
bundle-native-assets.md	HIGH	アセット カタログ セットアップ
bundle-library-size.md	MEDIUM	依存関係の評価
bundle-code-splitting.md	MEDIUM	Re.Pack コード分割

リファレンスの検索

# キーワードでパターンを検索
grep -l "reanimated" references/
grep -l "flatlist" references/
grep -l "memory" references/
grep -l "profil" references/
grep -l "tti" references/
grep -l "bundle" references/

問題 → スキル マッピング

問題	最初に読むべきもの
アプリが遅い/ジャンキー	js-measure-fps.md → js-profile-react.md
再レンダリングが多すぎる	js-profile-react.md → js-react-compiler.md
起動が遅い（TTI）	native-measure-tti.md → bundle-analyze-js.md
アプリ サイズが大きい	bundle-analyze-app.md → bundle-r8-android.md
メモリが増え続ける	js-memory-leaks.md または native-memory-leaks.md
アニメーションがフレームをドロップ	js-animations-reanimated.md
ボトム シート ジャンク/再レンダリング	js-bottomsheet.md → js-animations-reanimated.md
リスト スクロール ジャンク	js-lists-flatlist-flashlist.md
TextInput ラグ	js-uncontrolled-components.md
ネイティブ モジュール が遅い	native-turbo-modules.md → native-threading-model.md
ネイティブ ライブラリ アライメント問題	native-android-16kb-alignment.md

帰属

Callstack による「The Ultimate Guide to React Native Optimization」に基づいています。