【React Native】【Expo】iOSアプリをリモート環境で開発 with Devin, without Mac
はじめに
GitHub, Devin, Slack, iPhone を使って iOS アプリを開発します。
Mac は使用しません。
今回はアプリの実機デバッグまでを行います。
流れとしては、
GitHub でリポジトリを作成
↓
Devin が実装
↓
GitHub Codespace で Expo を実行
↓
実機 iPhone でデバッグ
事前準備
- GitHub アカウントの準備
- Devin 🤝 Slack 連携
- Expo Go のダウンロード
Step 1: [GitHub] リポジトリの作成
GitHub から"New"より新規リポジトリを作成します。今回はリポジトリ名を「tunnel」としました。
2025/7/28 現在、Devin に GitHub 上に新しいリポジトリを作成することが出来ないため、行っている Step です。
Step 2: [Slack] Devin への開発依頼
①Devin へ指示を出します。
② 実装開始
③Devin と Slack 上でやり取りをしながら実装を完了
（道中クラッシュなど問題はあったが解決）
Step 3: [GitHub Codespaces] 開発環境を構築
Devin が実装したブランチを選択し、「Code」ボタンから「Create codespace on xxx」をクリックします。
Codespaces が開きます。
Step 4: [Expo] コードを実行する
Codespaces のターミナルを開き、コマンドを入力します。
npx expo start --tunnel
このコマンドは、Codespaces 上で開発サーバーを起動し、--tunnelオプションによってインターネット経由でアクセス可能な公開 URL を生成します。
しばらくすると、ターミナルに QR コードが表示されます。
今回は QR コードを表示している端末でデバッグしたいので、一度スクリーンショットを撮ってから、それを読み取りました。
expo のトンネリングには ngrok が使用されています。
Step 5: [iPhone] 実機でデバッグ
QR コードを読み取ると、iPhone 上で Expo Go が立ち上がり作成したアプリが起動します。
まとめ
React Native, Expo を使ったリモート開発についてまとめました。Expo はサーバー上で動作することがとても良い開発体験を生み出している思っております。Expo チームには感謝です。
他のユースケースとしては、チーム内でデバッグする際も 1 つリモートで実行させてリンクを共有すれば同じコードで複数人がデバッグできます。（仕事で使用する場合はセキュリティチェックが必要ですが）
また、出先で Mac がない、でも PR のデバッグを行いたい場合に、iPhone や iPad があれば GitHub Codespaces と Expo のトンネリング機能を使い、実機での動作確認が可能です。
Discussion