コンテンツへスキップ
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/first-feature.md (or send Accept: text/markdown).

最初の機能を作る

新しい画面からサーバー検証済みデータまでのエンドツーエンドのウォークスルー。

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

初心者向けのウォークスルー

前提条件: 以下の 2 つの初心者ガイドを読み、Mobile ローカル セットアップを完了し、このリポジトリをルートでエディターで開きます。Mobile の設定は apps/mobile/.env.local に入れます。Expo はルートの .env を読みません。プレビューには実データ用に到達可能なバックエンドが必要です。

簡単に説明すると、ワークスペースは 1 つのチームの個別のユーザー、データ、設定です。サーバーは信頼できるバックエンドです。プロバイダー キーがブラウザーや電話コードに含まれないようにします。移行は、テーブルを作成または更新する、バージョン管理されたデータベースの変更です。 AI モデルは答えを返すエンジンです。モデル カタログは、使用可能なモデル ID と価格のサーバーのリストです。プロバイダーは、AI、電子メール、請求サービスなどの外部サービスです。資格は、ワークスペースで機能を使用できるようにする付与です。 Webhook は、あるサービスが別のサービスの URL に送信するメッセージです。

1. .agents/skills/add-a-mobile-screen/SKILL.md を開く — またはコーディング エージェントに従わせる — 小さな画面を 1 つ作成します。例えば apps/mobile/app/(app)/ideas.tsx にロジックを apps/mobile/src/ideas/ に置きます。

2. 実行中のプレビュー経由でデバイスの新しい画面を開き、サインイン済みメンバーに対してレンダリングされることを確認します。

3. サインアウトしたアカウントと第 2 ワークスペースのアカウントを確認します — 非公開のままであるべきものは拒否されるか存在しないはずです。サーバーが境界を強制するためです。

カスタム コードでは、画面名、表示するデータ、誰が見られるか、処理するエラーを指定します。このタスクをコーディング エージェントに渡し、AGENTS.md、.ai/PROJECT_CONTEXT.md、および変更するファイルの .ai/ ミラーを読ませ、編集前にファイルとチェックを列挙させ、差分を見せてもらいます。サンプル値を使用し、実際のシークレットは決して貼り付けないでください。

【端末の基本】(/docs/mobile/terminal-basics)

画面を作成する

apps/mobile/app/(app)/ 下にルート ファイルを追加します — Expo Router がそのファイルをサインイン済みスタック内の画面に変えます。apps/mobile/src/ui プリミティブ (Screen、Card、Title、Detail、AppButton) で構成し、アプリのスペーシング、タイポグラフィ、色を継承させます。

apps/mobile/app/(app)/ideas.tsx
apps/mobile/src/ideas/index.ts
apps/mobile/src/ideas/index.test.ts

型付きクライアントで読み書きする

apps/mobile/src/api/client.ts 経由で fetch します。これは保存済みセッションを EXPO_PUBLIC_API_URL への各リクエストに添付し、型付きエラーを返します。ペイロードは Web 契約と同一に保ちます — 同じエンドポイントが両方のクライアントにサービスを提供します。

画面がワークスペース データを読む場合は、apps/mobile/src/offline/ のヘルパーで呼び出しをラップし、ネットワーク エラー時にキャッシュ コピーにフォールバックできるようにします — ネットワーク エラーのみで、認証や権限エラーの後には決して行いません。

サーバーに所有権を決定させる

サーバーはサインイン済みメンバーとアクティブなワークスペースを解決し、すべてのレコードを workspaceId でスコープします。アプリはサーバーが返すものを表示します。サーバーが信頼すべきワークスペース ID を送信することは決してありません。

必要なデータにエンドポイントがない場合は、まずバックエンドに追加します — ビジネス ルールはサーバーにあります。アプリ内の非表示ボタンはアクセスを強制しません。

アクセスとリカバリを確認する

サインイン済みメンバー、別ワークスペースのメンバー、サインアウト セッション、機内モードを確認します: メンバー データは表示され、他者のデータは拒否され、サインアウトしたデバイスはサインインに戻り、オフライン コピーはネットワーク エラー時のみ提供されます。

状態を磨く

共有プリミティブで画面にローディング、空、エラーの各状態を与え、すべての新しい文字列を 4 つの i18n カタログに追加し、メンバーが実際に見つけられるようルートをホームまたは設定ナビゲーションに配線します。