expo-react-native-coder

Expo React Native コーダーのベストプラクティス

Expo React Native アプリケーションの機能開発に関する包括的なガイドです。プロジェクトのセットアップからテストまで、10 のカテゴリにわたる 50 のルールをまとめています。一般的な機能に使える、本番環境対応のコードテンプレートも含まれています。

適用する場面

以下の場合に、このガイドラインを参照してください。

• TypeScript を使って新しい Expo プロジェクトをセットアップするとき
• Expo Router でナビゲーション（タブ、スタック、ドロワー、モーダル）を構築するとき
• 画面（一覧、詳細、フォーム、設定）を作成するとき
• 保護されたルートを使った認証フローを実装するとき
• ディープリンクとユニバーサルリンクを設定するとき

優先度別のルールカテゴリ

優先度	カテゴリ	影響度	プレフィックス
1	プロジェクトのセットアップと設定	CRITICAL	setup-
2	ルーティングとナビゲーション	CRITICAL	route-
3	画面パターンとレイアウト	HIGH	screen-
4	データ取得と状態管理	HIGH	data-
5	認証とセキュリティ	HIGH	auth-
6	ディープリンクとユニバーサルリンク	HIGH	link-
7	ネイティブ UX パターン	MEDIUM-HIGH	ux-
8	フォームとユーザー入力	MEDIUM	form-
9	アセットとテーマ	MEDIUM	asset-
10	エラー処理とテスト	MEDIUM	test-

クイックリファレンス

1. プロジェクトのセットアップと設定（CRITICAL）

• setup-typescript-config - 厳格モードで TypeScript を設定する
• setup-app-config-typescript - 型付きの app.config.ts を使う
• setup-environment-variables - クライアント変数には EXPO_PUBLIC_ プレフィックスを使う
• setup-eas-build-profiles - 環境ごとに EAS ビルドプロファイルを設定する
• setup-development-build - 開発ビルドと Expo Go

2. ルーティングとナビゲーション（CRITICAL）

• route-file-based-routing - Expo Router でファイルベースのルーティングを行う
• route-tab-navigator - ルートグループを使ったタブナビゲーター
• route-dynamic-segments - 動的ルートセグメント [param]
• route-stack-within-tabs - タブ内にネストしたスタックを作成する
• route-modal-presentation - モーダル画面を表示する
• route-typed-routes - 型付きルートを有効にする
• route-drawer-navigator - ドロワーナビゲーターを設定する

3. 画面パターンとレイアウト（HIGH）

• screen-list-flashlist - 大規模な一覧に FlashList を使う
• screen-detail-params - パラメーターで最小限のデータを渡す
• screen-loading-state - 読み込み状態とエラー状態
• screen-pull-to-refresh - プルして更新するパターン
• screen-header-options - 画面ヘッダーを設定する
• screen-settings-list - SectionList を使った設定画面

4. データ取得と状態管理（HIGH）

• data-api-routes - サーバーサイドの API ルート
• data-secure-store - 機密データに SecureStore を使う
• data-sqlite-local - 複雑なローカルデータに SQLite を使う
• data-fetch-on-focus - 画面にフォーカスが当たったときに再取得する
• data-async-storage-simple - 設定の保存に AsyncStorage を使う
• data-abort-controller - アンマウント時にフェッチをキャンセルする

5. 認証とセキュリティ（高）

• auth-protected-routes - Stack.Protected によるガード
• auth-context-provider - セッションを使った認証コンテキスト
• auth-oauth-flow - AuthSession を使った OAuth
• auth-login-form - バリデーション付きログインフォーム
• auth-splash-loading - 認証確認中のスプラッシュ画面

6. ディープリンクとユニバーサルリンク（高）

• link-deep-linking-scheme - カスタム URL スキーム
• link-universal-links-ios - iOS のユニバーサルリンク
• link-android-app-links - Android のアプリリンク
• link-handle-incoming - 受信した URL の処理

7. ネイティブ UX パターン（中〜高）

• ux-safe-area-insets - ノッチに対応する SafeAreaView
• ux-status-bar - ステータスバーのスタイル設定
• ux-haptic-feedback - アクション時の触覚フィードバック
• ux-gesture-handler - スワイプ用ジェスチャーハンドラー
• ux-keyboard-avoiding - KeyboardAvoidingView

8. フォームとユーザー入力（中）

• form-text-input-config - TextInput のキーボードタイプ
• form-controlled-inputs - useState を使った制御入力
• form-submit-button-state - 送信中にボタンを無効化
• form-dismiss-keyboard - 外側をタップしたときにキーボードを閉じる

9. アセットとテーマ設定（中）

• asset-image-optimization - キャッシュ用の expo-image
• asset-font-loading - useFonts を使ったフォントの読み込み
• asset-vector-icons - @expo/vector-icons
• asset-splash-screen - スプラッシュ画面の設定

10. エラー処理とテスト（中）

• test-jest-setup - jest-expo プリセットを使った Jest
• test-component-testing - コンポーネント向け Testing Library
• test-error-boundary - エラーバウンダリー
• test-e2e-maestro - Maestro による E2E テスト

コードテンプレート

本番環境ですぐに使えるテンプレートを assets/templates/ で利用できます。

テンプレート	説明
layouts/tab-layout.tsx	アイコン付きのボトムタブナビゲーター
layouts/auth-layout.tsx	保護されたルートを備えたルートレイアウト
screens/list-screen.tsx	FlashList、更新、各種状態に対応したリスト
screens/detail-screen.tsx	パラメーター処理に対応した詳細画面
screens/form-screen.tsx	バリデーションとキーボード処理に対応したフォーム
hooks/use-auth.tsx	SecureStore を使った認証コンテキスト
components/error-boundary.tsx	エラーバウンダリーコンポーネント

使用方法

詳しい説明とコード例については、各リファレンスファイルをお読みください。

• セクションの定義 - カテゴリー構成と影響レベル
• ルールテンプレート - 新しいルールを追加するためのテンプレート

コンパイル済みドキュメント全文

すべてのルールをまとめた包括的なドキュメントについては、AGENTS.md をご覧ください。

リファレンスファイル

ファイル	説明
AGENTS.md	すべてのルールをまとめた完全ガイド
references/_sections.md	カテゴリーの定義と順序
assets/templates/	本番環境ですぐに使えるコードテンプレート
metadata.json	バージョンとリファレンス情報