VS CodeのLive Serverで作業効率UP！リアルタイムプレビューの設定方法を解説

プログラミング
CSSHTMLJavaScriptVSCodeコーディング

HTMLやCSS、JavaScriptを書いたあと、ブラウザで更新ボタンを押して確認するのが面倒だと思ったことはありませんか？💡

そんなときに便利なのが VS Codeの「Live Server」機能 です！この機能を使えば、コードを編集するたびに 自動でブラウザが更新 され、リアルタイムでWebページの変化を確認 できます✨

✔ こんな方におすすめ！

  • コーディングのたびに「F5」や「Ctrl + R」を押すのが面倒な人
  • HTML/CSS/JSをすぐにプレビューして、効率よく開発したい人
  • Web制作をスムーズに進めたい初心者やデザイナー

この記事では、 VS CodeのLive Serverの設定方法をわかりやすく解説 し、リアルタイムプレビューを活用するためのカスタマイズ方法やメリット・デメリットも紹介します！

スポンサーリンク

ライブサーバー機能とは？なぜ便利なのか？

🔹 Live Serverとは？

Live Server は、VS Codeの拡張機能のひとつで、コードを編集すると即時にブラウザへ反映 してくれる便利なツールです。

通常、Webページを確認するには「保存→ブラウザのリロード」を繰り返す必要がありますが、Live Serverを使えば 自動でページが更新 され、変更をすぐに確認できます！

🔹 なぜLive Serverを使うと便利なのか？

Live Serverを使うと、以下のようなメリットがあります💡

✔ コーディング中にリアルタイムで変更を確認できる
→ HTMLやCSSを変更するたびに、ブラウザを手動で更新する手間が不要

✔ CSSやJavaScriptの細かい調整がスムーズに！
→ デザインやアニメーションの微調整が 一瞬で反映 される

✔ 環境構築が簡単！
→ 追加のソフトや複雑な設定が不要で、拡張機能をインストールするだけで使える

📌 特に、HTML/CSS/JavaScriptを使うWeb制作では、作業効率が大幅にアップ！

Live Serverのインストールと設定

Live Serverを使うには、まず VS Codeの拡張機能 をインストールする必要があります。手順はとても簡単なので、初心者でもすぐに設定できます！✨

1. Live Serverのインストール方法

🔹 インストール手順

  1. VS Codeを開く
  2. 左側の「拡張機能（四角が4つのアイコン）」をクリック
  3. 検索バーに「Live Server」と入力
  4. 「Live Server – by Ritwick Dey」を選択し、「インストール」ボタンをクリック
  5. インストール完了後、VS Codeを再起動する（推奨）

📌 これでLive Serverが使えるようになりました！ 🎉

2. Live Serverの基本的な使い方

インストールが完了したら、早速 HTMLファイルをライブプレビュー してみましょう！

🔹 ライブプレビューを開始する手順

  1. VS Codeで任意のHTMLファイルを開く
  2. Windowの右下の「Go Live」ボタンをクリック（または右クリック →「Open with Live Server」）
  3. デフォルトのブラウザでページが開く
  4. HTMLやCSSを編集すると、自動的にブラウザへ反映！ 🎨💻

💡 ポイント：ファイルを保存（Ctrl + S / Cmd + S）するだけで、即座にブラウザが更新！

3. Live Serverの設定をカスタマイズする（便利な設定）

Live Serverはデフォルトの設定でも便利ですが、さらに 効率よく使うためのカスタマイズ も可能です。

🔹 自動リロードを有効化する（保存時に即反映）

デフォルトでは、ファイルを手動で保存しないと変更が反映されません。

自動リロードを有効にすると、保存ボタンを押さなくてもリアルタイムで更新 できます！

📌 設定方法

  1. VS Codeの「設定（Ctrl + ,）」を開く
  2. 検索バーに「liveServer.settings.wait」 と入力
  3. 値を 0 に変更（デフォルトは 500）

✔ これで 変更を加えるたびに、即座にブラウザが更新！

🔹 特定のポート番号でLive Serverを起動する

Live Serverはデフォルトでランダムなポート番号を使いますが、固定のポート番号に変更 することも可能です。

📌 設定方法

  1. settings.json を開く（Ctrl + Shift + P → settings.json を検索）
  2. 以下のコードを追加（ポート番号5500 に設定）
"liveServer.settings.port": 5500

✔ 特定のポートで固定して使いたい場合に便利！

🔹 ローカルネットワークでスマホや別のPCからもプレビューする

スマホや別のPCで動作確認をしたい場合、Live Serverのネットワークアクセスを許可すると、他のデバイスからもリアルタイムプレビューが可能！

📌 設定方法

  1. settings.json に以下を追加
"liveServer.settings.useLocalIp": true
  1. PCとスマホが同じWi-Fiに接続されていることを確認
  2. PCのIPアドレス＋ポート番号（例：192.168.1.100:5500）でアクセス！

✔ スマホやタブレットでレスポンシブデザインの確認が簡単に！📱✨

これ、むっちゃ便利です！

Live Serverを使うメリット・デメリット

Live Serverは、HTML/CSS/JavaScriptの開発をスムーズにする強力なツールですが、得意なこと・苦手なこと を理解しておくことも大切です💡
ここでは、Live Serverのメリットとデメリットを詳しく解説します！

