React Native + Expoでモバイルアプリ開発環境を作る【2026年版】

React Nativeモバイルアプリ開発メモ 第1回。

React Native + ExpoでAndroid / iOSアプリを作るときの開発環境を、次に同じことをするとき用に整理しておく。麻雀集計スマホアプリをReact/Vite版からReact Nativeへ移行したときに、Expo GoのSDK不一致、adbが見えない、エミュレーターと実機でlocalhostの意味が違う、Development Buildが古い、といったところで何度か詰まったので、そのときの内容も含める。

今回作る環境

基本構成は次のようにした。

  • React Native
  • Expo
  • TypeScript
  • Expo Router
  • Node.js LTS
  • VS Code
  • Android Studio / Android SDK
  • Android実機 + USBデバッグ
  • 必要に応じてAndroid Emulator
  • 本格開発ではDevelopment Build

React Native公式でも、新しいアプリではExpoのようなFrameworkを使う構成が案内されている。ExpoはReact Native本体に加えて、ルーティング、ネイティブAPI、ビルド周辺をまとめて扱いやすい。

2026年10月時点のExpo SDKについて

この記事を書いている2026年10月21日時点ではExpo SDK 58への移行期間になっている。Expo公式では、Development Buildなどを使う新しいプロジェクトはSDK 58を選べる一方、物理端末のExpo Goを使う場合はSDK 57を使う案内になっている。

npx create-expo-app@latest my-app --template default@sdk-58

SDKの状況は変わるので、ここは記事のコマンドをそのまま使うより、作成時にExpo公式のCreate a projectを確認した方がよい。

麻雀集計アプリでは最初SDK 56、その後SDK 57へ更新した。ExpoはSDKごとにReact Nativeや周辺パッケージの推奨バージョンが決まっているので、npmで個別に最新版へ上げるよりExpo側の整合性を優先する。

最初に入れておくもの

Node.js

Expo公式の要件はNode.js LTS。Node.jsはnvmなどで切り替えられるようにしておくと、別プロジェクトとの共存が楽。

node -v
npm -v

Git

git --version

VS Code

エディタはVS Codeを使用。React Native特有というより、TypeScript、ESLint、Git、ターミナルを同じ画面で扱えるのが便利。

Android Studio

Android Studioそのものを毎回IDEとして使う必要はないが、Android SDK、Platform Tools、Emulator、AVDの管理が簡単なので入れておく方が楽だった。

コマンドラインツールだけでも構築できるが、最初の環境作成ではAndroid Studioを使った方が設定箇所を把握しやすい。

ANDROID_HOMEとadbを確認する

React Native / ExpoでAndroid実機やエミュレーターを使う場合、adbがかなり重要になる。

Ubuntuで使っていた環境ではSDKは次の場所だった。

export ANDROID_HOME=$HOME/Android/Sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/platform-tools

設定後はシェルを読み直す。

source ~/.bashrc
adb version

WindowsではAndroid SDKのplatform-toolsは通常次の場所になる。

%LOCALAPPDATA%\Android\Sdk\platform-tools

PowerShellからadb --versionが通る状態にしておく。

Expoプロジェクトを作成する

新規作成はcreate-expo-appから始める。

npx create-expo-app@latest my-app
cd my-app
npx expo start

Metroが起動するとQRコードが表示される。Android Emulatorを起動している場合はターミナルでaを押して開ける。

npx expo start --android

以前のExpo CLIをグローバルインストールするより、プロジェクト側に合ったCLIをnpx expoで呼ぶ形にしておく。

Expo GoとDevelopment Buildの使い分け

用途 Expo Go Development Build
とりあえず画面を確認 ○ ○
ネイティブライブラリ追加 制限あり ○
独自app.json設定 制限あり ○
Deep Link / App Links 確認範囲に制限 ○
ストア公開前提の開発 △ ○

最初の確認だけならExpo Goは便利だが、麻雀集計アプリでは最終的にDevelopment Buildへ切り替えた。本格的なアプリではこちらを前提にした方がよかった。

Development Buildをローカルで作る場合の基本は次の流れ。

npx expo install expo-dev-client
npx expo run:android --device
npx expo start

ネイティブ依存やapp configを変更したときは、Development Build自体の再ビルドが必要になる場合がある。JavaScriptだけを変更したときは毎回ビルドし直す必要はない。

Android実機をUSBデバッグで使う

実機で確認する場合はAndroid側で開発者向けオプションとUSBデバッグを有効にする。

adb devices

正常なら次のようにdeviceと表示される。

List of devices attached
xxxxxxxxxxxx    device

麻雀集計アプリの環境構築では、最初adb devicesが空だったり、エミュレーターがofflineになったことがあった。

その場合はまずADBを再起動した。

adb kill-server
adb start-server
adb devices

エミュレーター側がofflineなら、ADBだけで直らずエミュレーターの再起動が必要なこともあった。

Android Emulatorを使う

Android StudioのDevice ManagerからAVDを作成しておく。GUIから起動してもよいし、CLIでも起動できる。

emulator -list-avds
emulator -avd Pixel_9

Wi-Fi経由の実機接続がWindowsファイアウォールの制約でうまくいかなかったときは、いったんエミュレーターへ切り替えて開発を進めた。ネットワーク問題とアプリ側の問題を切り分ける意味でも、実機とエミュレーターの両方を使える状態にしておくと便利。

ローカルAPIへ接続するときのlocalhostに注意

React NativeアプリからPC上のバックエンドAPIへ接続するときに、かなり分かりにくかったのがlocalhost。

実行場所 PC上のAPIへ接続する例
PCのブラウザ http://localhost:6080
Android Emulator http://10.0.2.2:6080
Android実機（LAN） http://PCのLAN内IP:6080
Android実機（USB + adb reverse） http://localhost:6080

