Live Server とは、Visual Studio Code（VS Code）の拡張機能の一つで、HTML や CSS、JavaScript などのファイルをローカル開発環境でリアルタイムにプレビュー表示できるツールです。
目次
主な機能
| 機能 | 説明 |
|---|---|
| 🔄 自動リロード | HTML や CSS、JS を保存するたびにブラウザが自動で再読み込みされます。 |
| 🌐 ローカルサーバー起動 | http://127.0.0.1:5500/ のようなURLで、ブラウザ上に自分のファイルを表示できます。 |
| 📂 フォルダ単位で起動 | プロジェクト全体をサーバーで扱えるので、相対パスの確認にも便利です。 |
| 🖥️ マルチブラウザ対応 | Chrome、Edge、Firefox など、好きなブラウザで表示できます。 |
使い方（基本手順）
VS Code にインストール
拡張機能から Live Server を検索してインストールします。
開発元: Ritwick Dey
HTMLファイルを開く
右下の「Go Live」ボタンをクリック
またはプレビューを確認したいソースを右クリック → 「Open with Live Server」 を選択。
ブラウザが自動で起動してHTMLが表示される
Live Server を使うメリット
- コーディングしながら即座に見た目を確認できる（試行錯誤がしやすい）
- サーバーとして起動するため、AJAXやFetchなども使える
- 静的ファイルをブラウザで開く場合よりも、環境が本番に近くなる
公式情報
- Visual Studio Marketplace: Live Server
https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
コメント