VS Codeでのライブブラウザプレビュー：クイックガイド

エディタとブラウザを絶えず切り替えて変更を確認することほど、開発フローを妨げるものはありません。CSSを調整したりHTMLを更新するたびにalt-tabの操作にうんざりしているなら、VS Codeのライブプレビュー拡張機能があなたのワークフローを変革できます。このガイドでは、2つの最適なオプション（MicrosoftのLive PreviewとクラシックなLive Server）を取り上げ、プロジェクトに適した選択肢を選ぶお手伝いをします。

VS Codeに適したライブプレビュー拡張機能の選択

両拡張機能とも同じ核となる問題を解決しますが、異なるシナリオで優れた性能を発揮します。それぞれの強みを理解することで、あなたのワークフローに合ったツールを選択できます。

Microsoft Live Preview：モダンな選択肢

Live Previewは基本的なファイル配信以上の機能が必要な場合に威力を発揮します。埋め込みブラウザによりすべてをVS Code内に収めることができ、チュートリアル、ワークショップ、または画面領域が重要な場合に最適です。この拡張機能は2つのリフレッシュモードを提供します：タイピング時の即座更新または従来の保存時リフレッシュ動作です。

Live Previewを使用すべき場面：

• コードと並行した埋め込みプレビュー
• デバッグ用のサーバーリクエストログ
• VS Code内蔵JavaScriptデバッガーとの統合
• 要素検査用のEdge DevTools

この拡張機能は静的サイトとシンプルなSPAで最適に動作します。独自の開発サーバーを持つ複雑なフレームワーク（React、Vue、Angular）については、フレームワークのツールを使用してください。

Live Server：軽量な代替案

Live Serverは、シンプルさを求める開発者にとって定番の選択肢であり続けています。ワンクリックで外部ブラウザでプロジェクトを起動し、保存時に自動リフレッシュします。その最大の特徴は？ネットワークアクセシビリティ—コンピューターのローカルIPアドレスを使用して、実際のスマートフォンやタブレットでレスポンシブデザインをテストできます。

Live Serverを選ぶべき場面：

• 迅速な静的サイト開発
• クロスデバイスレスポンシブテスト
• 最小限の設定要件
• 従来の外部ブラウザワークフロー

クイックセットアップ：インストールからライブプレビューまで

選択した拡張機能のインストール

VS Codeの拡張機能パネル（Ctrl+Shift+XまたはMacではCmd+Shift+X）を開きます。「Live Preview」（Microsoft製）または「Live Server」（Ritwick Dey製）を検索します。パブリッシャー名を確認してください—検索結果には廃止された拡張機能がいくつか表示されることがあります。インストールをクリックすれば準備完了です。

初回ライブプレビューの開始

重要な最初のステップ：プロジェクトフォルダをワークスペースとして開きます（File > Open Folder）。単一ファイルのプレビューも動作しますが、リンクされたリソースでパスの問題が発生します。

Live Previewの場合：任意のHTMLファイルを右クリックし、埋め込み表示には「Show Preview」を、従来のワークフローには「Show Preview in External Browser」を選択します。

Live Serverの場合：HTMLファイルを右クリックして「Open with Live Server」を選択するか、ステータスバーの「Go Live」をクリックします。

両拡張機能ともファイルを監視し、自動的にリフレッシュします。変更を保存すれば、プレビューが更新されるのを確認できます—手動リフレッシュは不要です。

よくある問題とクイックフィックス

ワークスペース vs 単一ファイルの落とし穴

「file is not a child of the server root」警告が表示されますか？最も一般的な問題に遭遇しています。両拡張機能ともワークスペースルートからファイルを配信します。ワークスペースなしで個別ファイルを開くと、相対パスが破綻します。HTMLファイルだけでなく、常にプロジェクトフォルダを開いてください。

サブフォルダから配信する必要がありますか？設定でサーバールートを調整してください：

{
  "livePreview.serverRoot": "/src"
}

Live Serverの場合は以下を使用：

{
  "liveServer.settings.root": "/src"
}

万能の「ウィンドウリロード」修正

コンテキストメニューオプションが表示されない？拡張機能が応答しない？さらなるトラブルシューティングの前に、VS Codeの万能修正を試してください：Ctrl+Shift+P（MacではCmd+Shift+P）、次に「Developer: Reload Window」。これにより、作業を失うことなく大部分の拡張機能の不具合が解決されます。

パワーユーザー向けの高度なヒント

ポート設定とマルチルートワークスペース

デフォルトポートが既に使用されている？設定でカスタムポートを構成してください：

{
  "liveServer.settings.port": 5501,
  "livePreview.portNumber": 3001
}

マルチルートワークスペースで作業していますか？各ルートが独自のサーバーインスタンスを取得します。ステータスバーインジケーターにホバーして、すべてのアクティブポートを確認してください。

特殊環境：Codespacesとリモート開発

GitHub Codespacesを使用していますか？埋め込みプレビューには手動でのポートフォワーディングが必要です。Portsパネルを開き、転送されたURLをクリックして認証をトリガーし、その後プレビューを再起動してください。外部ブラウザプレビューは通常、追加手順なしで動作します。

埋め込みプレビューと外部プレビューでスタイルの違いに気づきましたか？外部ブラウザのキャッシュをクリアしてください—埋め込みプレビューは常に新しい状態で開始しますが、外部ブラウザはキャッシュされたアセットを配信する可能性があります。

まとめ

デバッグツール、埋め込みプレビュー、またはサーバーログが必要な場合はLive Previewを選択してください。デバイステスト機能付きの直接的な静的ホスティングにはLive Serverを選んでください。両拡張機能とも定期的にアップデートされ、現代のVS Codeで確実に動作します。

プロジェクトタイプに拡張機能を合わせることから始めましょう。静的HTML/CSS/JS？どちらでも動作します。デバッグが必要？Live Preview。デバイス間でのテスト？Live Server。最適なVS Codeライブプレビューセットアップは、邪魔をせずに構築に集中できるものです。

FAQ

Understand every bug

Uncover frustrations, understand bugs and fix slowdowns like never before with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community.