Windows環境でExpo/Expo Goを使ったiPhoneアプリ開発の完全ガイド2025

はじめに

Windows PCしか持っていないけれど、iPhoneアプリを開発したい！そんな開発者の方は多いのではないでしょうか。本記事では、Windows環境でExpoとExpo Goを活用してiPhoneアプリを開発する方法を、2025年最新の情報とともに詳しく解説します。

最新のExpo SDK 53（2025年4月リリース）の新機能や、Windows環境特有の課題とその解決策についても触れていきます。

Expo/Expo Goとは？

Expo CLI

ExpoはReact Nativeアプリの開発・ビルド・デプロイを簡素化するプラットフォームです。複雑なネイティブ開発環境のセットアップなしに、JavaScript/TypeScriptだけでモバイルアプリを開発できます。

Expo Go

Expo Goは実機でのテスト・開発用アプリです。QRコードをスキャンするだけで、開発中のアプリを即座にiPhoneで確認できます。

# Expo CLIのインストール
npm install -g @expo/cli

# 新しいプロジェクトの作成
npx create-expo-app MyApp --template
cd MyApp

# 開発サーバーの起動
npx expo start

Windows環境での制約と課題

1. iOS開発の根本的な制約

最も重要な点：iOSアプリのビルドには最終的にmacOSとXcodeが必要です。これはAppleの制限であり、回避できません。

2. Expo固有の課題

  • ExpoはiOS/Android向けに最適化されており、Windows公式サポートがありません
  • eas build --platform ios --localコマンドはWindows環境でエラーが発生します
  • 多くのExpoネイティブライブラリがモバイル専用設計です

3. 開発環境の制約

# このコマンドはWindowsでエラーになる可能性があります
eas build --platform android --local
# Error: Android SDK not found or Metro Bundler compatibility issues

Windows環境でのセットアップ手順

1. WSL（Windows Subsystem for Linux）の活用

Windows環境でのExpo開発を成功させるには、WSLの使用を強く推奨します。

# WSL2のインストール
wsl --install -d Ubuntu

# WSL環境に切り替え
wsl

2. WSL内での開発環境構築

# Node.js（LTS版）のインストール
curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash -
sudo apt-get install -y nodejs

# Android SDKのセットアップ（Androidテスト用）
sudo apt update
sudo apt install openjdk-17-jdk

# Android SDK Command Line Toolsのダウンロード
wget https://dl.google.com/android/repository/commandlinetools-linux-9477386_latest.zip
unzip commandlinetools-linux-9477386_latest.zip -d ~/android-sdk

# 環境変数の設定
echo 'export ANDROID_HOME=~/android-sdk' >> ~/.bashrc
echo 'export PATH=$PATH:$ANDROID_HOME/cmdline-tools/latest/bin' >> ~/.bashrc
source ~/.bashrc

3. Expo CLIのセットアップ

# Expo CLIのインストール
npm install -g @expo/cli

# EAS CLIのインストール（ビルド用）
npm install -g eas-cli

# Expoアカウントへのログイン
npx expo login

開発フロー：Expo Goを使ったiPhoneアプリテスト

1. プロジェクトの作成と設定

# 新しいプロジェクトの作成
npx create-expo-app MyiPhoneApp --template blank-typescript
cd MyiPhoneApp

# 依存関係のインストール
npm install

2. app.json の設定

{
  "expo": {
    "name": "MyiPhoneApp",
    "slug": "my-iphone-app",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "userInterfaceStyle": "light",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "ios": {
      "supportsTablet": true,
      "bundleIdentifier": "com.yourcompany.myiphoneapp"
    },
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/adaptive-icon.png",
        "backgroundColor": "#ffffff"
      },
      "package": "com.yourcompany.myiphoneapp"
    },
    "web": {
      "favicon": "./assets/favicon.png"
    }
  }
}

3. 開発サーバーの起動

# 開発サーバーの起動
npx expo start

# またはトンネルモードで起動（ネットワーク制限がある場合）
npx expo start --tunnel

4. iPhoneでのテスト

  1. App StoreからExpo Goアプリをダウンロード
  2. 同じWi-Fiネットワークに接続
  3. Expo Goアプリでターミナルに表示されたQRコードをスキャン
  4. アプリが自動的にロードされ、リアルタイムで更新を確認可能

最新のExpo SDK情報（2025年）

SDK 53の新機能（2025年4月リリース）

1. React Native 0.79統合

// 新しいpackage.json exportsがデフォルト有効
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Hello Expo SDK 53!</Text>
      <StatusBar style="auto" />
    </View>
  );
}

2. React 19統合とDOM Components

// DOM Componentsの使用例
import { View, Text } from 'react-native';
import { DOMComponent } from 'expo-dom-components';

export function WebViewComponent() {
  return (
    <View>
      <DOMComponent.div style={{ padding: 20 }}>
        <DOMComponent.h1>Web-like components in React Native!</DOMComponent.h1>
      </DOMComponent.div>
    </View>
  );
}

3. エッジツーエッジAndroidレイアウト

import { useSafeAreaInsets } from 'react-native-safe-area-context';

