こんにちは！マスダです。

今回は、iPhone実機でlocalhostを確認する方法をご紹介します！

案件や個人開発などで開発中のサイトを実機スマホで確認する際、デプロイして開発環境への反映を毎回待つのが地味に手間&効率良くないなあと感じていたので、めちゃくちゃ便利で助かります。

実施環境と前提条件

• PC：macOS Sequois 15.2
• iPhone：iOS 17.6.1

※今回はmacで開発中のWEBサイトをiPhoneで確認する方法ですので、WindowsやAndroidでの確認方法は対象外です。

また、macとiPhoneが同じネットワークに接続されていることが前提条件になります。

かんたん 3STEP

それでは早速確認方法です。

1. macとiPhoneを同じネットワークに接続する（基本的には同じWifiに接続するだけでOK）
2. macのIPアドレスを確認する
3. 確認したmacのIPアドレスを含めたアドレスにiPhoneからアクセスする

これだけで確認できるようになります！

STEP1は、単純にmacとiPhoneとで同じWifiに接続するだけなので特筆事項はありません。

macのIPアドレスを確認する

macのマーク ⇨ システム設定を開き、Wi-fiの項目を表示します。

接続しているwifiの「詳細」ボタンをクリックします。

開いた詳細画面の左側にある「TCP/IP」の項目をクリックすると、IPアドレスが表示されます。これがmacのIPアドレスです。

※ここでは例としてIPアドレスを「192.168.1.100」とします！

iPhoneからlocalhostにアクセスする

iPhoneからGoogle ChromeやSafariなどのブラウザで、先ほど調べたIPアドレスを用いた下記のアドレスにアクセスするとlocalhostが確認出来ます。めちゃくちゃ簡単！

（例）http://192.168.1.100(macのIPアドレス):3000(ポート番号)

※macのIPアドレスは調べて表示されたものに適宜置き換えてください。

※ポート番号も、PCで立ち上げているlocalhost画面の番号に従って適宜置き換えてください。

接続できないときは

上記の手順では接続できない場合、いろいろ考えられる原因はあると思いますが(ファイアウォールの設定等…)、まずは「サーバーが外部アクセスを受け付ける設定になっているかどうか」を確認してみてください。

今回はVueで適当なプロジェクトを作成して立ち上げていたのですが、Vite起動時に外部からのアクセスを許可していなかったため、初回は接続拒否されてしまいました。

ということで、下記のコマンドで外部アクセスを有効にしつつ立ち上げてから、iPhoneでlocalhostにアクセスすると今度はちゃんと表示されました！

npm run dev -- --host

さいごに

以上、iPhoneからlocalhostを確認する方法のご紹介でした。

手間もかからず簡単に確認できるようになるので、開発環境へのデプロイなどで実機確認に手間がかかっていたりする方はぜひ試してみてください！