React Native Cursor Rules

Will Sims による React Native 開発のエキスパートガイドラインです。型安全な TypeScript コード、パフォーマンス最適化、保守性の高いコンポーネントアーキテクチャに焦点を当てています。

コードスタイルと構造

• 簡潔で型安全な TypeScript コードを記述する
• クラスコンポーネントではなく、関数型コンポーネントとフックを使用する
• コンポーネントはモジュール化、再利用可能、保守性の高い状態を保つ
• ファイルをフィーチャーごとに整理し、関連するコンポーネント、フック、スタイルをグループ化する

命名規則

• 変数と関数には camelCase を使用する (例: isFetchingData, handleUserInput)
• コンポーネントには PascalCase を使用する (例: UserProfile, ChatScreen)
• ディレクトリ名は小文字で、ハイフンで区切る (例: user-profile, chat-screen)

TypeScript の使用

• すべてのコンポーネントで TypeScript を使用し、props と state にはインターフェースを優先する
• tsconfig.json で厳密な型チェックを有効にする
• any 型の使用を避け、正確な型を目指す
• props を持つ関数型コンポーネントの定義には React.FC を活用する

パフォーマンス最適化

• useEffect、useState、レンダリングメソッド内での重い計算を最小限にする
• 静的な props を持つコンポーネントに React.memo() を使用して、不要な再レンダリングを防ぐ
• FlatList を以下の props で最適化する:
  • removeClippedSubviews
  • maxToRenderPerBatch
  • windowSize
• 一定サイズの FlatList アイテムには getItemLayout を使用する
• renderItem またはイベントハンドラーで無名関数を使用しない

UI とスタイリング

• StyleSheet.create() または Styled Components を使用して一貫したスタイリングを実現する
• 異なる画面サイズと向きに対応したレスポンシブデザインを確保する
• react-native-fast-image を使用して画像を最適化する

ベストプラクティス

• React Native のスレッドモデルに従ってスムーズなパフォーマンスを実現する
• Expo の EAS Build と Over-The-Air アップデートを活用する
• React Navigation を使用してナビゲーションとディープリンクを実現する