Contents
開発環境の準備
React Native と Expo で本格的に開発を始めるには、ローカルマシンに最低限必要なツールを揃えることが前提です。ここでは Node.js LTS・パッケージマネージャ・ファイル監視ツール（macOS の watchman と Windows での代替手段）・バージョン管理システム Git のインストール方法を解説します。すべてのコマンドはターミナル（PowerShell、Git Bash など）で実行してください。
Node.js LTS とパッケージマネージャ
Node.js は JavaScript 実行環境だけでなく、npm が自動的に同梱されます。nvm を使って最新の LTS バージョンを取得すると、将来のアップデートにも柔軟に対応できます。
|
1 2 3 4 5 6 7 |
# nvm がインストール済みの場合（macOS / Linux） nvm install --lts # 最新 LTS 系列をダウンロード nvm use --lts # そのバージョンを有効化 node -v # 例: v20.12.0 # Windows ユーザーは nvm-windows を利用するか、公式インストーラから直接取得してください。 |
npm がすでに入っているので、追加でインストールが必要な場合は Yarn など好みのパッケージマネージャをグローバルにインストールします。
|
1 2 3 |
npm install -g yarn # Yarn のバージョン確認 yarn -v # 例: 1.22.19 |
ポイント：Node と npm が PATH に通っていれば、後続の
expo・easコマンドはすべてローカルから実行できます。
watchman と Windows での代替手段
macOS ではファイル変更を高速に検知できる watchman が推奨されます。Homebrew がインストール済みなら次のコマンドで導入できます。
|
1 2 3 |
brew install watchman watchman version # 例: 5.0.0 |
Windows 環境では watchman が公式にサポートされていないため、以下の代替手段が一般的です。
| 方法 | 説明 |
|---|---|
| Metro の標準監視 | Expo の開発サーバ（Metro）は OS 標準のファイル監視機能を使用するので、特別なツールは不要です。 |
| chokidar-cli | npm i -g chokidar-cli でインストールし、chokidar "**/*.js" のように手動で監視スクリプトを走らせることができます。 |
| WSL + watchman | Windows Subsystem for Linux (WSL) 上で Linux 用 watchman をビルド・実行する方法もありますが、セットアップコストが高めです。 |
開発中にファイル変更が反映されないときは、まず Metro のキャッシュクリア（expo start -c）を試してください。
Git のインストール
Git はコードのバージョン管理だけでなく、Expo Application Services（EAS）ビルド時の認証にも利用されます。公式サイトから OS に合わせたインストーラをダウンロードし、インストール後にバージョンを確認しましょう。
|
1 2 |
git --version # 例: git version 2.45.0 |
初回設定としてユーザー名とメールアドレスを登録しておくと、コミット時に毎回入力する手間が省けます。
|
1 2 3 |
git config --global user.name "Your Name" git config --global user.email "you@example.com" |
Expo CLI の導入とプロジェクト作成
Expo CLI は Expo プラットフォーム全体を操作するコマンドラインツールです。この記事執筆時点での 最新安定版 をインストールし、TypeScript テンプレートからプロジェクトを生成します。
expo-cli のインストール方法
グローバルにインストールすると expo コマンドが常に利用可能です。バージョンは実行時に自動で取得できるので、将来のリリースに合わせて手動更新する必要はありません。
|
1 2 3 4 |
npm i -g expo-cli # グローバルインストール expo --version # 現在利用可能な最新バージョンを表示 # 例: 9.5.0 （執筆時点） |
もしグローバルインストールを避けたい場合は、npx expo を使って一時的に実行できます。
|
1 2 |
npx expo --version # npx 経由でバージョン確認 |
プロジェクトの初期化
以下のコマンドで blank‑typescript テンプレートをベースにしたプロジェクトを作成します。--npm オプションは Yarn を使用する場合は --yarn に置き換えてください。
|
1 2 3 4 |
expo init my-app \ --template blank-typescript \ --npm |
生成されるディレクトリ構造の概要です。
|
1 2 3 4 5 6 7 8 |
my-app/ ├─ .gitignore ├─ app.config.ts # Expo 設定ファイル（TS） ├─ src/ │ └─ App.tsx # エントリーポイント ├─ package.json └─ tsconfig.json |
ポイント：TypeScript テンプレートは型情報が充実しているため、コード補完とエラーチェックが開発効率を大幅に向上させます。
設定ファイルと環境変数管理
Expo SDK のバージョンが上がるたびに設定方法も進化しています。現在（執筆時点）推奨されている app.config.ts と .env ファイルの組み合わせで、開発・ステージング・本番環境をシームレスに切り替える手順をご紹介します。
app.config.ts の基本構成
app.config.ts は TypeScript で記述できるため、IDE の型補完が利用できます。以下は最小限の必須項目と OTA（Over‑the‑Air）アップデート設定例です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
import { ExpoConfig, ConfigContext } from '@expo/config'; import 'dotenv/config'; // .env の読み込み export default ({ config }: ConfigContext): ExpoConfig => ({ ...config, name: "MyExpoApp", slug: "my-expo-app", version: "1.0.0", sdkVersion: "50.0.0", // 現在の SDK バージョン runtimeVersion: { policy: "sdkVersion", // OTA 更新時に使用 }, updates: { fallbackToCacheTimeout: 0, url: process.env.EXPO_UPDATES_URL ?? "https://u.expo.dev/your-project-id", }, assetBundlePatterns: ["**/*"], ios: { bundleIdentifier: "com.example.myexpoapp" }, android: { package: "com.example.myexpoapp" }, extra: { API_BASE_URL: process.env.API_BASE_URL, }, }); |
runtimeVersionとupdates.urlは OTA 更新に必須です。extraフィールドに環境変数を渡すことで、アプリ内部から安全に参照できます。
.env と dotenv の活用例
- dotenv のインストール（開発依存）
bash
npm i -D dotenv
- .env ファイル作成（プロジェクトルート）
dotenv
API_BASE_URL=https://api.example.com/v1
EXPO_UPDATES_URL=https://u.expo.dev/abcd1234
- コード側で参照する
app.config.ts の extra に設定した変数は、ランタイムでは expo-constants から取得できます。
tsx
// src/constants.ts
import Constants from 'expo-constants';
export const API_BASE_URL = Constants.manifest?.extra?.API_BASE_URL ?? '';
ポイント：
.envはリポジトリにコミットしないよう.gitignoreに追加し、CI 環境ではシークレットストアや GitHub Actions のsecrets機能で注入してください。
必要なライブラリの追加と実機テスト
Expo のマネージドワークフローはほぼすべてのネイティブモジュールを自動リンクします。そのため、追加したいパッケージを npm i（または yarn add）するだけで完了します。ここでは画面遷移とジェスチャー処理に必要な代表的ライブラリを例示し、実機テストの流れも併せて解説します。
推奨ライブラリ一覧
| パッケージ | 用途 | インストールコマンド |
|---|---|---|
react-native-gesture-handler |
タッチジェスチャー全般 | npm i react-native-gesture-handler |
@react-navigation/native |
画面遷移のコア | npm i @react-navigation/native |
@react-navigation/native-stack |
スタックナビゲーション（iOS/Android 両方） | npm i @react-navigation/native-stack |
expo-status-bar |
ステータスバー制御（Expo 推奨） | npx expo install expo-status-bar |
インストール例
|
1 2 3 |
npm i react-native-gesture-handler @react-navigation/native @react-navigation/native-stack npx expo install expo-status-bar # Expo の推奨パッケージは expo install を使用 |
Expo Go での実機テスト手順
- 開発サーバを起動
bash
cd my-app
expo start # Metro バンドラが立ち上がります
- QR コードをスキャン
- iOS：iPhone のカメラまたは Expo Go アプリで QR を読み取る。
-
Android：Google カメラ、または Expo Go で同様にスキャン。
-
動作確認ポイント
-
アプリが起動し
App.tsxの内容が画面に表示されるか。 - ナビゲーションボタンやスクロールジェスチャーが期待通りに機能するか。
- ソースコードを保存した瞬間に自動リロード（Hot Reload）が走るか。
ポイント：Expo Go は開発サーバへリアルタイムで接続するため、ビルド不要ですぐにデバイス上で確認できます。
EAS Build のセットアップと本番ビルド
実機テストだけでは配布できません。App Store や Google Play に提出可能な スタンドアロン バイナリを作るには、Expo Application Services（EAS）Build を利用します。
eas-cli のインストールと認証
|
1 2 3 4 5 |
npm i -g eas-cli # グローバルにインストール eas --version # 現在のバージョン確認（例: 3.14.0） eas login # Expo アカウントでサインイン # 二段階認証が有効化されている場合は、指示に従ってコードを入力してください。 |
注意：
npm view eas-cli versionコマンドで最新バージョンを随時確認すると、将来のリリースでも同様に手順を踏めます。
ビルドコマンドと成果物取得
| プラットフォーム | 実行例 | 主なオプション |
|---|---|---|
| Android (APK) | eas build --platform android |
--profile preview でテストビルド、--local でローカルビルド（Android Studio 必要） |
| iOS (IPA) | eas build --platform ios --profile production |
TestFlight に直接アップロードする場合は --auto-submit を付与 |
ビルドが開始するとターミナルに Build ID とプレビュー URL が表示されます。完了後は次のコマンドでアーティファクトをダウンロードできます。
|
1 2 |
eas view <BUILD_ID> # ブラウザで結果ページを開く |
証明書・プロビジョニングプロファイル管理
iOS ビルドでは Apple Distribution Certificate と App Store Connect のプロビジョニングプロファイル が必要です。EAS CLI は対話式に証明書の作成／アップロードをサポートしています。
|
1 2 |
eas credentials --platform ios # 証明書とプロファイルの一覧・新規作成 |
Android の場合は Google Play Console に登録したサービスアカウントキー（JSON）を eas secret:create で管理し、ビルド時に自動的に署名します。
よくあるエラーと対処例
| エラーメッセージ | 発生原因 | 推奨対策 |
|---|---|---|
expo-cli version mismatch |
グローバルに古い expo-cli が残っている | npm uninstall -g expo-cli && npm i -g expo-cli@latest |
Missing Apple Distribution Certificate |
iOS ビルド時に証明書が未登録 | eas credentials --platform ios から新規作成または既存証明書をアップロード |
Failed to install watchman (macOS) |
Homebrew が古い、もしくは Xcode Command Line Tools 未インストール | brew update && brew upgrade watchman と xcode-select --install を実行 |
EAS build failed: Android SDK not found |
ローカルで Android ビルドを選択したが SDK が未設定 | Android Studio のインストールと ANDROID_SDK_ROOT 環境変数の設定を確認 |
ポイント：エラーメッセージはほぼ自動的に解決策へのリンクやヒントを出すので、まずは提示されたコマンドを実行し、バージョン不整合が残っていないかだけでもチェックすると多くの問題が回避できます。
CI/CD とリポジトリ初期化
チームで開発する際は GitHub などのリモートリポジトリにコードを置き、CI（GitHub Actions 等）で自動ビルドさせると作業効率が格段に上がります。
GitHub リポジトリ作成手順
|
1 2 3 4 5 |
git init # ローカルリポジトリ初期化 git add . git commit -m "Initial commit – Expo SDK 50 + TypeScript" gh repo create my-expo-app --public --source=. --push # GitHub CLI がインストールされている場合 |
.github/workflows/eas-build.yml の雛形は公式ドキュメントにありますが、最小構成は次のとおりです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
name: EAS Build on: push: branches: [ main ] jobs: build: runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 - name: Setup Node uses: actions/setup-node@v3 with: node-version: '20' - run: npm ci - run: npx eas-cli login --token ${{ secrets.EAS_TOKEN }} - run: eas build --platform all --non-interactive |
README に入れるべき情報（例）
|
1 2 3 4 5 6 7 8 9 10 11 |
# MyExpoApp ## Overview React Native + Expo (SDK 50) のサンプルアプリです。TypeScript と dotenv を使用し、環境ごとの API エンドポイントを切り替えられます。 ## Setup ```bash npm i -g expo-cli eas-cli npx expo install cp .env.example .env # 必要に応じて編集 |
Development
|
1 2 3 4 |
expo start # Expo Go で実機テスト eas build --platform android # Android ビルド（プレビュー用） eas build --platform ios --profile production # iOS 本番ビルド |
CI/CD
GitHub Actions が eas build を自動実行します。シークレットはリポジトリ設定で EAS_TOKEN として登録してください。
Contributing
- Fork → ブランチ作成
- 変更後に
npm run lint && npm testが成功することを確認 - Pull Request を送る
License
MIT
`
ポイント：README に「EAS ビルドの無料クレジット利用方法」や「環境変数の管理手順」を明記すると、共同開発者がスムーズにセットアップできます。
まとめ
- Node.js LTS と Git をインストールし、macOS では watchman、Windows では Metro 標準監視か chokidar‑cli を利用する。
- expo-cli（最新） →
expo initで TypeScript テンプレートを作成。 - app.config.ts + .env で環境ごとの設定をコード変更なしで切り替える。
- 必要なライブラリを追加し、Expo Go で即時実機テスト。
- eas-cli を使ってスタンドアロンビルドを作成し、証明書・プロファイル管理に注意する。
- GitHub リポジトリと CI（GitHub Actions）を整備すれば、プッシュごとに自動ビルドが走り、本番提出までのフローが完成します。
この手順に沿って環境構築すれば、初心者でも安全かつ高速に React Native + Expo アプリ開発を開始できるはずです。ぜひ実践してみてください。