localhost で動くアプリを、公開 HTTPS URL で公開することでモバイルデバイスでテストできます。スマホやタブレットはノート PC の 127.0.0.1 に届きませんが、localhost トンネルがそのギャップを瞬時に埋めます。
なぜモバイルデバイスは localhost にアクセスできないのか
ノート PC で dev サーバーを動かすと、自分のマシンしか届かないループバックアドレス（127.0.0.1 または localhost）でリッスンします。スマホが同じ Wi-Fi にあっても、http://192.168.x.x:3000 はファイアウォール規則、HTTPS 要件、CORS ポリシーのせいでよく失敗します。
localhost トンネルはスマホに、ローカルプロセスへ転送する標準の HTTPS URL を与えます——ネットワーク設定不要。
エミュレーターが見逃すものをモバイルテストが捕らえる
- 本物のタッチターゲット、スクロール挙動、ジェスチャー処理。
- iOS と Android デバイスの実際のビューポートサイズ。
- モバイルブラウザーのクセ（Safari、Chrome、アプリ内 WebView）。
- シミュレートされた環境でなく、本物のハードウェアでの性能。
- カメラ、位置情報、デバイス固有 API の挙動。
- モバイルブラウザーでの OAuth とディープリンクのリダイレクト。
ステップごと：PortPreview でモバイルテスト
- dev サーバーをローカルで起動（例：ポート 3000 で
npm run dev）。 npx portpreview 3000を実行して公開 HTTPS URL を取得。- スマホのブラウザーで URL を開く（チームがそうリンクを共有するなら QR コードをスキャン）。
- 実機でレスポンシブレイアウト、ナビゲーション、フォーム、認証フローをテスト。
- 同じ URL を QA やデザインの仲間と共有してデバイス横断レビュー。
モバイルテストのチェックリスト
レスポンシブレイアウト
スマホとタブレットでブレークポイント、フォントスケーリング、画像読み込み、オーバーフロー挙動を検証。
タッチ操作
本物のタッチ入力でタップターゲット、スワイプジェスチャー、プルトゥリフレッシュ、スティッキーヘッダーをテスト。
認証フロー
OAuth リダイレクトやマジックリンクログインはモバイルブラウザーで挙動が異なります。実機で認証サイクル全体をテスト。設定詳細は OAuth コールバックテストを参照。
性能
開発ノート PC だけでなく、ミドルレンジデバイスでページ読み込み、JavaScript バンドルの影響、画像最適化を測定。
信頼できるモバイル localhost テストのコツ
- HTTPS を使う：多くのモバイル機能（Service Worker、セキュアクッキー、位置情報）は HTTPS を要求し、トンネルはデフォルトで提供します。
- テスト中はキャッシュを無効化：古いアセットを避けるためハードリフレッシュかシークレットモード。
- 複数デバイスをテスト：iOS Safari と Android Chrome は CSS と JavaScript を異なる扱いをします。
- トンネルをアクティブに保つ：CLI セッションを閉じると URL は動かなくなります。
モバイルプレビューをチームと共有
スクリーンキャプチャを録る代わりに、トンネル URL を共有して仲間が自分のデバイスでテストできるように。コラボレーションのワークフローは ローカル dev サーバーの共有方法を読んでください。
localhost からの高速モバイルテストには PortPreview を無料で始めるへ。