はじめに
この記事では、Windows環境でReact Native + Expoのプロジェクトを作成し、iPhoneの実機で初期画面を確認するまでの手順を説明します。
この記事は、2026年7月31日時点の情報を基に作成しています。Expo SDKやExpo Goの対応状況は今後変更される可能性があります。
ExpoとExpo Goについて
Expo
Expoは、React Nativeアプリの開発を効率化するためのツールです。
React Nativeプロジェクトの作成、アプリの実行、ビルドなど、モバイルアプリ開発に必要な機能を提供しています。
この記事では、Expoが提供するcreate-expo-appを使ってプロジェクトを作成します。
Expo Go
Expo Goは、開発中のReact Nativeアプリをスマートフォン上で手軽に確認するためのアプリです。
PCでExpoの開発用サーバーを起動し、表示されたQRコードをiPhoneで読み取ることで、作成中のアプリを実機上で確認できます。
Expo Goは初期学習や簡単な動作確認に便利です。
一方、Expo Goに含まれていないネイティブライブラリや、アプリ固有のネイティブ設定が必要になった場合は、Development Buildへ移行します。
前提環境
今回使用する環境は次のとおりです。
OS：Windows 11
ターミナル：PowerShell
エディター：Visual Studio Code
Node.js：v22.20.0
開発端末：iPhone
実機確認用アプリ：Expo Go
この記事ではVisual Studio Codeを使用しますが、他のコードエディターでも作業できます。
1. Node.jsとnpmを確認する
PowerShellを開き、次のコマンドを実行します。
node -v
npm -v
それぞれのバージョンが表示されれば、Node.jsとnpmを利用できます。
実行例です。
v22.20.0
10.x.x
コマンドが認識されない場合は、Node.jsのLTS版をインストールしてください。
2. プロジェクト用フォルダを作成する
今回は、デスクトップにexpo-sample-appというサンプル用フォルダを作成します。
PowerShellで次を実行します。
cd C:\Users\ユーザー名\Desktop
mkdir expo-sample-app
cd expo-sample-app
ユーザー名は、実際のWindowsユーザー名に変更してください。
念のため、プロジェクトを作成する前に、フォルダ内が空であることを確認します。
Get-ChildItem -Force
何も表示されなければ、空のフォルダです。
3. プロジェクトを作成する
作成済みの空フォルダ内にプロジェクトを作るため、プロジェクト名には.を指定します。
npx create-expo-app@latest . --template default@sdk-54
.は「現在のフォルダ」を表します。
--template default@sdk-54は、Expo SDK 54の標準テンプレートを指定するオプションです。
POINT：Expo SDK 54を使用する理由
Expo SDKの最新版は57ですが、現時点では、SDK 57のプロジェクトをiPhone版Expo Goで開くことはできません。
そのため、Expo公式の案内に従い、実機確認にはSDK 54を使用します。
プロジェクトの作成と依存パッケージのインストールには、数分かかることがあります。
処理が完了すると、現在のフォルダ内にpackage.json、app、assetsなどのファイルやフォルダが作成されます。
続いて、インストールされたExpoのバージョンを確認します。
npm list expo
次のように54系のバージョンが表示されれば、SDK 54のプロジェクトです。
expo@54.x.x
依存関係や設定に問題がないかも確認します。
npx expo-doctor
expo-doctorは、Expoプロジェクトの設定や依存関係を診断するためのコマンドです。
エラーが表示された場合は、そのまま進めず、表示された内容を確認してください。
問題がない場合は、次のような結果が表示されます。
18/18 checks passed. No issues detected!
4. Expoを起動する
次のコマンドを実行します。
npx expo start
Metro Bundlerが起動し、PowerShell上にQRコードが表示されます。
次のような情報も表示されます。
Starting Metro Bundler
› Metro waiting on exp://192.168.x.x:8081
› Scan the QR code above with Expo Go (Android) or the Camera app (iOS)
› Web is waiting on http://localhost:8081
Metro Bundlerは、React NativeのJavaScriptやTypeScriptコードをまとめ、スマートフォンへ配信する開発用の仕組みです。
アプリを確認している間は、このPowerShellを閉じないでください。
Expoを終了するときは、次のキーを押します。
Ctrl + C
5. iPhoneへExpo Goをインストールする
iPhoneのApp Storeを開き、Expo Goを検索してインストールします。
PCとiPhoneは、同じWi-Fiへ接続しておきます。
Expo Goを起動し、画面の案内に従って初期設定を進めます。
今回のローカル動作確認では、EAS Buildなどのクラウドビルド設定までは行いません。
6. QRコードからiPhoneで開く
PowerShellに表示されたQRコードを、iPhoneの標準カメラで読み取ります。
QRコードを読み取ると、Expo Goで開くための通知が表示されます。通知をタップしてExpo Goを起動します。
Expoの初期画面が表示されれば、実機接続は成功です。
接続できない場合は、次を確認してください。
- PCとiPhoneが同じWi-Fiに接続されている
- PowerShellで
npx expo startが起動したままになっている - WindowsファイアウォールでNode.jsの通信が拒否されていない
- PowerShellに表示された
Starting project at ...が対象プロジェクトのパスになっている - 別のExpoプロジェクトやMetro Bundlerが起動したままになっていない
起動中のプロジェクトは、PowerShellに表示される次の行で確認できます。
Starting project at C:\Users\ユーザー名\Desktop\expo-sample-app
7. 初期画面の文字を変更する
作成したexpo-sample-appフォルダをVisual Studio Codeで開きます。
今回作成したプロジェクトでは、初期画面は次のファイルにあります。
app/(tabs)/index.tsx
ファイルが見つからない場合は、Visual Studio Codeの全体検索で次の文字列を検索してください。
Welcome!
次のような記述があります。
<ThemedText type="title">Welcome!</ThemedText>
どのプロジェクトを開いているか分かるように、表示を変更します。
<ThemedText type="title">expo-sample-app</ThemedText>
ファイルを保存します。
8. 変更をiPhoneへ反映する
ファイルを保存するとiPhone側へ変更が自動的に反映されます。
次の表示へ変われば、ソースコードの変更がiPhoneへ反映されています。
変更がうまく反映されない場合は、iPhoneを振ってExpo Goの開発メニューを開き、Reloadを実行してください。
SDKの互換性エラーについて
次のようなエラーが表示された場合は、プロジェクトのExpo SDKと、iPhoneにインストールされているExpo Goの対応バージョンが一致していない可能性があります。
まず、プロジェクトで使用しているExpo SDKを確認します。
npm list expo
この記事の手順では、次のように54系のバージョンが表示されることを確認してください。
expo@54.x.x
この記事の執筆時点では、SDK 57のプロジェクトをiPhone版Expo Goで開こうとすると、この互換性エラーが表示されます。
まとめ
Windows環境でReact Native + Expoのプロジェクトを作成し、iPhoneのExpo Goで動作確認できました。
今回の主なコマンドは次のとおりです。
cd C:\Users\ユーザー名\Desktop
mkdir expo-sample-app
cd expo-sample-app
npx create-expo-app@latest . --template default@sdk-54
npm list expo
npx expo-doctor
npx expo start
PowerShellに表示されたQRコードをiPhoneで読み取り、Expoの初期画面が表示されれば、最初の環境構築は完了です。
今回は、iPhone版Expo Goで簡単に実機確認するため、Expo SDK 54を使用しました。
今後、認証、通知、課金、音声、ディープリンクなどのネイティブ機能を本格的に実装する場合は、新しいExpo SDKへの更新とDevelopment Buildへの移行を検討します。
参考資料
この記事の内容は、次のExpo公式ドキュメントを参考にしています。
-
Create a project
create-expo-appによるプロジェクト作成方法と、SDK 54／57の使い分けに関する案内 -
create-expo-app
create-expo-appの概要、テンプレート指定、コマンドオプション -
Create your first app
Node.js、コードエディター、ターミナル、Expo Goなどの前提環境 -
Introduction to development builds
Expo GoとDevelopment Buildの違い、Development Buildを利用する目的 -
Development builds FAQ
Expo GoのSDK互換性と、iPhoneで利用できるExpo Goの制約