USB接続なら、例えば次のようにポートを転送できる。

adb reverse tcp:8081 tcp:8081
adb reverse tcp:6080 tcp:6080

8081はMetro、6080は当時使っていた開発API。何をreverseしているか分からなくなった場合は次で確認する。

adb reverse --list
adb reverse --remove-all

Expo Doctorは早めに使う

Expoでは依存パッケージのバージョン整合性がかなり重要だった。環境を作ったら次を実行しておく。

npx expo-doctor
npx expo install --check

修正できるものは次でExpo SDKに合うバージョンへ揃える。

npx expo install --fix

麻雀集計アプリではnpx expo doctorを実行したところ「local CLIでは非対応なのでnpx expo-doctorを使う」というメッセージが出た。現在のExpo公式でもコマンドはnpx expo-doctorになっている。

また、expo、expo-router、react-nativeなどを個別に適当に上げるとpeer dependencyが崩れることがあった。Expoプロジェクトでは「最新版か」だけでなく「そのSDKの推奨版か」を見る。

実際に遭遇したトラブル

1. Expo Goで「Project is incompatible」

麻雀集計アプリをExpo SDK 56で作っていたとき、端末側のExpo GoとSDKが合わず、次のエラーになった。

Project is incompatible with this version of Expo Go

まずpackage.jsonのexpoバージョンを確認し、npx expo-doctorとnpx expo install --fixで依存関係を確認する。Expo Goの対応SDKを合わせる方法もあるが、実運用するアプリならDevelopment Buildへ移る方が自由度が高い。

2. Expo Goを開こうとしてHomeActivityがない

Android Emulatorで次のエラーになったこともあった。

Error type 3
host.exp.exponent/.experience.HomeActivity does not exist

Expo Goが入っていない、古い、壊れている、といった状態を疑う。確認には次を使った。

adb shell pm list packages | grep exponent

必要に応じてExpo Goを入れ直し、Metroのキャッシュもクリアした。

adb uninstall host.exp.exponent
npx expo start -c

3. MetroでtransformFileエラー

依存関係を変更したあと、Expo Routerのbundle時にMetro側でtransformFile関連のエラーが出たことがある。

まずキャッシュクリアを試した。

npx expo start -c

それでも直らない場合はnode_modulesとlockファイルの整合性も確認する。Expo SDK更新の直後は、単なるソースコードの問題ではなく依存バージョンが原因のことがある。

4. Development Buildのpackage名が合っていない

Development Build起動時に、PC側が探しているpackageと実機に入っているdevelopment版packageが違い、次のような状態になった。

No development build (...) for this project is installed

麻雀集計アプリでは開発版と本番版でpackageを分けていたので、APP_VARIANTなどの環境変数が正しく読み込まれているか確認した。

npx expo config --type public

app config上のpackage名と、端末に入っているDevelopment Buildが一致しているかを見る。

5. JavaScript側だけ新しくしてDevelopment Buildが古い

SDK更新やネイティブ依存の更新後に、node_modules側と端末に入っているDevelopment Build側でネイティブモジュールのバージョンがずれたこともあった。

この場合はMetroの再起動だけでは直らない。ネイティブ依存を更新したらDevelopment Build自体を作り直す。

6. Wi-Fi実機接続が通らない

PCとスマホが同じWi-Fiにいても、ファイアウォールやネットワーク設定でMetroへ到達できないことがある。麻雀集計アプリのWindows環境ではここで詰まり、いったんエミュレーターへ切り替えた。

アプリの問題かネットワークの問題かを切り分けるため、USBデバッグ + adb、Android Emulator、必要ならExpoのTunnelを使い分ける。

ローカルEAS Buildは最初から必須にしない

EAS Buildにはクラウドビルドとローカルビルドがあるが、環境構築の段階ではローカルEAS Buildまで必須にしなくてもよい。

麻雀集計アプリでは後からeas build --localも試したが、Gradle、Java、Node.jsが同時に動いてメモリ負荷が大きくなった。Development Buildの確認はまずnpx expo run:androidかクラウドEASで進めた方が構成を単純にできる。

最初に確認するコマンド一覧

node -v
npm -v
git --version
adb version
adb devices

npx expo --version
npx expo-doctor
npx expo install --check

npx expo start

ここまで正常なら、React Native / Expoのコードを書き始められる状態と考えてよい。

今ならこの順番で環境を作る

  1. Node.js LTS、Git、VS Codeを入れる
  2. Android StudioでSDK / Platform Tools / Emulatorを入れる
  3. adb versionを確認する
  4. create-expo-appでプロジェクト作成
  5. npx expo-doctorで整合性確認
  6. まずAndroid EmulatorまたはExpo Goで最低限起動
  7. 本格開発に入る前にDevelopment Buildを作る
  8. Android実機をUSBデバッグで接続
  9. ローカルAPIを使うならlocalhost / 10.0.2.2 / adb reverseを整理
  10. ネイティブ依存を変更したらDevelopment Buildを再作成

最初はExpo Goだけで進めたくなるが、ストア公開するアプリなら早めにDevelopment Buildへ移った方が、後からネイティブ設定の差で詰まりにくい。

関連記事

既存WebアプリをReact Native化したときの全体的な考え方は、React/ViteのWebアプリをReact Native化した記録にまとめている。

Deep LinkとAndroid App Linksは、ExpoでDeep Link / Android App Linksを設定した方法に分けている。

実機を使ったE2Eテストは、麻雀集計スマホアプリへのMaestro導入メモを参照。

公式ドキュメント

最終更新：2026年10月21日

タイトルとURLをコピーしました