✅ Live Serverのメリット

✔ リアルタイムで変更を確認できる
→ コードを編集したら 即座にブラウザに反映 されるので、作業効率が大幅UP！

✔ 開発スピードが向上！
→ HTMLやCSSの調整をすぐに確認できるため、デザイン修正がスムーズ に進む✨

✔ 特別な設定なしで簡単に使える
→ 拡張機能をインストールするだけ で、すぐに使えるのが魅力💡

✔ ローカル環境で動作確認ができる
→ 本番環境にアップする前に、ローカルでデザインやレイアウトをチェックできる！

✔ スマホや別のデバイスでもプレビュー可能
→ 設定を変更すれば、同じネットワーク内のスマホやタブレットでも動作確認OK！

❌ Live Serverのデメリット

⚠ ローカル環境専用なので、サーバー上の動作は確認できない
→ PHPやデータベースを使うサイトのプレビューには向いていない 💡
👉 動的なサイトをプレビューする場合は「MAMP」や「XAMPP」などが必要！

⚠ ネットワーク環境によってはポートが競合することがある
→ 「Live Serverが起動しない」問題の原因になることも
👉 解決策：ポート番号を手動で指定する（例：5500に固定）

⚠ ブラウザのキャッシュが影響することがある
→ 変更が即時反映されない場合がある（特にCSS）
👉 解決策：ブラウザのキャッシュを無効化する or キャッシュをクリアする

📌 これらのデメリットを理解しておけば、Live Serverをより効果的に活用できます！

Live Serverのよくあるトラブルと解決方法

Live Serverはとても便利ですが、環境によってはうまく動作しないこともあります💡
ここでは、よくあるエラーや問題とその解決方法 を紹介します！

❌ 1. Live Serverが起動しない（「Go Live」ボタンが機能しない）

🔹 原因

  • 拡張機能が正しくインストールされていない
  • 他のプログラムとポートが競合している

✅ 解決策

  1. 拡張機能を再インストールする
    • 「拡張機能」→「Live Server」を一度 削除 → 再インストール
  2. VS Codeを管理者権限で再起動（Windowsの場合）
    • VS Codeを右クリック → 「管理者として実行」 で起動
  3. ポート番号を手動で設定
    • settings.json を開き、以下を追加
    jsonコピーする編集する"liveServer.settings.port": 5500

💡 ノートPCなどでLive Serverを立ち上げたまま、作業を終えて閉じてしまうと、次回続きを行う際に立ち上げたままのLive Serverでは自動更新がかかりません。

cmd+Rやctl+Rでリフレッシュをかけると治ることがありますが、もう一度立ち上げ直す方が確実かなと思います。

❌ 2. HTMLの変更が反映されない（ブラウザが更新されない）

🔹 原因

  • ブラウザのキャッシュが影響している
  • Live Serverのリロード設定がオフになっている

✅ 解決策

  1. ブラウザのキャッシュを無効化
    • Chromeの場合：
      • F12（開発者ツール）→「Network」タブ → 「Disable cache」にチェック
  2. Live Serverの自動リロードを有効化
    • settings.json に以下を追加
    jsonコピーする編集する"liveServer.settings.wait": 0

❌ 3. スマホや他のPCでLive Serverのページが開けない

🔹 原因

  • Live Serverの設定で、ローカルネットワークからのアクセスが許可されていない

✅ 解決策

  1. ローカルネットワークアクセスを有効化
    • settings.json に以下を追加
    jsonコピーする編集する"liveServer.settings.useLocalIp": true
  2. PCのIPアドレスを確認し、スマホでアクセス
    • Windowsの場合：ipconfig をコマンドプロンプトで実行
    • Macの場合：ifconfig をターミナルで実行
    • http://<PCのIPアドレス>:5500/ にスマホでアクセス

まとめ

この記事では、VS CodeのLive Serverを活用して、HTML/CSS/JSをリアルタイムでプレビューする方法 を解説しました💡

✔ この記事の振り返り

  • Live Serverとは？ → コードを編集すると即座にブラウザに反映される VS Codeの拡張機能
  • Live Serverのインストール方法 → 拡張機能から簡単にインストール可能
  • 基本的な使い方 → 「Go Live」ボタンを押すだけでプレビュー開始！
  • 便利な設定
    • 自動リロードを有効化 → liveServer.settings.wait: 0
    • ポート番号を指定 → liveServer.settings.port: 5500
    • スマホでのプレビュー → liveServer.settings.useLocalIp: true
  • メリット・デメリット → 作業効率がUPするが、PHPなどの動的サイトには向かない
  • よくあるトラブルと解決策 → Live Serverが起動しない、変更が反映されない、スマホで見れないときの対処法

👉 結論：VS CodeのLive Serverを使えば、HTML/CSS/JSの即時プレビューが可能で、開発スピードが劇的に向上！ 🚀

これからWeb開発を始める方や、効率的にコーディングしたい方は、ぜひLive Serverを活用してみてください！ 💻✨

💡 さらに開発を効率化するには？

👉 もっと効率よく開発するなら、お問い合わせもどうぞ！
📩 コーディングの相談・依頼はこちら 💻✨

タイトルとURLをコピーしました