記事・特集リスト
無料お役立ち資料
本サイトについて
お問い合わせ
閉じる

【Live Server】Visual Studio Codeの便利な拡張機能 (基礎知識・使い方)

Visual Studio Codeの拡張機能「Live Server」について解説。 「Live Server」を使用すると「一手間」減らす事ができ、開発が効率的になります。 「Live Server」の基礎知識、インストール方法、使い方、設定と徹底解説していきます。

カテゴリ: Visual Studio Code

Visual Studio Codeでプログラミンしているけど
「Live Serverって何・・・?」「Live Serverを実践的に取り入れてみたい・・・!」「効率的な開発をしたい・・・!」
そんなお悩みを抱えた人はいませんか?

「Live Server」って聞くと難しそう感じる人もいますが、実は簡単に取り入れることができ「作業効率」をあげる事ができます。

今回は、基礎知識、インストール方法、使い方、設定と全て網羅し徹底解説していきます。

Visual Studio Codeとは?

Visual Studio Code(vs code)とは、マイクロソフト社が無料で提供しているテキストエディタの事であり、世界中のエンジニアの中でも利用者の多い人気ソフトです。

vs codeが人気のある理由として5点があがられます。

1.オープンソースであり、誰でも無償で利用する事ができる。
2.Windows版・macOS版・Linux版と各OSに対応している。
3.多くの言語に対応している(英語、日本語、フランス語、ドイツ語、中国語、ロシア語)などその他、各国の言語に対応している。
4.拡張機能が豊富(デバック機能、コード補完、ソースコードのシンタックスハイライトなど)
5.軽量で早く動く(余計な機能は最初から省かれているので、ストレスなく動く)

今回は、拡張機能【Live Server】について解説します。

【Live Server】とは?

Live Serverとは、vs codeの拡張機能の一つであり、テキストエディタの変更内容をリアルタイムでブラウザに反映できる機能です。
リアルタイムで変更を反映することで、ファイルを手動でリロードしなおす事なく、反映を確認できるので、効率的な開発をする事ができます。

仕組みとしては、Live Serverを利用して、ローカルサーバーを立てているので、リアルタイムに変更が反映され、確認する事ができる仕組みです。

Live Serverのインストール方法

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

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

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

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

vs codeを再起動すると「Live Server」が使用できるようになります。

「Live Server」の使い方

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

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

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

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

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

「Live Server」を開く別の方法

ファイルを右クリック「Open with Live Server」を選択してもLive Serverを開く事ができます。

指定したブラウザで「Live Server」を開く

「Live Server」が起動するWebブラウザは、PCで設定しているデフォルトブラウザとなります。
これを指定したブラウザで開く方法を解説します。
今回はブラウザ「chrome」を指定します。

設定ボタンを押し、「拡張機能の設定」をクリック。

「liveServer.settings.AdvanceCustomBrowserCmdLine」で
settings.jsonで編集をクリック

“liveServer.settings.AdvanceCustomBrowserCmdLine”: “chrome”,を指定
すると「Live Server」はブラウザ「chrome」で表示されます。

Live Serverには、chrome以外にも、「chrome:PrivateMode」「firefox」「firefox:PrivateMode」「microsoft-edge」「blisk」を指定する事ができます。

ローカルサーバーのホスト名を変更する

ローカルサーバーのホスト名を変更するには、settings画面から「liveServer.settings.host」を選択し変更する事ができます。

ローカルサーバーのポート番号を変更する

ローカルサーバーのポート番号を変更するには、settings画面から「liveServer.settings.port 」を選択し。

settings.jsonでポート番号を変更します。
ポート番号をランダムにしたい場合は0を指定します。

まとめ

今回は、Live Serverの「インストール方法」「使い方」「設定」を解説してきました。
「Live Server」のメリットは、なんといってもリアルタイムで反映を確認しながら開発ができる事です!

いちいち手動でファイルをリロードしなくても良いので、圧倒的に開発効率が上がります。本記事を参考にして頂けたら幸いです。

最後までお読みいただきましてありがとうございます。ご意見・ご要望などございましたら、
以下のフォームよりお問い合わせを受けつけておりますので、よろしければご利用ください。

この記事がお役に立ちましたら、"いいね!"をお願いします
minwebの最新情報をお届けします

minweb編集部(株)セルリア

”共に考え、共に創るWebの成功戦略”というスローガンのもと、お客様と一からWeb戦略を考え、
企画し実装まで支援する伴走型Webコンサルティング会社です。

こちらの記事をお読みのかたにおすすめ!完全無料のダウンロード資料

Googleサーチコンソール使い倒し活用術  <AOHON>

ダウンロード資料画像

Googleの検索エンジンに関する情報を幅広く確認できるツール「Googleサーチコンソール」の活用方法をまとめました。新サーチコンソールの機能を網羅的に紹介するだけでなく、Webサイトを最適化できる実践的な方法までわかりやすく解説します。

サーチコンソール初心者の方が知りたい導入方法から、上級者向けのコンテンツ改善の方法まで、押さえておきたい要素を1つに集めた、SEOに力を入れたいすべてのWeb担当者におすすめの一冊です。