expo-react-native-javascript-best-practices

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() を適用します。
• 次の props を使って 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、ウェブで動作します。