【サイト制作】VScode LiveServerでスマホ向けサイトをすぐ実機確認

はじめに

Webで動くHTMLツールやゲームを作っていると、PCでは問題ないのにスマホ実機だと挙動が微妙だったりする。

かといってGitHub PagesにUP → スマホで確認 → 修正 → 再UPを繰り返すのは正直面倒で時間もかかる。

Google Chromeなら右クリック→検証でスマホモード表示もできるけど、やはり実機の挙動とは違う。

そんなときに便利なのがVS Codeの拡張機能「Live Server」だ。

Live Serverってなんやねん？

Live Serverは、VS Code上で簡易的なローカルWebサーバーを立ち上げてくれる拡張機能。

特徴はこんな感じ。

ローカルサーバーをワンクリックで起動
HTML / CSS / JSを保存すると自動でリロード
スマホ実機からもすぐアクセス可能

これでwebページをローカル編集して保存して、すぐにスマホ実機で確認できるぞ。

導入方法

1. 拡張機能をインストール

VS Codeを起動
左の拡張機能アイコン（画像左下の□4つのやつ）をクリック

もしくは Ctrl + Shift + X
検索欄にLive Serverと入力
作者が Ritwick Dey のものを選んでインストール

2. フォルダを開く（重要）

Live ServerはHTMLファイル単体ではなく、フォルダ単位で動く。

なのでhtml編集してそのままローカルサーバー立ち上げはできない。

メニューから：File → Open Folder

開きたいHTMLやJSが入っているフォルダを丸ごと開く。

Live Serverの起動方法

方法1：右クリック

index.html を右クリック
Open with Live Server

方法2：右下のボタン

VS Code右下の Go Live をクリック

成功すると、ブラウザで次のようなURLが開く。

http://localhost:5500

注意点：このアドレスをスマホで開くわけじゃない！

スマホで localhost や 127.0.0.1 を開いてもダメ。

それらは「そのPC自身」を指すアドレスだから。

正しい手順

1. PCのIPアドレスを調べる（Windows）

コマンドプロンプトで：

ipconfig

次のような IPv4アドレスを探す。

192.168.1.5

または

10.0.0.23

※ 127.0.0.1 や fe80:: は使わない

2. スマホのブラウザでアクセス

PCとスマホを同じWi-Fi に接続した状態で、

http://PCのIPv4アドレス:5500

例：

http://192.168.1.5:5500

これでスマホ実機でローカルページが表示される。

よくハマるポイント

スマホがモバイル通信のまま（Wi-Fiじゃない）
PCのファイアウォールで通信がブロックされている
IPv6アドレスを使ってしまっている
ポート番号（5500）が違っている

特にWindowsでは、
初回起動時にファイアウォールの許可を求められるので
「プライベートネットワーク」を許可する必要がある。

まとめ

Live Serverを使うとローカルで即テストできる
GitHub Pagesへの無駄なUPが激減する
スマホ実機テストが圧倒的に楽になる

Webでツールやゲームを作るなら、
Live Serverはほぼ必須レベルの拡張機能。

さいごに

最初はローカルサーバーとか難しそう・・・って思ってたけど、全然問題なかった。

細かく色々設定せずとも一発でサーバー立ち上がるのが最高すぎた。

スマホ向けに調整するなら、この拡張機能は必須クラスだね。

ム空間雑記:||

インドアと厨二病の化身。