Zenn
🤳

【VSCode】スマホ実機でレスポンシブ表示を確認したい！（Live Server, プライベートIPアドレス）

2024/02/08に公開
VS Code
localhost
liveserver
プライベート IP アドレス
tech

「検証ツールでSPサイズは確認してるけど、実際にスマホで見てみたいな...」

こんな経験はありませんか？
それを叶えるのが、「プライベートIPアドレス」 を用いた接続です。
本記事は、そんなプライベートIPアドレスとはなんなのか、そして 「実際にどのようにスマホ実機に表示させるのか？」 という疑問を解決する記事としてお届けします。

本記事で解説すること

  • 技術を予習する
    • プライベートIPアドレスとは？
  • 手順
    1. Live ServerでプライベートIPアドレスを使う設定
    2. Go Live
    3. QRコードでスマホに表示

技術を予習する

プライベートIPアドレスとは？

ひとことで言ってしまえば、「特定のネットワーク（家庭、オフィス、学校など各空間）内にある端末でのみ、使用できるIPアドレス」のこと。
これだけではなんのことか分からないと思いますので、順番に確認していきましょう。

普段、ローカル環境で開発しているときにLive Serverを使っていると、「https://localhost:5500」にアクセスするかと思います。
しかし、実際の環境で動作確認をするとき、「http://（IPアドレス）/~」へアクセスするのではないでしょうか？ これは、AWSなどでサーバーを立ち上げた経験があればイメージしやすいかもしれません。
ここでは、「自分の端末だけで確認するのがlocalhost、他の端末で見るためにはIPアドレスが必要」 と思ってもらえれば大丈夫です。

おさらいすると、同じWi-Fi環境（同じネットワーク）に接続している端末であれば自由に使用できるのが「プライベートIPアドレス」です。そのため、PCとスマホの実機を同じWi-Fiに接続していることを確認し、Live ServerでプライベートIPアドレスを使う設定をしていきましょう。

手順

さっそく作業に移っていきましょう！

1. Live ServerでプライベートIPアドレスを使う設定

  1. VSCodeの左下にある歯車マークから「設定」を選択
  2. 設定の検索窓に「local」と打ち込む
  3. Live　Server > Settings: Use Local Ipの項目で「Use local IP as host」にチェック

2. Go Live

適当なHTMLファイルを開き、VSCode画面右下から「Go Live」しましょう。

3. QRコードを表示


「QRコードを作成」を選択するとこのサイトのURLがQRコードで表示されます。
プライベートIPアドレスをいちいちスマホで打ち込むのは面倒くさいですからね、ラクしましょう！

準備完了！

QRコードをスマートフォンで読み取れば、あっという間にスマホ実機での表示確認ができるようになります！

総括

開発がはかどること間違いなしの知識なので、ぜひ覚えておきましょう。
また、アプリから飛び出してLANやIPアドレスなどネットワーク周りについて学んでみるのも良いでしょう。

参考文献

Discussion