必要要件
プロンプトをきれいに取り込む前にプロジェクトに必要なもの、何もない場合のスキャフォールド方法。
プロジェクトに必要なもの
あえて非常に少なくしています。デザインはそれぞれ独立していて、テーマから読み込むのではなく独自の色、余白、タイプを持っているため、先にインストールすべきデザインシステムはありません。
| 要件 | 理由 |
|---|---|
| Expo SDK 52以降 | 各デザインがテストされているバージョンです。古いSDKでも動く場合がありますが、確認はしていません。 |
| TypeScript | すべてのデザインは.tsxとして提供されます。JavaScriptプロジェクトでは型を手動で取り除く必要があります。 |
| AIコーディングエージェント | Claude Code、Cursor、Windsurf、または貼り付けたプロンプトを受け付けるもの。 |
まだプロジェクトがない場合
プロンプトが代わりにスキャフォールドしてくれますが、お好みで先に作成することもできます。
npx create-expo-app@latest my-app --template blank-typescript
cd my-app
npx expo startプロンプトがインストールするもの
各デザインは実際にインポートしているものだけを宣言し、プロンプトはnpm installではなくnpx expo installを使うため、最新版ではなくあなたのSDKに合ったバージョンが入ります。どのデザインについても、そのページの「含まれるもの」に完全な一覧があります。
- ほぼすべてがモーションにReanimated、セーフエリアにsafe-area-contextを使用します。
- アイコンはPhosphor、画像はexpo-imageから提供されます。
- フォントはExpo Google Fontsパッケージから提供され、アプリのルートで一度だけ読み込まれます。
Reanimatedには設定が1行必要です
そのBabelプラグインはbabel.config.jsのplugins配列の最後に置く必要があります。貼り付け後にアニメーションが何も動かない場合、ほぼ間違いなくこれが原因です。対処法はトラブルシューティングにあります。