【簡単】vscodeの内容をブラウザ表示させる4つの方法

vscodeの内容をブラウザに表示させる方法を解説します。
ブラウザの表示方法にも種類があります。
基本的なファイルの表示方法に加えて、ファイルを編集しながら、リアルタイムで変更がブラウザに反映され確認できる方法もあります。
それぞれの方法を知ることで、開発に合わせた効率的な開発を行う事ができます。

今回は、vscodeの内容をブラウザに表示させる方法を4点紹介、メリット・デメリット・インストール方法・使い方を徹底解説します。

vscodeの内容をブラウザ表示させる4つの方法

vscodeの内容をブラウザ表示させる4つの方法は
①.HTMLファイルをブラウザにドラックアンドドロップ
②.Live HTML Previewer（拡張機能）を使う
③.Live Server（拡張機能）を使う
④.Browser Preview（拡張機能）を使う

以上の4点の「メリット・デメリット」「インストール方法・使い方」を一つ一つ紹介していきます。

まず4点の「メリット・デメリット」

「メリット・デメリット」

①.HTMLファイルをブラウザにドラックアンドドロップ
メリット
ファイルをブラウザにドラックアンドドロップし表示できるのでわかりやすい。
デメリット
ファイルをブラウザにドラックアンドドロップする手間がある。変更更新のたびにブラウザに戻り、ドラックアンドドロップしなければならない。

②.Live HTML Previewer（拡張機能）を使う
メリット
vscode上で、ボタン一つでブラウザを開く事ができる。（ドラックアンドドロップの手間がない）
デメリット
変更更新のたびに「Open in browser」ボタンを押さなければならない。
拡張機能を追加する必要がある。

③.Live Server
メリット
ボタン一つでブラウザを開く事ができる。
変更内容を自動更新してくれる。
デメリット
HTML CSS JavaScript向けPHPファイルは確認できない。
拡張機能を追加する必要がある。

④.Browser Preview
メリット
ボタン一つでブラウザを開く事ができる。
vscode上でブラウザが起動し、指定したURLページが表示される。
変更内容を自動更新してくれる。
word pressに向いており、HTML CSS JavaScriptに加え、PHPファイル更新もしてくれる。
デメリット
URLが必要。ブラウザ「Google Chrome」のみ対応。

一つ一つ解説してきます。

①HTMLファイルをブラウザにドラックアンドドロップ

HTMLファイルの内容を確認するには、下記のように、HTMLファイルをブラウザにドラックアンドドロップします。これでファイルの内容を表示する事ができます。

簡単ですが、ファイルをドラックアンドドロップする手間、更新のたびにリロードしなければならない手間があります。

②.Live HTML Previewer

この拡張機能を入れれば、vscode上ボタン一つでブラウザにファイル反映する事ができます。

ボタン一つで変更できますが、ファイル変更時は、再度ボタンを押しファイルを開き確認する必要がある。

Live HTML Previewer　インストール方法

「拡張機能」ボタンを押す→検索バーに「 Live HTML Previewer」を入力→「インストール」を押す。 Live HTML Previewerが使用できるようになります。

開きたいHTMLファイルの上で、右クリック「Open in browser」をクリックするとブラウザに表示する事ができます。

③.Live Server

Live Serverは、ボタン一つでブラウザを開く事ができ、リアルタイムで自動更新してくれます。

HTML CSS JavaScriptの変更は確認できますが、PHPファイルの変更を確認する事ができません。

Live Serverのインストール方法

下記より「Live Server」をインストールします。
https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

URLをクリックすると、下記画面に遷移するので、「install」ボタンをクリック

すると下記、メッセージがでますので、「Visual Studio Code」を開くをクリック

インストールボタンを押します。
これで「Live Server」のインストールは完了です。。

「Live Server」の使い方

まずは、htmlファイルが格納されているフォルダを開きます。
「ファイル」→「開く」で開きます。

フォルダを開くと、画面右下に「Go Live」が表示されます。
「Go Live」をクリック

ローカルサーバーが立ち上がり→「HTML/CSS」が反映されたページが開かれます。

コードを修正するとリアルタイムでブラウザに反映されます。

停止したい場合は、画面右下にある「Port:5500」をクリックし停止する事ができます。

これでファイルをリロードする手間が省け、リアルタイムで変更をブラウザで確認する事ができます。

Browser Preview

ボタンをクリックすると、vscode上でブラウザが起動し、画面の右側に
指定した URL のページが表示されます。
phpファイルで変更した内容も表示されます。

Browser Previewインストール方法

「Browser Preview」はブラウザ「Google Chrome」のみ対応となっています。
「Google Chrome」をインストールされていない方は、下記よりダウンロードお願いします。
https://www.google.co.jp/chrome/

拡張機能ボタンを押し→検索バーに「Browser Preview」を入力→「インストール」をクリック。これでインストール終了

Browser Previewの設定

「code」→「基本設定」→「設定」

検索バーに「Browser Preview」と記入
Browser-preview: Start Urlに、
ブラウザ起動時に表示するページ URL を設定。
ローカルで開発を行っているwordpressの URL などを設定しておくと、ブラウザ起動時に変更画面がすぐに確認できるので便利です。

Browser Previewの使い方

Browser Previewのマークをクリックすれば、指定したURLページがvscode上に表示されます。
phpファイルの編集も反映されるのでwordpressに向いている、拡張機能です。

まとめ

今回は、vscodeの内容をブラウザ表示させる4つの方法を解説しました。

1.HTMLファイルをブラウザにドラックアンドドロップ
2.Live HTML Previewer（拡張機能）を使う
3.Live Server（拡張機能）を使う
4.Browser Preview（拡張機能）を使う

一番の目的は開発の効率化です。

ご自身にあった表示方法を取り入れ、開発効率の向上に
役立てていただけたら幸いです。

その他、同じような話題で以下も取り上げていますので、よろしければご覧ください。