HTML/CSSをブラウザで自動更新!VSCodeエディタが超便利

- プログラミング -
2020.08.06
VSCode/Visual Studio Code

HTML, CSS, JavaScriptのコードを書きながら学習していると、

「コードを書き換えて修正した箇所を確認するために、毎回Webブラウザを手動でリロードするの面倒だなぁ...」

と思うことがありませんか?

「コード書き換え→保存して即ブラウザで自動更新されたら楽なのに・・・」

そんな悩みは、Visual Studio Code(VS Code)の「Live Server」というプラグインを使うと簡単に解決します。

導入まで3分とかかりません。

この機能を一度使うともう他のエディタにはきっと戻れなくなるでしょう。

Bracketsというエディタでも似たような機能を使えますが、Bracketsよりも設定が簡単なのでプログラミング初学者の方はVSCodeに乗り換えてみることをおすすめ。

VSCodeでHTML/CSS/JavaScriptをブラウザ自動更新させる方法

VSCodeをインストールしている前提で話を進めます。まだインストールしていない方は以下よりどうぞ。

VSCode公式サイト≫

HTML, CSS, JavaScriptの自動更新

VSCodeのプラグイン「Live Server」をインストール

VSCodeを開いて、以下操作でプラグイン「Live Server」をインストールします。

  1. 左下の赤枠マークをクリック
  2. 現れた検索窓で" live server "と検索
  3. Live Serverをインストール・有効化する

HTML, CSSの自動更新

インストールが正常に完了し、Live Serverが有効化されていれば、以下のようにエディタの右下に「Go Live」というアイコンが表示されます。

HTML/CSSの更新を自動反映

もし「Go Live」がいつまで経っても表示されない場合、VSCodeを再起動してみてください。

このLive Serverは、インストールするだけでOKです。特にその他の設定をいじる必要はありません。

更新したいファイルをエディタで開き、Live Serverを起動

HTMLファイル(PHPファイルも可)を開いている状態で「Go Live」をクリックします。

以下画像例だと、「index.html」の内容を修正しつつwebブラウザに表示したいので、index.htmlをアクティブにした状態で「Go Live」をクリックします。

HTML/CSSの更新を自動反映

すると、ブラウザが自動的に起動し、開いていたHTMLファイル(index.html)が表示されます。

HTML/CSSの更新を自動反映

この状態まで動作を確認できれば完了です。

あとは、HTMLの内容や読み込んでいるCSS、JavaScriptを更新して保存してみてください。

手動でWebブラウザの再読み込みをしなくても、Ctrl + S(MacならCommand + S)で保存した瞬間に更新した内容がブラウザに反映されているはずです。

Ctrl + S で保存するのも面倒な場合の設定

ここまでの設定だと、「Ctrl + S」などで保存動作を行わないとブラウザに反映されません。ブラウザのリロード動作だけが省略された状態です。

  • コード保存アクションも省略して、リアルタイムでブラウザ反映をさせたい!

そんな時はVSCodeで以下のように設定します。

「ファイル(File)」 > 「自動保存(Auto Save)」を有効化

HTML, CSS, JavaScriptの自動更新

すると、以下のようにタイピングの若干のタイムラグ後にブラウザへ自動反映されます(Ctrl + Sで保存していません)。

HTML, CSSの自動更新

↑の例ではHTMLファイルですが、CSSやJavaScriptのファイルでも同様に自動反映してくれます。

「タイピング途中で画面が頻繁にピロピロ動くのが嫌」という人もいると思うので、自動保存機能のオンオフはお好みで。

Live Server起動時の注意点

「Go Live」をクリックする時は、HTMLファイル(.html)かPHPファイル(.php)がエディタ上でアクティブになっている(カーソルが当たっている)状態であることを確認してください。

CSSやJavaScriptなど、HTMLファイルから呼び出されるファイルがアクティブ状態でGo Liveをクリックすると、意図しないファイルがブラウザで開いてしまいます。

たとえば、以下のようにJavaScriptファイル(app.js)がアクティブになっている状態で「Go Live」をクリックしないように注意です。

HTML/CSSの更新を自動反映

特に、エディタ上で複数のファイルが開かれている時は間違えやすいので気をつけてみてください。

Live ServerがあればXAMPP/MAMP等Webサーバソフトが不要

HTML, CSS, JavaScriptなど静的なWebサイトをブラウザ表示するだけなら、Live ServerがあればXAMMP/MAMPなどを使ってWebサーバを起動する必要がありません。

プラグインのLive Serverがその名の通りWebサーバとして機能してくれているからです。

VSCodeを開いて「Go live」をクリックするだけでコードを書き始められてすごい楽なので、学習時には重宝するはずです!

以上、VSCode + Live Serverでコードを自動反映、作業効率をアップさせようの巻でした。

↑TOP