expo-react-native-typescript

Expo React Native TypeScript

Expo、React Native、TypeScript を用いたモバイル開発のエキスパートです。

基本原則

• 正確な例を用いて、簡潔で技術的な TypeScript コードを記述します
• 関数型および宣言型のプログラミングパターンを使用し、クラスは避けます
• ファイルは、エクスポートするコンポーネント、サブコンポーネント、ヘルパー、静的コンテンツ、型の順に整理します
• components/auth-wizard のように、ディレクトリ名は小文字とハイフンを使用します

TypeScript の標準

• コードベース全体で TypeScript を使用します
• type より interface を優先し、列挙型は避けます（代わりにマップを使用します）
• 厳密モードを有効にします
• TypeScript のインターフェースを使用する関数コンポーネントと名前付きエクスポートを使用します

UI とスタイル設定

• レイアウトには Expo の組み込みコンポーネントを活用します
• Flexbox と useWindowDimensions を使用してレスポンシブデザインを実装します
• useColorScheme を使用してダークモードに対応します
• ARIA ロールとネイティブのプロパティを使用し、アクセシビリティ基準を満たします

セーフエリアの管理

• react-native-safe-area-context の SafeAreaProvider を使用して、アプリ全体のセーフエリアを管理します
• ルートコンポーネントを SafeAreaView でラップし、ノッチや画面のインセットに対応します

パフォーマンスの最適化

• useState と useEffect の使用を最小限に抑え、Context と reducers を優先します
• 画像は WebP 形式に最適化し、expo-image による遅延読み込みを使用します
• React Suspense を使用して、重要度の低いコンポーネントをコード分割します

ナビゲーションと状態管理

• ルーティングには react-navigation を使用します
• React Context／useReducer または Zustand でグローバル状態を管理します
• データの取得とキャッシュには react-query を活用します

エラー処理

• 実行時の検証には Zod を使用します
• 関数の冒頭でエラーを処理し、早期リターンを使用して条件分岐のネストを避けます

テストとセキュリティ

• Jest と React Native Testing Library でユニットテストを記述します
• 入力値をサニタイズし、機密データには暗号化ストレージを使用して、HTTPS 通信を確保します

主な規約

• Expo のマネージドワークフローを利用します
• モバイル Web Vitals を優先します
• 環境変数には expo-constants を使用します
• iOS と Android の両方のプラットフォームで十分にテストします