claude-skills/

Anthropic公式スキル・プラグインの日本語ディレクトリ

last sync 22h ago
スキルOfficialdevelopment

📚expo-examples

プラグイン
expo
ライセンス
MIT
ソース
GitHub で見る ↗

説明

Expoの公式サンプルプロジェクト集 — `expo/examples` リポジトリには、約70種類の `with-*` 形式のインテグレーション（Stripe、Clerk、Supabase、OpenAI、マップ、Reanimated、SQLite、Skia、NativeWind など）が収録されています。 次のような場合に使用: - サードパーティのライブラリやサービスを既存のExpoアプリに組み込む際に、バージョンが一致した公式パターンを参考にしたいとき - `npx create-expo --example` を使って、既存サンプルをベースに新しいプロジェクトをスキャフォールディングしたいとき

原文を表示

Expo's official example projects — the expo/examples repo of ~70 `with-*` integrations (Stripe, Clerk, Supabase, OpenAI, maps, Reanimated, SQLite, Skia, NativeWind, and more). Use when integrating a third-party library or service into an existing Expo app and you want the canonical, version-matched pattern to adapt, or when scaffolding a new project from one with `npx create-expo --example`.

ユースケース

  • ✓サードパーティライブラリを組み込む際の公式パターンを確認したいとき
  • ✓既存サンプルをベースに新規プロジェクトをスキャフォールディングするとき

本文（日本語訳）

Expo Examples

expo/examples は、Expo の公式インテグレーションサンプル集（約70件）です。 各ディレクトリは with-<ライブラリ名>（例: with-stripe、with-maps）という命名規則に従い、1つのライブラリまたはサービスを中心に構成されています。

これらは完全なアプリではありません。ios/・android/ ディレクトリを持たない managed プロジェクトであり、ネイティブのセットアップは config plugin 経由で行います。典型的なサンプルは 1画面・100〜200行程度の規模です。 これらから学ぶべきは、インテグレーションの標準パターン — 依存パッケージの構成、app.json の config plugin 設定、そして Expo が現行 SDK に対してメンテナンスする最小限の配線 — であり、それをユーザーのアプリに応用します。アプリアーキテクチャをそのまま流用することは想定していません。

インテグレーションを手書きする前に、まず対応するサンプルを参照してください。 （full-stack・showcase・starter といった種別は ./references/catalog.md に記載されています。）

2つのモード

  1. インスピレーション / 適用（最も一般的）— ユーザーがすでにプロジェクトを持っている場合。対応するサンプルを見つけ、主要ファイルを読み、パターンをユーザーのコードに適用します。
  2. スキャフォールド — 新規プロジェクトの場合。サンプルからそのまま新しいプロジェクトを作成します。

ワークフロー

1. 適切なサンプルを探す

ユーザーのニーズをサンプル名にマッピングします（例: 決済 → with-stripe、認証 → with-clerk）。 ./references/catalog.md はカテゴリ別のスナップショットで素早いトリアージに役立ちますが、内容が古くなることがあるため、以下でライブリストを確認してください：

# ライブのサンプル名一覧:
gh api repos/expo/examples/contents --jq '.[] | select(.type=="dir" and (.name|startswith(".")|not)) | .name'
# エイリアス（リネームされたもの）＋非推奨（削除・移動済み）のサンプル — 推奨前に確認:
gh api repos/expo/examples/contents/meta.json --jq '.content' | base64 -d

meta.json は、リネームまたは廃止されたサンプルの正式な情報源です。 非推奨のサンプルはリポジトリのツリーからは削除されていますが、ここに引き続きリストされており、それぞれ message フィールドを持ちます。 deprecated マップに含まれているサンプルは推奨しないでください — message が示す現代的な方法に従ってください。 aliases に含まれている場合は destination に記載された名前を使用してください。

2a. インスピレーションモード — ユーザーのプロジェクトには触れず参照のみ行う

最も一般的なケースです。ユーザーがすでにアプリを持っており、Expo での実装方法を確認したい場合。 サンプルは参照用として読み、パターンを手動で適用します — ユーザーのプロジェクト上にサンプルをスキャフォールドしてはいけません。

まず、1回の呼び出しでサンプル全体のファイル一覧を取得します。 インテグレーションコードはネストされていることが多く（例: Stripe のサーバールートは app/api/ 以下にあります）、1階層のみのリストでは重要なファイルを見落とします：

