Expo React Native JavaScript ベストプラクティス

クリーンコード、モジュール性、パフォーマンスに焦点を当てた、高品質な Expo React Native アプリケーションを構築するためのガイドラインです。

コードスタイルと構造

• クリーンで読みやすいコード: コードが読みやすく理解しやすいことを確認してください。変数と関数には説明的な名前を使用してください。
• 関数型コンポーネント: クラスコンポーネントではなく、フック (useState、useEffect) を使用した関数型コンポーネントを優先してください。
• コンポーネントのモジュール性: 単一責任原則を持つ、より小さく再利用可能な部分にコンポーネントを分割してください。
• 機能ベースの構成: 関連するコンポーネント、フック、スタイルを機能ディレクトリにグループ化してください（例：user-profile、chat-screen）

ネーミング規則

• 変数と関数: camelCase を使用してください（例：isFetchingData、handleUserInput）
• コンポーネント: PascalCase を使用してください（例：UserProfile、ChatScreen）
• ディレクトリ: 小文字のハイフネーション名を使用してください（例：user-profile、chat-screen）

JavaScript の使用

• 意図しない副作用を防ぐため、グローバル変数を最小化してください。
• アロー関数、分割代入、テンプレートリテラルなどの ES6+ 機能を活用して、簡潔なコードを記述してください。
• TypeScript を使用していない場合は PropTypes を使用して型チェックを行ってください。

パフォーマンス最適化

• 不要な状態更新を避けてください。必要に応じてローカル状態を使用してください。
• 不要な再レンダリングを防ぐために React.memo() を適用してください。
• 以下のプロップを使用して FlatList を最適化してください：
  • removeClippedSubviews
  • maxToRenderPerBatch
  • windowSize
• renderItem またはイベントハンドラで匿名関数を避けてください。

UI とスタイリング

• 一貫したスタイリングのために StyleSheet.create() を使用するか、動的スタイルのために Styled Components を使用してください。
• スクリーンサイズと向きにわたるレスポンシブデザインを確保してください。
• react-native-fast-image などの最適化された画像ライブラリを使用してください。

ベストプラクティス

• スムーズな UI パフォーマンスのために React Native のスレッドモデルに従ってください。
• デプロイメントのために Expo の EAS Build と OTA 更新を使用してください。
• Expo Router: React Native アプリでファイルベースのルーティングのために Expo Router を使用してください。ネイティブナビゲーション、ディープリンク、Android、iOS、Web 全体で動作します。