HTML/CSSをブラウザで自動更新！VSCodeエディタが超便利
HTML, CSS, JavaScriptのコードを書きながら学習していると、
コードを書き換えて修正した箇所を確認するために、毎回Webブラウザを手動でリロードするの面倒だ...
書き換えたらすぐブラウザに自動反映されたら楽なのに...
と思うことがありますよね。
そんな悩みは、Visual Studio Code(VS Code)のLive Serverというプラグインを使うと簡単に解決します。
導入まで3分とかかりません。
- プラグイン"Live Server"をインストール
- Live Serverを起動して編集を始めるだけ
本記事で、①②の具体的な方法を説明していきます。
Bracketsなどの他エディタでも似たような機能を使えますが、VSCodeは設定がとても簡単なのでプログラミング初学者の方はVSCodeに乗り換えてみることをおすすめ。
ー もくじ ー
VSCodeでHTML/CSS/JavaScriptをブラウザ自動更新させる方法
VSCodeをインストールしている前提で話を進めます。まだインストールしていない方は以下よりどうぞ。
VSCodeプラグイン「Live Server」をインストール
まずはVSCodeで編集したいHTMLファイルを含むフォルダを開いておきます。
その後、以下操作でプラグイン「Live Server」をインストールしましょう。
- 左下の赤枠マークをクリック
- 現れた検索窓で" live server "と検索
- Live Serverをインストール・有効化する
インストールが正常に完了し、Live Serverが有効化されていれば、以下のようにエディタの右下に「Go Live」というアイコンが表示されます。
このLive Serverは、インストールするだけでOKです。特にその他の設定をいじる必要はありません。
メモ：
もし「Go Live」が表示されない場合、本記事下部のVSCodeに"Go Live"が表示されない時を参照してみてください。
Live Serverを起動して編集するだけ
HTMLファイルを開いている状態で「Go Live」をクリックします。
以下画像例だと、「index.html」の内容を修正しつつwebブラウザに表示したいので、index.htmlをアクティブにした状態で「Go Live」をクリックします。
すると、ブラウザが自動的に起動し、開いていたHTMLファイル(index.html)が表示されます。
この状態まで動作を確認できれば完了です。
あとは、HTMLの内容や読み込んでいるCSS、JavaScriptを更新して保存してみてください。
手動でWebブラウザの再読み込みをしなくても、Command + S(WindowsならCtrl + S)で保存した瞬間に更新した内容がブラウザに反映されているはずです。
Command + S で保存するのも面倒な場合の設定
ここまでの設定だと、Command + Sで保存動作を行わないとブラウザに反映されません。ブラウザのリロード動作だけが省略された状態です。
コード保存アクションも省略して、リアルタイムでブラウザ反映をさせたい！
...そんな時はVSCodeで以下のように設定します。
「ファイル(File)」 > 「自動保存(Auto Save)」を有効化
すると、以下のようにタイピングの若干のタイムラグ後にブラウザへ自動反映されます(Command + Sで保存していません)。
↑の例ではHTMLファイルですが、CSSやJavaScriptのファイルでも同様に自動反映してくれます。
「タイピング途中で画面が頻繁にピロピロ動くのが嫌」という人もいると思うので、自動保存機能のオンオフはお好みで。
VSCodeに"Go Live"が表示されない時
そんなときは、以下2つを実行してみてください。
- フォルダではなくファイルを開いてしまっていないかチェック
- VSCodeを再起動する
①について補足しておきます。
VSCodeで「File > Open...」か「Open folder」から作業対象のプロジェクトを開くことが多いかと思います。
このとき、以下のようにhtmlファイルを指定した状態で「開く」をクリックしてしまうと「Go Live」が表示されなくなります。
これだとGo Liveが出なくなってしまう
なので、以下のように必ず「フォルダ」を選択した状態で「開く」をしているかチェックしてみてください。
フォルダを選択して開くのがカギ
「フォルダを開いているのにGo Liveが出ないぞ...？」というかたは、VSCodeの再起動をしてみてください。
Live ServerがあればXAMPP/MAMP等Webサーバソフトが不要
HTML, CSS, JavaScriptなど静的なWebサイトをブラウザ表示するだけなら、Live ServerがあればXAMMP/MAMPなどを使ってWebサーバを起動する必要がありません。
プラグインのLive Serverがその名の通りWebサーバとして機能してくれているからです。
VSCodeを開いて「Go live」をクリックするだけでコードを書き始められてすごい楽なので、学習時には重宝するはずです。
・・・
以上、VSCode + Live Serverでコードを自動反映、作業効率をアップさせようの巻でした。
