プログラミング学習

【Live Serverの使い方】自動でブラウザが更新される便利なVSCodeの拡張機能

この記事のまとめ

本記事では、Visual Studio Codeの拡張機能であるLive Serverのインストール方法と使い方を初学者向けに解説しています。

Live Serverを使うとHTMLやCSSの修正で自動的にブラウザがリロードされるので、効率良く開発できるようになりますよ。

MAC、Windows、Linuxなど様々なOS上で動作し、多くのプログラミング言語に対応しているテキストエディタがVisual Studio Code、通称「VSCode」。

無料で利用でき、エンジニアからも高い評価を得ているエディタです。

 

そんなVSCodeは、拡張機能が豊富。

その中でも、簡単にローカルサーバを立てることができる「Live Server」は非常に便利な拡張機能です。

 

よめ
よめ
ローカルサーバ?拡張機能?よくわからないわ。
いちまり
いちまり
そんな方のために、Live Serverとは何なのか、使うとどんなメリットがあるのか解説するよ!

 

本記事では、VSCodeの拡張機能であるLive Serveのインストール方法と導入後のメリットについてまとめていきます。

飛ばし読みガイド【Live Serverのインストール方法・使い方】
created by Rinker
Live Serverのインストール方法・使い方

Live Serverのインストール方法

まずは「Live Server」のインストールページを開きましょう。

以下のボタンをクリックするとサイトが開きます。

 

Live Serverインストールはこちら

 

ボタンをクリックすると、以下のサイトが開きますので「Install」ボタンをクリックしましょう。

 

すると以下の様に、英語表記で「拡張機能をインストールするには、Visual Studio Codeが必要です」というメッセージが表示されます。

VSCodeのインストールが終わっていれば、そのまま「Continue」ボタンを押しましょう。

 

もし、VSCodeをインストールしていない場合は、以下の記事を参考にインストールしてみてください。

いちまり
いちまり
VSCodeの日本語の設定方法も解説しているよ!
【初心者向け画像解説】VSCodeのインストール方法と日本語の設定方法 効率良くプログラミングコードを書いていくために欠かせないのがテキストエディタ。 数あるテキストエディタの中でも、エンジ...

 

さて、インストール作業に戻りまして…

Continueボタンを押したあと、Google Chromeであれば「Visual Studio Codeを開きますか?」というメッセージが出てくるので、そのまま承認しましょう。

 

VSCodeが自動で開くので、「Install」リンクを押します。

これでLive Serverのインストールは完了です。

 

VSCodeを再起動するとLive Serverが使えるようになりますよ。

Live Serverの使い方とメリット

Live Serverの使い方から説明していきますね。

まずは、VSCodeからHTMLファイルが格納されいてるフォルダを開きます。

 

フォルダを開くと、画面右下に「Go Live」という表記が現れます。

これをクリックします。

 

するとローカルサーバーが立ち上がり、ブラウザでHTMLとCSSが反映されたWEBページが開きます。

 

コードを修正していく中で、HTMLやCSSファイルを保存すると自動でブラウザが更新されるようになります。

 

Live Serverを使っていない場合は、ファイルを修正して保存する度に、手動でHTMLファイルを開いて確認する必要がありましたよね。

ですが、Live Serverがあると修正した内容が自動でWEBページに反映されるので、いちいち手動で確認する手間が省けます

 

少ない負担でコードの確認ができるので、非常に便利なツールです。

いちまり
いちまり
このツールを使うだけで、効率良くコーディングができるようになるよ!

 

なお、ローカルサーバーを停止したい場合は、VSCodeの右下にある「Port:5500」と書かれた箇所を押します。

すると、ローカルサーバー起動前の状態に戻ります。

 

Live Serverでローカルサーバーが起動しない(Go Liveが表示されない)ときの対処法

私が最初にLive Serverを使ったときの失敗談です。

ファイルを開いてもローカルサーバーを起動するための「Go Live」が表示されないことがありました。

 

その原因は「フォルダではなく、HTMLファイルを直接開いていたから」でした。

 

HTMLファイルが格納されているフォルダを開くとGo Liveが表示されますが、各々のHTMLファイルを開いてもプレビュー機能は使えないので、注意してくださいね。

フォルダを開いた場合
HTMLファイルを開いた場合

 

Live Serverの使い方|まとめ

本記事では、Visual Studio Codeの拡張機能である「Live Server」のインストール方法と使い方を初学者向けに解説しました。

 

Live Serverが使えるようになると、ブラウザ上で即時に画面がリロードされるので、効率良くプログラミングができるようになりますよ。