gh api 'repos/expo/examples/git/trees/master?recursive=1' \
  --jq '.tree[].path | select(startswith("with-stripe/"))'

次に、重要度の高いファイルから順に読みます： README.md（セットアップ手順）→ package.json（依存関係）→ app.json（config plugin / パーミッション）→ マニフェストで確認したインテグレーションコード → .env（必要なシークレット）

各ファイルの取得方法：

gh api repos/expo/examples/contents/with-stripe/utils/stripe-server.ts --jq '.content' | base64 -d
# gh が使えない場合はRaw URL（ブランチは master）:
curl -s https://raw.githubusercontent.com/expo/examples/master/with-stripe/utils/stripe-server.ts

数ファイルを超える読み込みが必要な場合は？ インテグレーションがサーバールート・クライアントのプロバイダー・設定ファイルにまたがっている場合（Stripe がその例）、ファイルごとの呼び出しは避け、サンプル全体を**一時ディレクトリ（ユーザーのプロジェクト外 / .gitignore 対象）**に取得してから Grep/Read で自由に読み、その後手動で適用してください：

npx degit expo/examples/with-stripe /tmp/expo-ref/with-stripe   # クリーンなコピー（git 履歴なし）
# degit が使えない場合（sparse-checkout を利用し、約64MBのフルクローンを回避）:
git clone --depth 1 --filter=blob:none --sparse https://github.com/expo/examples.git /tmp/expo-ref/examples \
  && (cd /tmp/expo-ref/examples && git sparse-checkout set with-stripe)

そこから Grep/Read で読み進め、作業が終わったら一時ディレクトリを削除してください。

2b. スキャフォールドモード — サンプルから新規プロジェクトを作成する

npx create-expo --example with-stripe   # 短縮形: npx create-expo -e with-stripe
bun create expo --example with-stripe    # bun を使う場合

3. ユーザーのアプリへ非破壊的に適用する（重要）

ユーザーがすでにアプリを持っている場合、サンプルが導入する要素のみを追加し、既存のセットアップを上書きしないでください。

  • バージョンを合わせる — 固定バージョンをそのままコピーしない。 サンプルは最新の SDKに追従しているため、package.json の固定バージョンは古いプロジェクトと一致しません。 正確なバージョンをコピーするのではなく、不足している依存関係のみを npx expo install <pkg> で追加してください（SDK に適合したバージョンが自動解決されます）。
  • 設定はマージする — 置き換えない。 サンプルが導入する app.json / app.config.* の plugin とパーミッションのうち、ユーザーのプロジェクトにないものだけを追加し、既存の設定ブロックはそのまま保持してください。
  • インテグレーションコードを移植する。
  • .env のシェイプをもとに環境変数を再設定する — サンプルの .env はプレースホルダーであり、実際に動作するシークレットは含まれていません。

完了の定義： インテグレーションコードが移植され、それが必要とするすべての依存関係・config plugin・パーミッション・環境変数がユーザーのアプリで揃った状態。見た目だけ繋がっているように見える状態ではありません。

注意事項

  • デフォルトブランチは master であり、main ではありません（Raw URL や sparse checkout で重要です）。
  • ワンクリックデプロイ。 すべてのサンプルには起動用 URL があります: https://launch.expo.dev/?github=https://github.com/expo/examples/tree/master/<サンプル名>

関連スキル

  • Tailwind / NativeWind スタイリング → expo-tailwind-setup
  • ネイティブ UI コンポーネント → building-native-ui
  • ネイティブモジュールの作成 → expo-module
  • 最新 SDK のサンプルを使用する前に SDK をアップグレードする → upgrading-expo

リファレンス

  • ./references/catalog.md — 素早いトリアージのための、サンプルライブラリのカテゴリ別スナップショット。
原文（English）を表示

Expo Examples

