【React Native入門】WindowsのWSLで起動したExpoアプリをiPhone実機で確認する方法

はじめに

React Nativeでスマートフォンアプリを開発するときは、Expoを利用すると、作成中のアプリをiPhoneやAndroidの実機で簡単に確認できます。

通常は、Expoの開発サーバーに表示されたQRコードをスマートフォンで読み取ることで、Expo Goからアプリを起動できます。

しかし、Windows 11のWSL（Windows Subsystem for Linux）上でExpoの開発サーバーを起動している場合、WSLのネットワーク構成やWindows Defenderファイアウォールの影響により、iPhoneから接続できないことがあります。

この記事では、次の手順を解説します。

  • WSL上でExpoプロジェクトを作成する
  • 必要最小限のBlankテンプレートを使用する
  • Expo SDK 54を指定する
  • Webブラウザでアプリの起動を確認する
  • Tunnel接続を使ってiPhoneのExpo Goから実機確認する

今回の開発環境

今回使用する環境は次のとおりです。

  • Windows 11
  • WSL
  • Ubuntu
  • Node.js
  • npm
  • Visual Studio Code
  • React Native
  • Expo
  • Expo SDK 54
  • iPhone Expo Go

Node.jsやVisual Studio Codeのインストールについては、以下の記事を参考にしてください。

React Native入門｜Expoでサンプルアプリを作成して実機確認する方法
React Nativeとは？React Nativeは、JavaScriptまたはTypeScriptを使って、iOS・Android向けのモバイルアプリを開発できるオープンソースのフレームワークです。本記事では、React Native…
absolute-solutions.jp

Expo Goが対応するSDKバージョンを確認する

Expoを使用する場合は、作成するプロジェクトのExpo SDKと、スマートフォンにインストールされているExpo Goが対応するSDKを合わせる必要があります。

2026年8月時点では、最新版のcreate-expo-appでExpo SDK 57を選択できます。一方、App StoreおよびGoogle Playで配布されているExpo Goは、学習用途ではExpo SDK 54に対応しています。

そのため、この記事ではExpo SDK 54を指定してプロジェクトを作成します。

Expo Goで対応していないSDKのプロジェクトを開こうとすると、次のようなSDKの互換性に関するエラーが表示される場合があります。

  • ロジェクトのSDKが新しすぎる
  • Expo GoがプロジェクトのSDKに対応していない
  • Expo Goまたはプロジェクトの更新が必要
  • 対応SDKは今後変わる可能性があるため、プロジェクトを作成する前に、Expo Goの「App Info」やExpo公式ドキュメントを確認してください。

WSL上でExpoの初期プロジェクトを作成する

WSLのターミナルを起動し、プロジェクトを作成するディレクトリに移動します。

今回は、アプリ名をmy-appとします。

必要最小限の構成でExpo SDK 54のプロジェクトを作成するには、次のコマンドを実行します。

npx create-expo-app@latest my-app --template blank@sdk-54

コマンド内の指定には、次の意味があります。

指定意味
my-app作成するプロジェクト名
--template使用するテンプレートを指定
blank必要最小限のBlankテンプレートを使用
sdk-54Expo SDK 54を使用

blankテンプレートを指定すると、画面遷移などのサンプルコードを含まない、比較的シンプルな状態からReact Nativeアプリを作成できます。

プロジェクトの作成が完了すると、ターミナルに起動方法が表示されます。

作成したプロジェクトに移動する

次のコマンドで、作成したプロジェクトのディレクトリに移動します。

cd my-app

以降のコマンドは、基本的にこのmy-appディレクトリ内で実行します。

Webブラウザで初期アプリを確認する

まずは、作成したExpoアプリが正常に動作するか、Webブラウザで確認します。

次のコマンドを実行してください。

npm run web

Web版の実行に必要なパッケージがインストールされていない場合、次のようなエラーが表示されることがあります。

CommandError: It looks like you're trying to use web support but
don't have the required dependencies installed.

Install react-dom, react-native-web by running:

npx expo install react-dom react-native-web

この場合は、表示された案内に従い、次のコマンドを実行します。

npx expo install react-dom react-native-web

npx expo installを使用すると、現在のExpo SDKと互換性のあるバージョンのパッケージがインストールされます。

インストール後、もう一度Web版を起動します。

npm run web

ターミナルにURLが表示されたら、Windows側のWebブラウザからアクセスします。

http://localhost:8081

React Nativeの初期画面が表示されれば、Expoプロジェクトは正常に作成されています。

なお、Webブラウザでの確認が不要で、最初からiPhoneで実機確認する場合、この手順は省略できます。

通常のLAN接続でExpoを起動する

Expoの開発サーバーは、次のコマンドで起動できます。

npx expo start

起動すると、ターミナルにQRコードが表示されます。

通常は、パソコンとiPhoneが同じWi-Fiネットワークに接続されていれば、iPhoneのExpo GoからQRコードを読み取ってアプリを開けます。

ただし、WSL上で開発サーバーを起動している場合は、次のような原因でiPhoneから接続できないことがあります。

  • WSLとWindowsでIPアドレスが異なる
  • WSL2が仮想ネットワークを使用している
  • Windows Defenderファイアウォールにより通信が遮断されている
  • パソコンとiPhoneが別のネットワークに接続されている
  • Wi-Fiルーターで端末間通信が制限されている
  • QRコードに含まれるWSL側のアドレスへiPhoneから到達できない

