【Live Server】VS CodeでHTMLの結果をリアルタイムで見る方法をご紹介！

本記事ではVisual Studio Code(以下VS Code)でHTML・CSSの結果をリアルタイムでプレビューできる【Live Server】についてご紹介していきます。

まずVS Codeで結果をリアルタイムに見るための準備方法をご紹介していきます。

まず初めにVS Codeをインストールしていない人は、VS Codeのインストールから始めてください。

上記の公式サイトから無料ダウンロードし、その後は手順に沿うだけでインストールできます。

VS Codeのインストールが完了したら、次は本記事で使う【Live Server】をインストールしていきます。

上図のように、まずは左側にある【□が4つあるアイコン】を選択してください。

すると、拡張機能のメニューが出てくるので、そこの検索欄に【Live Server】と入力して検索。

そして出てきた【Live Server】の項目を選択すると、右側に出てくる【Install】ボタンを押してください。

上図はすでに導入しているため【Disable】になっていますが、導入していない方は【Install】になっていると思います。

これで、事前準備は完了となります。

次に実際にリアルタイムでHTML・CSSの結果をプレビューする方法をご紹介していきます。

まずはプレビューしたいHTMLが存在しているフォルダを選択します。

左上から【File＞Open Folder】でプレビューしたいHTMLがあるフォルダを選択してください。

もしまだ作成していない方は、この時作成しておいてください。

フォルダ選択した後は、結果をプレビューしていきたいと思います。

「どんなものでもいいからテストしたい」という方は、下記の記事を参考にしてテンプレを作り、中に見出しなどを入れてみて下さい。

プレビューしたいソースコードを書けたら、VS Codeの下を見てください。

上図の赤矢印のように青ラベルの右側に【Go Live】という項目があります。

この項目を選択すると、ブラウザでプレビューできるようになります。

このまま、HTML・CSSを編集した後、保存するとプレビューに反映されるため、反映したい場合は保存するようにしてください。

今回の記事は、以前書いた記事とほとんど同じになっています。

ソフトが違うだけでやりたいことはほぼ同じなので、手軽に使いたい人はBracketsの方がいいと感じました。

しかし、なぜVS Codeにしたのかというと、BracketsでSCSSの設定が面倒だという理由があります。

BracketsでSCSSを使おうとした場合、【Brackets SCSS Autocompile】を使うことになると思うのですが、なぜかエラーで動かず情報も少ない。

そのため、もしSCSSを利用することも視野に入れているなら、VS Codeに開発環境を移行。

今回はVS CodeでSCSSをリアルタイムでプレビューする前段階として、HTML・CSSのリアルタイムでのプレビュー方法を執筆しました。

筆者は上記の記事を参考にしたので、本記事で分からない方はこちらをご覧ください。

本記事の内容は以上となります。

プログラム結果を簡単に確認できるのは、効率が良くなるうえにバグの早期発見にもつながるので、是非入れておきたいところ。

本記事は以上です。お疲れさまでした。