react-native-skills

React Native スキル

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

適用するタイミング

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

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

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

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

クイックリファレンス

1. リストのパフォーマンス（CRITICAL）

• list-performance-virtualize - 大規模なリストには FlashList を使用する
• list-performance-item-memo - リスト項目のコンポーネントをメモ化する
• list-performance-callbacks - コールバックの参照を安定させる
• list-performance-inline-objects - インラインのスタイルオブジェクトを避ける
• list-performance-function-references - 関数を render の外に切り出す
• list-performance-images - リスト内の画像を最適化する
• list-performance-item-expensive - 処理負荷の高い処理を項目の外に移動する
• list-performance-item-types - 異種リストでは項目の型を使用する

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

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

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

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

4. UI パターン（HIGH）

• 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. 状態管理（MEDIUM）

• react-state-minimize - 状態の購読を最小限に抑える
• react-state-dispatcher - コールバックにはディスパッチャーパターンを使用する
• react-state-fallback - 初回レンダリング時にフォールバックを表示する
• react-compiler-destructure-functions - React Compiler のために分割代入する
• react-compiler-reanimated-shared-values - コンパイラーで共有値を扱う

6. レンダリング（MEDIUM）

• rendering-text-in-text-component - テキストを Text コンポーネントで囲む
• rendering-no-falsy-and - 条件付きレンダリングで falsy な値との && を避ける

7. モノレポ（MEDIUM）

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

8. 設定（LOW）

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

使用方法

詳しい説明とコード例については、個々のルールファイルを読んでください。

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

各ルールファイルには、次の内容が含まれています。

• 重要な理由の簡単な説明
• 説明付きの誤ったコード例
• 説明付きの正しいコード例
• 追加の背景情報と参考資料

完全版ドキュメント

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