React Native スキル

React Native と Expo アプリケーション向けの包括的なベストプラクティス。パフォーマンス、アニメーション、UI パターン、プラットフォーム固有の最適化に関する複数のカテゴリにわたるルールが含まれています。

適用すべき場面

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

• React Native または Expo アプリを構築するとき
• リストとスクロールのパフォーマンスを最適化するとき
• Reanimated を使用してアニメーションを実装するとき
• 画像とメディアを操作するとき
• ネイティブモジュールまたはフォントを設定するとき
• ネイティブ依存関係を持つモノレポプロジェクトを構成するとき

優先度別ルールカテゴリ

優先度	カテゴリ	影響度	プレフィックス
1	リストパフォーマンス	重大	list-performance-
2	アニメーション	高	animation-
3	ナビゲーション	高	navigation-
4	UI パターン	高	ui-
5	状態管理	中	react-state-
6	レンダリング	中	rendering-
7	モノレポ	中	monorepo-
8	設定	低	fonts-, imports-

クイックリファレンス

1. リストパフォーマンス（重大）

• list-performance-virtualize - 大きなリストに FlashList を使用する
• list-performance-item-memo - リストアイテムコンポーネントをメモ化する
• list-performance-callbacks - コールバック参照を安定させる
• list-performance-inline-objects - インラインスタイルオブジェクトを避ける
• list-performance-function-references - 関数をレンダリング外に抽出する
• list-performance-images - リスト内の画像を最適化する
• list-performance-item-expensive - 重い処理をアイテム外に移動する
• list-performance-item-types - 異種リストにアイテムタイプを使用する

2. アニメーション（高）

• animation-gpu-properties - transform と opacity のみをアニメーション化する
• animation-derived-value - 計算されたアニメーションに useDerivedValue を使用する
• animation-gesture-detector-press - Pressable の代わりに Gesture.Tap を使用する

3. ナビゲーション（高）

• navigation-native-navigators - JS ナビゲータの代わりにネイティブスタックとネイティブタブを使用する

4. UI パターン（高）

• ui-expo-image - すべての画像に expo-image を使用する
• ui-image-gallery - 画像ライトボックスに Galeria を使用する
• ui-pressable - TouchableOpacity の代わりに Pressable を使用する
• ui-safe-area-scroll - ScrollView 内でセーフエリアを処理する
• ui-scrollview-content-inset - ヘッダーに contentInset を使用する
• ui-menus - ネイティブコンテキストメニューを使用する
• ui-native-modals - 可能な限りネイティブモーダルを使用する
• ui-measure-views - measure() ではなく onLayout を使用する
• ui-styling - StyleSheet.create または Nativewind を使用する

5. 状態管理（中）

• react-state-minimize - 状態サブスクリプションを最小化する
• react-state-dispatcher - コールバックにディスパッチャーパターンを使用する
• react-state-fallback - 最初のレンダリング時にフォールバックを表示する
• react-compiler-destructure-functions - React Compiler のために分割代入を使用する
• react-compiler-reanimated-shared-values - コンパイラと共有値を処理する

6. レンダリング（中）

• rendering-text-in-text-component - テキストを Text コンポーネントでラップする
• rendering-no-falsy-and - 条件付きレンダリングで falsy && を避ける

7. モノレポ（中）

• monorepo-native-deps-in-app - ネイティブ依存関係をアプリパッケージに保つ
• monorepo-single-dependency-versions - パッケージ全体で単一バージョンを使用する

8. 設定（低）

• fonts-config-plugin - カスタムフォントにコンフィグプラグインを使用する
• imports-design-system-folder - デザインシステムのインポートを整理する
• js-hoist-intl - Intl オブジェクトの作成を持ち上げる

使用方法

詳細な説明とコード例については、個別のルールファイルを参照してください：

rules/list-performance-virtualize.md
rules/animation-gpu-properties.md

各ルールファイルには以下が含まれます：

• なぜ重要なのかについての簡潔な説明
• 説明付きの不正なコード例
• 説明付きの正しいコード例
• 追加のコンテキストと参考資料

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

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