expo/examples is Expo's official library of ~70 integration examples — directories named with-<library> (e.g. with-stripe, with-maps), each built around one library or service. These are not full apps: they're managed projects (no ios//android/ dirs — native setup is via config plugins), and the typical one is a single screen of ~100–200 lines. Mine them for the canonical integration pattern — the dependency set, app.json config plugins, and minimal wiring Expo maintains against the current SDK — and adapt that into the user's app. Don't expect to lift an application architecture from them.

Reach for an example before hand-rolling an integration. (Kinds — full-stack, showcases, starters — are noted in ./references/catalog.md.)

Two modes

  1. Inspiration / adapt (most common) — the user already has a project. Find the matching example, read its key files, and apply the pattern to their code.
  2. Scaffold — greenfield. Start a fresh project directly from the example.

Workflow

1. Find the right example

Map the user's need to an example name (e.g. payments → with-stripe, auth → with-clerk). ./references/catalog.md is a categorized snapshot for fast triage — but it drifts, so confirm against the live list:

# Live example names:
gh api repos/expo/examples/contents --jq '.[] | select(.type=="dir" and (.name|startswith(".")|not)) | .name'
# Aliases (renamed) + deprecated (dead/moved) examples — check before recommending:
gh api repos/expo/examples/contents/meta.json --jq '.content' | base64 -d

meta.json is the source of truth for what's renamed or dead (deprecated examples are removed from the repo tree but still listed here, each with a message). If an example is in its deprecated map, don't recommend it — follow the message to the modern path. If it's in aliases, use the destination.

2a. Inspiration mode — study without touching the user's project

The common case: the user already has an app and wants to see how Expo does something. Read the example as reference and apply the patterns by hand — never scaffold an example on top of their project.

First, list the whole example in one call. Integration code is often nested (e.g. Stripe's server routes live in app/api/), so a one-level listing misses the important files:

gh api 'repos/expo/examples/git/trees/master?recursive=1' \
  --jq '.tree[].path | select(startswith("with-stripe/"))'

Then read the high-signal files first: README.md (setup) → package.json (deps) → app.json (config plugins / permissions) → the integration code the manifest revealed → .env (required secrets). Per file:

gh api repos/expo/examples/contents/with-stripe/utils/stripe-server.ts --jq '.content' | base64 -d
# No gh? Raw URL (branch is master):
curl -s https://raw.githubusercontent.com/expo/examples/master/with-stripe/utils/stripe-server.ts

Reading more than a couple of files? Many integrations are spread across server routes, a client provider, and config (Stripe is). Skip the per-file calls — pull the whole example into a throwaway/gitignored dir (not the user's project) and read it freely with Grep/Read, then apply by hand:

npx degit expo/examples/with-stripe /tmp/expo-ref/with-stripe   # clean copy, no git history
# fallback without degit (sparse-checkout, no full ~64 MB clone):
git clone --depth 1 --filter=blob:none --sparse https://github.com/expo/examples.git /tmp/expo-ref/examples \
  && (cd /tmp/expo-ref/examples && git sparse-checkout set with-stripe)

Read from there with Grep/Read; delete the scratch dir when done.

2b. Scaffold mode — new project from an example

npx create-expo --example with-stripe   # short form:  npx create-expo -e with-stripe
bun create expo --example with-stripe    # with bun

3. Adapt into the user's app — non-destructively (critical)

When the user already has an app, add only what the example introduces; never overwrite their setup.

  • Version-align — don't copy pinned versions. Examples track the latest SDK, so their package.json pins won't match an older project. Add only the missing deps with npx expo install <pkg> (it resolves SDK-correct versions) instead of copying exact versions.
  • Merge config, don't replace it. Add only the app.json/app.config.* plugins and permissions the example introduces that the user lacks — keep their existing config block intact.
  • Port the integration code.
  • Recreate env vars from the example's .env shape — it holds placeholders, never working secrets.

Done when the integration code is ported and every dependency, config plugin, permission, and env var it needs is accounted for in the user's app — not when it merely looks wired up.

Gotchas

  • Default branch is master, not main (matters for raw URLs and sparse checkout).
  • Single-click deploy. Every example has a launch URL: https://launch.expo.dev/?github=https://github.com/expo/examples/tree/master/<example>.

Related skills

  • Tailwind / NativeWind styling → expo-tailwind-setup
  • Native UI components → building-native-ui
  • Authoring a native module → expo-module
  • Upgrade the SDK before adopting a latest-SDK example → upgrading-expo

References

  • ./references/catalog.md — categorized snapshot of the example library for fast triage.

原文・著作権は Anthropic および各プラグイン作者に帰属します。日本語訳は Claude API による自動翻訳です。