export function EdgeToEdgeScreen() {
  const insets = useSafeAreaInsets();

  return (
    <View style={{
      flex: 1,
      paddingTop: insets.top,
      paddingBottom: insets.bottom,
    }}>
      {/* コンテンツ */}
    </View>
  );
}

SDK 52の主要機能（2024年11月リリース）

1. New Architectureがデフォルト有効

// app.json
{
  "expo": {
    "plugins": [
      [
        "expo-build-properties",
        {
          "ios": {
            "newArchEnabled": true
          },
          "android": {
            "newArchEnabled": true
          }
        }
      ]
    ]
  }
}

2. 新しいメディアライブラリ

// expo-video（安定版）の使用例
import { VideoView, useVideoPlayer } from 'expo-video';

export function VideoPlayerComponent() {
  const player = useVideoPlayer('https://example.com/video.mp4', player => {
    player.loop = true;
    player.play();
  });

  return (
    <VideoView
      style={{ width: 350, height: 200 }}
      player={player}
      allowsFullscreen
      allowsPictureInPicture
    />
  );
}

// expo-audio（安定版）の使用例
import { Audio } from 'expo-audio';

export async function playAudio() {
  const player = new Audio.Player();
  await player.load('https://example.com/audio.mp3');
  await player.play();
}

トラブルシューティング

1. QRコードスキャンでアプリが起動しない

解決策：

# トンネルモードで起動
npx expo start --tunnel

# または、LAN接続を確認
npx expo start --lan

2. Metro Bundlerエラー

解決策：

# キャッシュのクリア
npx expo start --clear

# node_modulesの再インストール
rm -rf node_modules
npm install

3. Hermesエンジンの問題（SDK 53以降）

// app.json でJSCからHermesに移行
{
  "expo": {
    "jsEngine": "hermes"  // デフォルトでHermes
  }
}

4. Windows WSLでのポート問題

# WSL内のポートをWindowsからアクセス可能にする
netsh interface portproxy add v4tov4 listenport=19000 listenaddress=0.0.0.0 connectport=19000 connectaddress=[WSL_IP]

Development Buildへの移行

Expo Goには制限があるため、本格的な開発ではDevelopment Buildへの移行を推奨します。

1. EAS Buildの設定

# EAS設定の初期化
eas build:configure
// eas.json
{
  "cli": {
    "version": ">= 12.0.0"
  },
  "build": {
    "development": {
      "developmentClient": true,
      "distribution": "internal",
      "ios": {
        "resourceClass": "m1-medium"
      }
    },
    "preview": {
      "distribution": "internal"
    },
    "production": {}
  },
  "submit": {
    "production": {}
  }
}

2. iOSビルドの実行

# Development buildの作成（クラウドビルド）
eas build --platform ios --profile development

# TestFlightでの配布（SDK 53の新機能）
eas submit --platform ios --profile development

3. Apple Developer Accountの設定

  1. Apple Developer Programへの登録（年間99ドル）
  2. Bundle Identifierの登録
  3. プロビジョニングプロファイルの作成
  4. EAS CLIでの認証情報設定
# Apple認証情報の設定
eas credentials

パフォーマンス最適化のベストプラクティス

1. Hermesエンジンの活用

// app.json
{
  "expo": {
    "jsEngine": "hermes",
    "plugins": [
      [
        "expo-build-properties",
        {
          "ios": {
            "proguardMinifyEnabled": true
          },
          "android": {
            "proguardMinifyEnabled": true
          }
        }
      ]
    ]
  }
}

2. バンドルサイズの最適化

// 遅延ローディングの実装
import { lazy, Suspense } from 'react';

const LazyScreen = lazy(() => import('./screens/LazyScreen'));

export function App() {
  return (
    <Suspense fallback={<LoadingScreen />}>
      <LazyScreen />
    </Suspense>
  );
}

3. 画像最適化

import { Image } from 'expo-image';

export function OptimizedImage() {
  return (
    <Image
      source={{ uri: 'https://example.com/image.jpg' }}
      style={{ width: 200, height: 200 }}
      cachePolicy="memory-disk"
      contentFit="cover"
      transition={200}
    />
  );
}

まとめ

Windows環境でのExpo/Expo Goを使ったiPhoneアプリ開発は以下のポイントを押さえることで効率的に進められます：

✅ 成功のカギ

  1. WSLの活用：Windows固有の制約を回避
  2. Expo Goでの迅速なプロトタイピング：QRコードスキャンで即座テスト
  3. 最新SDK機能の活用：React Native 0.79、Hermes、DOM Components
  4. Development Buildへの適切なタイミングでの移行

⚠️ 注意点

  1. iOS本格ビルドにはmacOSが必要：最終的なApp Store配布には制約あり
  2. Expo Goの制限：カスタムネイティブコードは使用不可
  3. ネットワーク設定：WSLとWindows間のポート設定が重要

🚀 今後の展望

  • Expo SDK 54でのさらなるNew Architecture最適化
  • WebAssembly（WASM）サポートの可能性
  • クロスプラットフォーム開発のさらなる簡素化

Windows環境でも十分にiPhoneアプリ開発を楽しめる時代になりました。Expo/Expo Goの力を借りて、素晴らしいモバイルアプリを開発してください！

参考リンク：

コメント

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