コンテンツへスキップ
supastack
ドキュメントを閲覧
モバイルExpo

For AI agents: fetch the complete documentation index at /llms.txt, the full documentation corpus at /llms-full.txt, the agent skill at /skill.md, or this page as Markdown at /ja/docs/mobile/tech-stack.md (or send Accept: text/markdown).

Mobile テクノロジー スタック

Expo アプリ内部のテクノロジーとそれぞれの役割。

このガイドについて質問
開くアプリ

始める前に

Mobile アプリは小さなネイティブ サーフェスです: 以下のすべてのライブラリはすでに apps/mobile/package.json に固定されているため、このページの内容に個別のインストールは不要です。このページは、後のガイドが理解できるよう各部分の役割を説明します。

バックエンドは Web リポジトリで独自のスタック (Next.js、Postgres、プロバイダー アダプター) を維持します。アプリはその一部を埋め込まず、EXPO_PUBLIC_API_URL 経由で到達します。これが Mobile 専用チェックアウトが小さく保たれる理由です。

Expo + React Native

Expo はアプリを実行・バンドル・ビルドするツールチェーンであり、React Native は webview ではなく実際のネイティブ UI 要素をレンダリングします。Expo Router はファイルベースのナビゲーションを提供します: apps/mobile/app/ 下のすべてのファイルが画面になり、サインイン済みスタックは app/(app)/ 下にグループ化されます。

Expo Go は電話で共有開発プレビューを開きますが、development build は自分のインストール可能なアプリです — 購入や生体認証ロックなどのネイティブ モジュールを実行する必要が出たら必須です。

TypeScript

すべてのアプリ コードは TypeScript であり、パッケージには厳密な型チェックが付属しています。デバイスや実行中のバックエンドなしですべてのファイルをチェックできます。

Better Auth Expo + セキュア ストレージ

サインインはシステム ブラウザー経由で Better Auth Expo クライアントを通ります: アプリがバックエンドの認証ページを開き、バックエンドがアプリのディープリンク スキームに戻り、セッション トークンは expo-secure-store (iOS の Keychain、Android の Keystore) に保持されます — 平文のストレージやバンドルされた設定には決して保存されません。

同じモジュールが、パスキー、expo-local-authentication によるオプションの生体認証アプリ ロック、ワークスペース スコープのオフライン キャッシュをクリアするサインアウトをカバーします。

RevenueCat 購入

react-native-purchases は StoreKit と Play Billing をキットのエンタイトルメント同期に接続します: アプリがストア購入を開始し、バックエンドが RevenueCat webhook で検証し、サーバーがワークスペースが使用できるものを決定します。

最初のプレビューでは購入はオフのままです (EXPO_PUBLIC_MOBILE_PURCHASES_PROVIDER=off)。実際の購入と復元のテストには EAS 開発ビルドが必要です。Expo Go はネイティブ購入モジュールを実行できないためです。

EAS Build + Submit

eas.json には 3 つのプロファイルが付属しています: development は iOS シミュレーター用の dev client をビルドし、preview はテスター用の内部 Android APK をビルドし、production は自動インクリメントされたバージョンと Play 内部トラックへの提出ステップでストア バイナリをビルドします。

ビルドは Expo のクラウドで実行されるため、バイナリ生成にローカルの Xcode や Android Studio は不要です — 必要なのは自分のコンピューターでシミュレーターを実行する場合だけです。

共有パッケージ

@supastack/ui-native はクロスプラットフォームのビュー モデル (createEntitlementCard はサーバーのエンタイトルメント状態を 1 つのカード契約に変換) を担い、@supastack/design-tokens はテーマ値を担います。Mobile チェックアウトにはこの 2 つの共有パッケージのみが含まれ、サーバー パッケージは Web バックエンドと共にあります。

検証ツール

決定論的な Vitest スイートは、セッション ストレージ、ディープリンク、チャット ストリーミングとキャンセル、エンタイトルメント、購入、オフライン キャッシュ、通知ルーティングをカバーします — デバイスなしでコンピューター上で実行できます。アプリ ロック、プッシュ配信、ストア購入などのネイティブ専用動作は、代わりに EAS 開発ビルドで検証します。

corepack pnpm --filter @supastack/mobile test
corepack pnpm --filter @supastack/mobile typecheck