localhostのサイトをスマホで開くには、開発サーバーをネットワークで待ち受けるようにし（たいていは --host オプション）、スマホを同じWi-Fiにつないで、PCのローカルIPアドレスとポートを開きます。たとえば http://192.168.1.20:5173 です。ネットワークでブロックされる場合は、USB経由のChromeのポート転送かトンネルを使います。スマホでのレイアウトを見たいだけなら、スマホは使わずに、PCのChromeでlocalhostをスマホ表示で開けば済みます。
一番手軽なのは、PCのChromeでlocalhostをスマホ表示にする方法
PCの localhost はPC上のどのツールからも開けるので、ネットワークの設定は不要です。
- Chrome DevToolsのデバイスモード：DevToolsを開き、
Ctrl + Shift + M（MacはCmd + Shift + M）でデバイスツールバーを切り替えてスマホを選びます。Chromeのスマホエミュレーターの使い方をご覧ください。 - ローカルページに対応したスマホ表示の拡張機能。Mobile View Extension は
localhostで動作し、ローカルのページ間を移動してもスマホ表示を保つので、開発中ずっと開いたままにしておけます。
オンラインの「レスポンシブチェッカー」の多くはこれができません。自社のサーバーからURLを読み込むため、あなたのPCに届かないからです。
実際のタッチ操作、実際のキーボード、Safariが必要になったら、実機に移りましょう。
方法1：同じWi-FiとPCのローカルIP
1. 開発サーバーをすべてのインターフェースで待ち受ける
多くの開発サーバーは、デフォルトでは localhost（127.0.0.1）でしか待ち受けておらず、ほかの端末からはアクセスできません。ネットワークで待ち受けるよう指定します。
| ツール | コマンド |
|---|---|
| Vite | npm run dev -- --host |
| Astro | npm run dev -- --host |
| Next.js | next dev -H 0.0.0.0 |
| Create React App / webpack dev server | HOST=0.0.0.0 または host: '0.0.0.0' を設定 |
| Python | python -m http.server 8000 --bind 0.0.0.0 |
ViteとAstroは --host 付きで起動すると「Network」のURLを表示します。それがスマホで開くアドレスです。
2. ローカルIPアドレスを調べる
ツールが表示しない場合は、macOSなら システム設定 > Wi-Fi > 詳細、Windowsなら ipconfig を実行してIPv4アドレスを、Linuxなら ip addr を実行して確認します。通常は 192.168. か 10. で始まります。
3. スマホで開く
スマホを同じWi-Fiネットワークにつなぎ、http://<PCのIP>:<ポート> を開きます。
開けない場合
- ファイアウォール。 macOSやWindowsが、NodeやPythonへの受信接続をブロックしていることがあります。確認が出たらアプリを許可するか、ポートのルールを追加します。
- ゲスト用や社内のネットワーク。 端末どうしを分離している（クライアント分離）ネットワークが多くあります。方法2か3を使いましょう。
localhostが直書きされたURL。 フロントエンドがhttp://localhost:8080/apiを呼んでいると、スマホは自分自身に接続しようとします。相対URLにするか、APIのホストを環境変数にしましょう。- CORSとCookie。 新しいオリジン（
192.168.1.20:5173）になることで、localhostだけを許可しているCookieやCORSの設定が効かなくなることがあります。
方法2：AndroidスマホへのChromeのポート転送
AndroidスマホをUSBでつなぎ、USBデバッグを有効にしていれば、Chromeがスマホ側のポートをPCにつなげてくれます。
- PCで
chrome://inspect/#devicesを開きます。 - Port forwarding をクリックし、ポート（例：
5173）と転送先localhost:5173を追加して、Enable port forwarding にチェックを入れます。 - スマホのChromeで
http://localhost:5173を開きます。
スマホ側でも localhost を使うので、CookieやCORSはPCと同じように動き、PCのDevToolsからページを検証することもできます。USBデバッグの設定手順はPCからAndroid表示を確認する方法で解説しています。
方法3：公開HTTPS URLを持つトンネル
トンネルを使うと、ローカルサーバーに一時的な公開アドレスが付きます。どんなネットワークでも使え、Service Worker、位置情報、カメラ、Secure属性のCookieなど、一部の機能に必要なHTTPSも使えます。
よく使われるのは次の2つです。
- Cloudflare Tunnel：
cloudflared tunnel --url http://localhost:5173で、一時的なtrycloudflare.comのURLが表示されます。 - ngrok：
ngrok http 5173で転送用URLが表示されます（無料アカウントが必要）。
トンネルが動いている間は、URLを知っている人なら誰でも開発サーバーにアクセスできます。使い終わったら止め、管理画面や本番データは公開しないようにしましょう。また、未知のホスト名をデフォルトでブロックするフレームワークもあります。たとえばViteでは、トンネルのドメインを server.allowedHosts に追加する必要があります。
方法4：エミュレーターとシミュレーター
- Xcode Simulator（Mac）： Macのネットワークを共有するので、シミュレーター上のSafariで
http://localhost:5173をそのまま開けます。iPhoneなしでiPhone表示を確認する方法をご覧ください。 - Android Studioのエミュレーター：
localhostはエミュレーター自身を指します。PCに接続するにはhttp://10.0.2.2:5173を使います。
どの方法を使うか
| 状況 | 使う方法 |
|---|---|
| コーディング中のレイアウト確認 | PCのChromeでのスマホ表示 |
| 自宅で自分のスマホでタッチやキーボードを試す | 同じWi-Fi＋ローカルIP |
| Androidスマホ、社内ネットワーク、DevToolsが必要 | Chromeのポート転送 |
| HTTPS必須の機能、または同僚に共有したい | トンネル |
| iPhoneなしでSafariの挙動を確認 | Xcode Simulator |
よくある質問
スマホでlocalhostが開けないのはなぜですか？
スマホ上の localhost はスマホ自身を指すからです。PCのローカルIPアドレスを使い、--host や 0.0.0.0 で開発サーバーをネットワークで待ち受けるようにしましょう。
iPhoneでlocalhostを確認するには？
同じWi-FiとPCのIPアドレスを使うか、トンネルを使うか、localhost がそのまま使えるMacのXcode Simulatorを使います。
スマホなしでlocalhostのモバイル版を見られますか？
見られます。DevToolsのデバイスモードか、ローカルページに対応したスマホ表示の拡張機能を使います。