クイックスタート（Expo）

新規プロジェクトを作って実機/エミュレータで動かす最短ルート。Expo Go で始めて、必要になったら Dev Build に切り替えるのが定石。

準備

• Node.js（LTS 推奨。v20+）
• Expo Go アプリ — iOS / Android のストアからインストール（実機確認用）
• Xcode（iOS シミュレータ。Mac のみ）
• Android Studio（Android エミュレータ。任意）

1. プロジェクト作成

# TypeScript + Expo Router の標準テンプレート
npx create-expo-app@latest my-app

cd my-app
npx expo start

起動すると QR コードがターミナルに出る。Expo Go アプリで読むと実機で動く。 同じ Wi-Fi に繋がっていることが必要（PC とスマホ）。

起動オプション

• i — iOS シミュレータで開く（Mac）
• a — Android エミュレータで開く
• w — Web で開く
• r — リロード
• m — 開発メニュー

2. プロジェクト構造

my-app/
├── app/                    ← 画面（Expo Router）
│   ├── _layout.tsx           - 全画面共通レイアウト
│   ├── index.tsx             - "/"
│   └── (tabs)/               - タブグループ
│       ├── _layout.tsx
│       ├── index.tsx         - "/"
│       └── explore.tsx       - "/explore"
├── components/             ← 再利用コンポーネント
├── constants/              ← 色などの定数
├── assets/                 ← 画像・フォント
├── app.json                ← Expo の設定
├── package.json
└── tsconfig.json

画面は app/ 配下のファイルパスがそのまま URL/ルートになる（Expo Router）。 詳しくは ナビゲーション。

3. app.json の中身

Expo プロジェクトの設定。表示名・スキーム・アイコン・スプラッシュ・iOS/Android の固有設定がここ。

{
  "expo": {
    "name": "My App",
    "slug": "my-app",
    "version": "1.0.0",
    "scheme": "myapp",
    "icon": "./assets/icon.png",
    "splash": { "image": "./assets/splash.png", "backgroundColor": "#fff" },
    "ios": {
      "bundleIdentifier": "com.example.myapp",
      "supportsTablet": true
    },
    "android": {
      "package": "com.example.myapp",
      "adaptiveIcon": {
        "foregroundImage": "./assets/adaptive-icon.png",
        "backgroundColor": "#ffffff"
      }
    },
    "plugins": [
      "expo-router",
      ["expo-image-picker", { "photosPermission": "写真へのアクセスを許可してください" }]
    ]
  }
}

4. Expo Go vs Dev Build

最初の選択。Expo Go は「Expo SDK に含まれるモジュールだけが使える共通アプリ」、Dev Buildはそのプロジェクト専用にビルドされた開発用アプリ。

判断基準: 追加で react-native-* ネイティブモジュールを入れたくなった瞬間に Dev Build に移行。 Expo SDK だけで足りているなら Expo Go のままで OK。

Dev Build の作り方（後述の EAS でも詳しく）

npm install -g eas-cli
eas login
eas build:configure         # eas.json を作る
eas build --profile development --platform ios     # iOS 開発ビルド
eas build --profile development --platform android # Android 開発ビルド

5. ホットリロード（Fast Refresh）

• ファイル保存で自動的に画面が更新される
• state は維持される（コンポーネントを書き換えても、開いていた画面の状態が残る）
• 大きく壊れた時はターミナルで r、または開発メニューから "Reload"
• キャッシュ問題っぽい時は npx expo start --clear

6. デバッグ

• 開発メニュー: 実機を振る / iOS シミュレータで Cmd+D / Android で Cmd+M。
• JS デバッガ: 開発メニュー → "Open JS Debugger"。Chrome で開ける。
• React DevTools: npx react-devtools 別ターミナルで起動。
• Element Inspector: タップで要素を選択。
• Performance Monitor: フレームレート確認。

7. 既存パッケージを足す

Expo SDK のものは expo install、それ以外は npm install。

# Expo SDK モジュール（バージョン互換が自動で揃う）
npx expo install expo-image expo-camera expo-location

# 通常の npm パッケージ
npm install zustand @tanstack/react-query

# ネイティブモジュール（Dev Build が必要になる場合あり）
npx expo install react-native-mmkv  # expo install で自動的に prebuild 実行

expo install を使う理由: その Expo SDK バージョンと互換のパッケージバージョンを自動選択してくれる。 単に npm install expo-camera すると最新が入って互換性が崩れることがある。

8. プラットフォーム固有のコード

iOS / Android で挙動を変えたい時:

import { Platform } from "react-native"

const padding = Platform.OS === "ios" ? 20 : 16

// プラットフォーム別ファイル: Foo.ios.tsx / Foo.android.tsx を作ると自動で選択される
import Foo from "./Foo" // 拡張子なしで OK

9. Web 出力（オプション）

npx expo start --web または w で Web ビルドが見られる。Expo Router は Web もサポート。 ただし使っているネイティブ専用モジュールは Web で動かない。

よくあるトラブル

• Metro bundler が固まった: npx expo start --clear
• iOS シミュレータが起動しない: Xcode を1度起動して受諾。open -a Simulator
• Expo Go で開かない（Wi-Fi 違う）: 同じ Wi-Fi、または USB 接続でトンネルモード --tunnel
• 「ネイティブモジュールが見つからない」: そのライブラリは Expo Go では使えない → Dev Build へ
• Android ビルドが激重: Gradle のキャッシュを ./android/gradlew --stop でリセット