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