前回の記事では、Windows + WSL2というAI開発に最適な環境でスマホアプリを作るなら「React Native (Expo)」がベストプラクティスである理由を解説しました。
今回は実践編として、何もない状態からお手元のスマートフォンにアプリの初期画面を表示させるまでの手順を、ステップバイステップで分かりやすく解説します。WSL2特有の「ネットワークの壁」を回避する重要なテクニックも紹介しますので、ぜひ一緒に手を動かしてみてください。
前提条件
このガイドでは、以下の環境がすでに整っていることを前提としています。
- Windowsマシンの WSL2 (Ubuntu等) が有効になっている
- エディタとして「Cursor」をインストール済み
- AIエージェント「Claude Code」が利用可能
それでは、さっそく構築を始めましょう！
ステップ1：WSL2内のNode.js環境を確認する
React Native (Expo) の開発には、JavaScriptの実行環境である「Node.js」が必要です。まずはWSL2のターミナルを開き、以下のコマンドを入力してインストールされているか確認しましょう。
Bash
node -vv18.x.x や v20.x.x などのバージョン番号が表示されれば準備完了です。もし「command not found」と表示された場合は、事前にNode.js（推奨はnvm経由）をインストールしてください。
ステップ2：Expoプロジェクトを自動生成する
次に、アプリの土台となる雛形（テンプレート）を作成します。WSL2のターミナルで、プロジェクトを作成したいディレクトリに移動し、以下のコマンドを実行します。
Bash
# news-app の部分は好きなプロジェクト名に変更可能です
npx create-expo-app@latest news-app必要なファイルのダウンロードとインストールが始まります。完了したら、作成されたフォルダに移動しましょう。
Bash
cd news-appステップ3：Cursorでプロジェクトを開く
ここから、強力なAIエディタ「Cursor」の出番です。同じくWSL2のターミナルから以下のコマンドを実行し、Cursorを立ち上げます。
Bash
cursor .これで、WSL2内のファイル群がCursorで開かれます。（※もしコマンドで開かない場合は、Windows側のCursorを起動し、「ファイル」>「フォルダーを開く」からWSL側のパスを選択してください）
ステップ4：スマートフォンに「Expo Go」を入れる
PCで書いたコードを、実際のスマホ画面で確認するための準備をします。重いエミュレーターは使いません。
- お手持ちのスマートフォンのアプリストア（App Store または Google Play）を開きます。
- 「Expo Go」 と検索し、アプリをインストールします。
これだけで、あなたのスマホが最強のテスト端末になります。
ステップ5：開発サーバーの起動とスマホ連携（★最重要）
いよいよアプリを起動します。ここでWSL2最大の罠が待っています。通常通り起動すると、スマホ側からWSL2内のローカルIPにうまく接続できず、エラーになってしまうのです。
これを回避するため、Cursorのターミナル（またはWSL2のターミナル）で、以下の**「トンネル機能」を使ったコマンド**を実行します。
Bash
npx expo start --tunnel※ 初回実行時はトンネル用のパッケージのインストールを聞かれることがあるので、y を押して進めてください。
コマンドが成功すると、ターミナル上に大きなQRコードが表示されます。
最後に、スマホで以下の操作を行います：
- Androidの場合: Expo Goアプリを開き、「Scan QR code」から画面のQRコードを読み取ります。
- iPhoneの場合: 標準のカメラアプリを開いてQRコードを読み取り、表示された「Expo Goで開く」という通知をタップします。
成功！AIと開発を始めよう
スマホの画面に「Open up App.tsx to start working on your app!」のような初期画面が表示されましたか？表示されていれば、環境構築は完璧に成功です！
あとは、Cursorのターミナルで claude コマンドを叩いてClaude Codeを起動し、「App.tsx をモダンなニュースアプリのホーム画面に書き換えて」と指示を出してみてください。ファイルを保存した瞬間、手元のスマホ画面が自動的に最新のデザインに切り替わります。
Webの知見と最先端のAIツールを掛け合わせて、快適なアプリ開発ライフをお楽しみください！