Visual Studio Code（VS Code）でコードを書いたあと、「ブラウザでどう表示されるか確認したい」と思ったことはありませんか？
そんなときに便利なのが、拡張機能 「Live Server（ライブサーバー）」 です。
このツールを使えば、コードを保存するたびにブラウザが自動で更新され、リアルタイムで結果を確認できます。
この記事では、初心者の方でも迷わないように、Live Serverのインストール方法から基本的な使い方までを画像付きで丁寧に解説します。
Live Server（ライブサーバー）とは？【VS Codeで自動プレビューできる神ツール】
Live Serverの基本機能
Live Server（ライブサーバー） は、Visual Studio Code（VS Code）の人気拡張機能のひとつです。
簡単に言うと、「コードを書いたらすぐブラウザで表示してくれるツール」。
ファイルを保存するたびにページをリロードする必要がなく、リアルタイムで変更を確認できます。
これにより、HTML・CSS・JavaScriptの学習効率が大幅アップ！
特に初心者がつまずきやすい「更新しても反映されない…」といった悩みを解消してくれます。
Live Serverを使うメリット
① コードを保存するだけでブラウザが自動更新
通常、HTMLファイルを編集した後は、ブラウザを手動で再読み込み（リロード）しなければなりません。
しかし Live Server を使えば、保存（Ctrl＋S / ⌘＋S）するだけでブラウザが自動的に最新の状態に更新されます。
② コーディングの効率が圧倒的に上がる
コードの変更を即座に確認できるので、デザインやレイアウトの調整もスピーディー。
初心者でも、「どの部分を修正したらどう変わるか」をリアルタイムで学べます。
③ 初心者でも簡単に導入できる
Live ServerはVS Codeの拡張機能として数クリックでインストール可能。
プログラミング初心者でも迷わずセットアップできる点が魅力です。
VS code でコードを書いたら、そのコードを画像として表示させなければなりません。
こちらが私が書いたコードです。↓↓
まず、書いたコードを「 保存 」します。次に自分の書いたコードを画像として表示させるために、Safari（サファリ）やGoogle（グーグル）またはChrome（クローム）などのブラウザを手動で立ち上げ、自分の書いたコードを、ドラック&ドロップさせたり、更新したりすることで、書いたコードを画像として表示させる必要があります。
画像で表示されたらこんな感じ↓↓
しかし Livs Server を使えばその手間がなくなります！
書いたコードを保存した時点で、↑↑上の画像を表示してくれます。
自動で更新されて最新の状態を表示してくれるんです！！！！
インストール手順
Live Server を使うには、まずインストールが必要です。
手順はとても簡単で、前回、日本語表示をするための拡張機能をインストールしたやり方と同じです。
１ Visual studio Code を開く
2 左側の「 四角いアイコンをクリック 」すると
前回、日本語表示をするための拡張機能が一つインストール済みになっています。（地球儀みたいなやつ）
3 検索バーに「 Live Server 」と入力すると
4 似たような Live server が出てきますが【 Live Server 】とだけ書いてあるものをクリックする↓↓
5 インストールをクリック↓↓
5 インストールが完了したら、インストールのところが【 アンインストール 】に変わります。↓↓
6 Visual studio codeを一旦閉じます。 完全に閉じてください。visual studio codeを再起動し、四角が4つあるアイコンをクリックすると、Live Server がインストールされているのが確認できます。↓↓
まとめ｜Live Serverで学習スピードを2倍に！
Live Server を使えば、VS CodeでのWeb制作が驚くほどスムーズになります。
ブラウザの自動更新で無駄な操作を省き、学習効率をアップ。
初心者こそ、まずこの拡張機能を導入することで
「書く → 保存 → 確認」という流れが自然に身につきます。
次回は、【 実際にどのように表示されるのか 】Live server の使い方を紹介します
関連記事→【HTML入門】タグとは？初心者がまず覚える基本と使い方
Comments