Live Serverの使い方と設定｜VS Code入門

導入

HTMLファイルを書いたあと、毎回ブラウザを手動でリロードしていませんか？

コードを少し変えるたびに、ブラウザに切り替えてF5を押す。この作業は地味に面倒です。1日に何十回もやると、かなりの時間をロスします。

VS CodeのLive Serverという拡張機能を使えば、この手間がゼロになります。ファイルを保存するだけで、ブラウザが自動的にリロードされます。

この記事では、Live Serverのインストールから使い方、トラブル対処法まで解説します。VS Codeをインストール済みなら、5分で設定できます。

Live Serverとは？

Live Server（ライブサーバー） は、VS Codeの拡張機能（かくちょうきのう）です。拡張機能とは、VS Codeに後から追加できる便利ツールのことです。

Live Serverを使うと、次のことが自動で行われます。

• パソコン上に簡易的なWebサーバーを立ち上げる
• HTMLファイルをブラウザで自動的に開く
• ファイルを保存するたびにブラウザを自動リロードする

つまり「コードを書く → 保存する → 結果がすぐ見える」という流れが実現します。

HTMLやCSSの学習では、書いた結果をすぐ確認することが大切です。Live Serverがあれば、コーディングに集中できます。VS Codeの初期設定と合わせて導入しておきましょう。

インストール手順

手順

• VS Codeを開きます
• 左側のサイドバーにある「四角が4つ並んだアイコン」（拡張機能タブ）をクリックします。キーボードショートカットは Ctrl + Shift + X（Macは Cmd + Shift + X）です
• 上部の検索ボックスに「Live Server」と入力します
• 検索結果の一番上に「Live Server」（作者: Ritwick Dey）が表示されます
• 緑色の「インストール」ボタンをクリックします
• 数秒でインストールが完了します

確認方法

インストールが成功すると、VS Codeの画面下部にあるステータスバー（青い帯の部分）に「Go Live」という文字が表示されます。これが見えればインストール完了です。

もし「Go Live」が見えない場合は、VS Codeを一度閉じて再起動してみてください。

注意点

• 「Live Server」という名前の拡張機能は複数あります。作者が「Ritwick Dey」のものを選んでください。ダウンロード数が最も多いものです
• インターネット接続が必要です

使い方（基本）

HTMLファイルを開いてプレビューする

• VS Codeで、プレビューしたいHTMLファイルを開きます。はじめてのHTMLページで作ったファイルでも大丈夫です
• 画面下部のステータスバーにある「Go Live」をクリックします
• ブラウザが自動的に開き、HTMLファイルの内容が表示されます

もう1つの方法もあります。

• HTMLファイルのエディタ上で右クリックします
• メニューから「Open with Live Server」を選びます
• ブラウザが開きます

自動リロードを体験する

Live Serverが起動した状態で、次のことを試してみましょう。

• VS Codeに戻り、HTMLファイルの内容を少し変更します（例：文字を追加する）
• Ctrl + S（Macは Cmd + S）でファイルを保存します
• ブラウザを見てください。自動的にページが更新されています

手動でリロードする必要はありません。保存するだけで反映されます。

Live Serverを停止する

使い終わったら、ステータスバーの「Port: 5500」（数字は異なる場合があります）をクリックします。これでサーバーが停止します。

CSSでスタイルを変更するときも、Live Serverがあればリアルタイムで結果を確認できます。

使い方（応用）

ポート番号を変更する

Live Serverは初期設定でポート番号5500を使います。ポート番号とは、通信の「窓口番号」のようなものです。

別のポート番号に変えたい場合は、次の手順で設定します。

• VS Codeで Ctrl + ,（Macは Cmd + ,）を押して設定画面を開きます
• 検索ボックスに「liveServer.settings.port」と入力します
• 表示された項目の数値を変更します（例: 3000）

特定のブラウザで開く

初期設定では、パソコンの既定ブラウザで開きます。Chrome など特定のブラウザで開きたい場合は、次のように設定します。

• 設定画面で「liveServer.settings.CustomBrowser」を検索します
• 使いたいブラウザ名を選択します（chrome, firefox など）

ブラウザの開発者ツールを使うなら、Chromeで開く設定にしておくと便利です。

複数ファイルのプロジェクト

HTMLファイルが複数あるプロジェクトでも、Live Serverは問題なく動きます。

ポイントは、VS Codeでプロジェクトのフォルダを開くことです。「ファイル → フォルダーを開く」でプロジェクトフォルダを選びましょう。フォルダを開いた状態なら、どのHTMLファイルからでもLive Serverを起動できます。

CSS や JavaScript を別ファイルに分けている場合も、どのファイルを保存しても自動リロードが働きます。

よくあるトラブルと解決法

トラブル1:「Go Live」が表示されない

原因： HTMLファイルを単体で開いている可能性があります。

解決法： 「ファイル → フォルダーを開く」でHTMLファイルがあるフォルダを開き直してください。Live Serverはフォルダを開いた状態でないと動作しません。それでも表示されない場合は、VS Codeを再起動してください。

トラブル2: 保存してもリロードされない

原因： ファイルが保存されていない、またはLive Serverが起動していない可能性があります。

解決法： まず Ctrl + S で確実に保存してください。ステータスバーに「Port: 5500」と表示されているか確認しましょう。表示されていなければ、Live Serverが停止しています。「Go Live」をクリックして再起動してください。

トラブル3: ポートが使用中と表示される

原因： 前回のLive Serverが正しく終了していない場合に起こります。

解決法： VS Codeを一度完全に閉じて、再度開いてください。それでも解決しない場合は、設定でポート番号を別の数値（例: 5501）に変更してください。

これらのトラブルの詳しい対処法はLive Serverが起動しないときの対処法やポート競合エラーの解決方法も参考にしてください。

まとめ

Live Serverを使えば、コーディングのスピードが格段に上がります。HTML/CSSの学習に欠かせないツールです。

トラブルシューティング

よくあるトラブル：起動しない→VS Code再起動。ポート使用中→設定でポート番号変更。更新されない→Ctrl+Shift+Rでキャッシュクリア。保存していない→Ctrl+Sで保存してから確認。

ホットリロードの仕組み：ファイルを保存するとブラウザが自動で再読み込み。WebSocketで接続を維持し、ファイル変更を検知するとリロード命令を送ります。手動でF5を押す必要がなくなり開発効率が大幅に上がります。