このような場合は、ExpoのTunnel接続を使用します。

Tunnel接続でExpoを起動する

プロジェクトのディレクトリで、次のコマンドを実行してください。

npx expo start --tunnel --clear

それぞれのオプションには、次の意味があります。

オプション内容
--tunnelインターネット経由のTunnel接続で起動する
--clearMetro Bundlerのキャッシュを削除して起動する

--clearは毎回必須ではありません。キャッシュが原因と思われるエラーが発生した場合や、設定変更が反映されない場合に有効です。

通常は、次のコマンドだけでも起動できます。

npx expo start --tunnel

Tunnel接続は、Expoの開発サーバーを外部からアクセス可能なURLとして公開するため、WSLのIPアドレスへiPhoneから直接接続できない場合にも利用できます。Expo公式ドキュメントでも、LAN接続が難しいネットワーク環境での利用方法として案内されています。

初回起動時にTunnel接続用パッケージのインストールを求められた場合は、画面の案内に従ってインストールしてください。

iPhoneのExpo GoでQRコードを読み取る

Tunnel接続で起動すると、ターミナルに新しいQRコードが表示されます。

iPhoneで次の操作を行います。

  1. App StoreからExpo Goをインストールする
  2. WSLでnpx expo start --tunnelを実行する
  3. ターミナルに表示されたQRコードを読み取る
  4. Expo Goでリンクを開く
  5. JavaScriptバンドルの読み込みが完了するまで待つ
  6. 作成した初期アプリが表示されることを確認する

iPhone標準のカメラアプリでQRコードを読み取れる場合もあります。うまく開かない場合は、Expo Goを起動して、Expo Go側からQRコードを読み取ってください。

アプリの初回起動時は、必要なデータの読み込みに少し時間がかかる場合があります。

ソースコードの変更を実機に反映する

Blankテンプレートの場合は、プロジェクト内のApp.jsまたはApp.tsxを編集します。

例えば、画面に表示する文字を変更します。

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text>WSLからiPhoneで表示できました！</Text>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

ファイルを保存すると、通常はFast RefreshによってiPhoneの画面が自動的に更新されます。

反映されない場合は、Expo Goでアプリを再読み込みするか、開発サーバーを再起動してください。

Tunnel接続でも開けない場合の確認ポイント

1.Expo Goの対応SDKを確認する

iPhoneのExpo Goで「App Info」を開き、対応しているSDKを確認します。

プロジェクト側のSDKは、package.jsonにあるexpoのバージョンから確認できます。

{
  "dependencies": {
    "expo": "~54.0.0"
  }
}

Expo GoがSDK 54に対応している場合は、プロジェクト側もSDK 54に合わせます。

2.Expo Goを最新版に更新する

App Storeを開き、Expo Goに更新がないか確認します。

ただし、Expo Goを最新版にしても、作成したプロジェクトのSDKがExpo Goの対応範囲外であれば起動できません。

3.開発サーバーを再起動する

現在起動しているExpoをCtrl＋Cで終了し、キャッシュを削除して再起動します。

npx expo start --tunnel --clear

4．依存関係を確認する

Expoプロジェクトの依存関係に問題がないか、次のコマンドで確認できます。

npx expo-doctor

問題が表示された場合は、その内容に従ってパッケージや設定を修正します。

5．インターネット接続を確認する

Tunnel接続はインターネットを経由します。

そのため、パソコンとiPhoneの両方がインターネットへ接続できることを確認してください。

6．VPNやプロキシを一時的に確認する

VPN、企業ネットワーク、プロキシ、セキュリティソフトなどがTunnel接続を妨げる場合があります。

接続できない場合は、ネットワーク管理上問題のない範囲で設定を確認してください。

LAN接続とTunnel接続の違い

接続方法特徴
LAN接続同一ネットワーク内で直接接続するため比較的高速
Tunnel接続インターネットを経由するため、WSL環境でも接続しやすい
localhost接続基本的に開発サーバーを起動した端末自身からの確認に使用

Tunnel接続は便利ですが、インターネットを経由するため、LAN接続より読み込みや更新が遅くなることがあります。

WSL環境でLAN接続がうまくいかない場合は、まずTunnel接続で実機確認できるか試すのがおすすめです。

まとめ

今回は、Windows 11のWSL上でExpoプロジェクトを作成し、iPhoneのExpo Goから実機確認する方法を解説しました。

主な手順は次のとおりです。

# Expo SDK 54のBlankプロジェクトを作成
npx create-expo-app@latest my-app --template blank@sdk-54

# プロジェクトに移動
cd my-app

# Web対応パッケージをインストール
npx expo install react-dom react-native-web

# Webブラウザで確認
npm run web

# Tunnel接続でExpoを起動
npx expo start --tunnel --clear

WindowsのWSL上でExpoを起動した場合、ネットワーク構成によっては通常のLAN接続でiPhoneからアクセスできないことがあります。

その場合は、npx expo start --tunnelを使用することで、iPhoneのExpo Goから作成中のReact Nativeアプリを確認できます。

ただし、Expo SDKとExpo Goの対応バージョンが一致していない場合は、Tunnel接続にしても起動できません。プロジェクトを作成する際は、Expo Goが対応しているSDKを事前に確認しましょう。