VSCodeのLive Serverとは？ローカル環境でのウェブサイトプレビューを簡単に(Live Previewも)

アジェンダ

ウェブサイトを制作していると、HTMLやCSS、JavaScriptの変更を即座にブラウザで確認したい時があります。
そこで便利なのがVisual Studio Code（VSCode）の拡張機能である「Live Server」です。この拡張機能を使うことで、ローカル環境でウェブサイトを簡単にプレビューできるようになります。
この記事では、Live Serverの動作や基本的な使い方について簡単にまとめます。

1. Live Serverとは？

VSCodeの「Live Server」は、ローカル環境でHTMLファイルをリアルタイムにプレビューするための拡張機能です。

簡単に言うと、あなたのコンピュータ内でローカルウェブサーバーを立ち上げ、ウェブページをブラウザで表示できるようにします。

例えば、Live Serverを使うと、ブラウザのURLが次のようになります。

http://127.0.0.1:5500/hoge.html

このURLが何を意味しているのか、具体的に見ていきましょう。

2. 127.0.0.1:5500の意味

• 127.0.0.1:

  • これは「ローカルホスト（localhost）」を指すIPアドレスです。ローカルホストは、自分のコンピュータそのものを意味します。他のコンピュータやネットワークとは関係なく、あくまで自分のマシン内でサーバーが立ち上がっている状態です。

• 5500:

  • ポート番号を表しています。コンピュータが同時に複数のサービスを提供できるように、各サービスごとに異なるポート番号を使用します。Live Serverでは、デフォルトで5500番のポートを使用してローカルサーバーを起動します。

つまり、http://127.0.0.1:5500/hoge.htmlは、ローカルサーバー上でhoge.htmlというファイルをブラウザで表示するためのURLです。このURLにアクセスすることで、自分のコンピュータ上にあるウェブページをブラウザで確認できます。

3. ホットリロード機能

Live Serverが特に便利なのは、そのホットリロード機能です。これは、ファイルに変更があった際に、ブラウザを自動的にリロードしてくれる機能です。例えば、HTMLやCSSを編集すると、ブラウザを手動で再読み込みすることなく、即座にその変更を確認できます。

• ホットリロードのメリット:
  • 作業効率が向上する：コードを保存するだけで変更が反映されるので、開発中の手間が減ります。
  • エラーの確認が早くできる：修正内容がすぐにブラウザに表示されるため、エラーや不具合も即座に発見できます。

4. Live Serverの使い方

Live Serverのセットアップは非常に簡単です。以下の手順に従って、すぐに使い始めることができます。

1. Live Serverをインストール

   • VSCodeの拡張機能タブ（左側の四角いアイコン）をクリックし、「Live Server」と検索してインストールします。

2. HTMLファイルを開く

   • プロジェクト内のHTMLファイルを開きます。

3. Live Serverを起動

   • 画面右下のステータスバーにある「Go Live」をクリックするか、ファイルを右クリックして「Open with Live Server」を選択します。

4. ブラウザで表示される

   • 自動的にブラウザが立ち上がり、http://127.0.0.1:5500/のようなURLでウェブページが表示されます。編集を加えるたびにブラウザがリロードされ、リアルタイムに変更を確認できます。

5. Live Serverを使う際の注意点

Live Serverはローカル環境専用のツールであり、インターネットに公開されていないという点に注意してください。これはあくまで開発中の確認用であり、他の人と共有したい場合は、GitHub Pagesや他のホスティングサービスを使用する必要があります。

まとめ

VSCodeの「Live Server」は、ローカル環境でのウェブ開発を非常に効率的にしてくれるツールです。簡単にローカルサーバーを立ち上げ、リアルタイムに変更を確認できるため、特にフロントエンド開発には欠かせない機能の一つと言えるでしょう。

※Live Previewというのもある

「Live Server」の他に「Live Preview」というのもあります。

「Live Server」と似た機能を持っていますが、いくつかの違いがあります。
それぞれの特徴の比較も簡単に説明します。

1. Live Previewの特徴

「Live Preview」はVSCodeの別の拡張機能であり、ローカル環境でウェブファイルをリアルタイムでプレビューする目的で使用されます。ただし、「Live Server」との違いはいくつかあります。

• VSCode内でのプレビュー:

  • 「Live Preview」は、VSCodeの内部でウェブページを表示します。つまり、ブラウザを別ウィンドウで開かなくても、エディター内でリアルタイムに変更を確認できるのが特徴です。

• 拡張機能のネイティブサポート:

  • 「Live Preview」はVisual Studio Codeが公式にサポートしている拡張機能の一つです。これにより、VSCodeとの統合がよりスムーズで、最新の機能との互換性が保たれる利点があります。

2. Live Serverとの比較

機能	Live Server	Live Preview
プレビュー場所	ブラウザ（外部ウィンドウ）	VSCodeのエディター内でのプレビュー
ホットリロード	あり	あり
設定の簡単さ	拡張機能インストール後すぐ使える	拡張機能インストール後すぐ使える
カスタマイズ性	ポート番号や設定を細かく調整可能	主にデフォルト設定
公式サポート	サードパーティ製	VSCode公式サポート

3. 使い分けのポイント

• Live Server:

  • ブラウザで直接プレビューしたい場合や、ブラウザのデベロッパーツール（F12）を活用して細かいデバッグを行いたい場合に向いています。また、ローカルホストの設定が必要な場合や、VSCode外でプレビューする際にはこちらが便利です。

• Live Preview:

  • VSCodeのエディター内で簡単にプレビューしたい時に使うと便利です。特に、ブラウザの切り替えが面倒な時や、軽量なプレビュー環境が欲しい場合に向いています。また、公式サポートのため、将来的なVSCodeのアップデートにも安心して使用できます。

4. まとめ

「Live Preview」も「Live Server」と同じようにリアルタイムでウェブページをプレビューするツールですが、VSCode内でプレビューできるか、ブラウザで確認するかという違いがあります。どちらを使うかは、プロジェクトのニーズや作業スタイルによって選んでみてください。

参考

• LiveServerを超初心者向けに解説 – 図解で分かる！Webにまつわる基礎講座 vol.6 | 東京フリーランス