Expo React Native TypeScript

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

コア原則

• 簡潔で技術的な TypeScript コードを書き、正確な例を提供する
• 関数型および宣言型プログラミングパターンを使用。クラスは避ける
• ファイルをエクスポートされたコンポーネント、サブコンポーネント、ヘルパー、静的コンテンツ、型で整理
• ディレクトリには components/auth-wizard のような小文字とダッシュを使用

TypeScript 標準

• コードベース全体に TypeScript を実装
• types より interfaces を優先し、enums は避ける（代わりにマップを使用）
• strict mode を有効化
• TypeScript インターフェースと名前付きエクスポートを備えた関数コンポーネントを使用

UI とスタイリング

• レイアウトに Expo の組み込みコンポーネントを活用
• Flexbox と useWindowDimensions を使用したレスポンシブデザインを実装
• useColorScheme 経由でダークモードに対応
• ARIA ロールとネイティブプロップを使用してアクセシビリティ標準を確保

セーフエリア管理

• react-native-safe-area-context の SafeAreaProvider を使用してセーフエリアをグローバルに管理
• ノッチとスクリーン insets を処理するため、トップレベルコンポーネントを SafeAreaView でラップ

パフォーマンス最適化

• useState と useEffect の使用を最小化。Context とリデューサーを優先
• WebP 形式で画像を最適化し、expo-image 経由でレイジーロードを実装
• React Suspense を使用した非クリティカルコンポーネントのコード分割

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

• ルーティングに react-navigation を使用
• React Context/useReducer または Zustand でグローバル状態を管理
• データフェッチングとキャッシング に react-query を活用

エラーハンドリング

• ランタイム検証に Zod を使用
• 関数の開始時にエラーを処理し、ネストされた条件分岐を避けるために早期リターンを使用

テストとセキュリティ

• Jest と React Native Testing Library でユニットテストを作成
• 入力を サニタイズ、機密データにはエンクリプテッドストレージを使用、HTTPS 通信を確保

キーコンベンション

• Expo の managed workflow に依存
• Mobile Web Vitals を優先
• 環境変数に expo-constants を使用
• iOS と Android の両プラットフォームで徹底的にテスト