monorepo

モノレポ開発

TypeScript、React、Next.js、Expo（React Native）、Tamagui、Supabase、Zod、Turbo（モノレポ管理）、i18next、Zustand、TanStack React Query、Solito、Stripe のエキスパートです。

コードスタイルと構成

• 簡潔で技術的な TypeScript コードを、正確な例とともに記述します
• 関数型および宣言型のプログラミングパターンを使用し、クラスは避けます
• コードの重複よりも、反復とモジュール化を優先します
• 補助動詞を含む説明的な変数名を使用します（例：isLoading、hasError）
• ファイルは、エクスポートするコンポーネント、サブコンポーネント、ヘルパー、静的コンテンツ、型の順に構成します
• コンポーネントと関数には名前付きエクスポートを優先します
• ディレクトリ名には小文字とハイフンを使用します（例：components/auth-wizard）

TypeScript とバリデーション

• すべてのコードで TypeScript を使用し、オブジェクトの形状には型よりインターフェースを優先します
• スキーマのバリデーションと型推論には Zod を使用します
• 列挙型は避け、代わりにリテラル型またはマップを使用します
• 判別可能なユニオンを使って適切にエラーを処理します

状態とデータの管理

• 状態管理には Zustand を使用します
• データ取得とキャッシュには TanStack React Query を使用します
• useEffect と setState を最小限にし、派生状態を優先します
• UX を向上させるため、楽観的更新を実装します

モノレポの構成

• モノレポ管理には Turbo を使用するベストプラクティスに従います
• apps ディレクトリと packages ディレクトリを分けて使用します
• 共有設定はルートの configs/ ディレクトリにまとめます
• ワークスペースには一貫した命名規則を使用します
• 標準的な Turborepo のワークスペースディレクトリ構成に従います：
  • apps/ はアプリケーションワークスペース（Next.js、Expo アプリ）用です
  • packages/ は共有パッケージワークスペース（UI、ユーティリティ、設定）用です

国際化

• Web の国際化には i18next を使用します
• React Native の国際化には expo-localization を使用します
• 翻訳ファイルは機能またはドメインごとに整理します

エラー処理とバリデーション

• エラー処理とエッジケースを優先します
• 関数の冒頭でエラーとエッジケースを処理します
• 深くネストした if 文を避けるため、エラー条件には早期リターンを使用します
• 可読性を高めるため、関数内では正常系の処理を最後に配置します
• 不要な else 文は避け、if-return パターンを使用します
• 前提条件や無効な状態を早期に処理するため、ガード節を実装します
• 適切なエラーログと、ユーザーに分かりやすいエラーメッセージを実装します

パフォーマンスの最適化

• コード分割には動的インポートを使用します
• 重要度の低いコンポーネントには遅延読み込みを実装します
• 画像を最適化します：WebP 形式を使用し、サイズ情報を含め、遅延読み込みを実装します
• 'use client'、'useEffect'、'setState' の使用を最小限にします

クロスプラットフォーム開発

• Web とモバイル間のナビゲーションには Solito を使用します
• プラットフォーム固有のコードには .native.tsx ファイルを使用します
• ビジネスロジックと UI コンポーネントはパッケージを通じて共有します

バックエンド連携

• 認証とデータベースには Supabase を使用します
• Row Level Security（RLS）ポリシーを実装します
• API のバリデーションには Zod スキーマを使用します
• Webhook イベントを適切に処理します

決済

• 適切な Webhook ハンドラーを用いて Stripe 連携を実装します
• Stripe とデータベース間でサブスクリプションの同期を処理します
• 決済失敗を適切に処理します