はじめに
ご覧いただきありがとうございます。今回は、Visual Studio Code（VSCode）で簡単にローカルサーバーを立ち上げることができる拡張機能 Live Server の使い方と設定方法を紹介していきます。
Live Serverとは
Live ServerはVSCodeでローカル開発用サーバーを簡単に立ち上げることができる拡張機能です。ファイルを保存すると自動でブラウザをリロードして変更をリアルタイム反映してくれたり、ローカルサーバー環境で動かすことでファイル間のリンクやJavaScriptの動きを本番に近い形で確認できます。
使い方・手順
以下の手順でインストールと設定をします。
- 拡張機能をインストール
- Go Liveボタンでローカルサーバー立ち上げ
- ブラウザで自動表示＆更新
1. 拡張機能をインストール
まずVSCode起動します。
①左のサイドバーから「拡張機能（四角いアイコン）」を選択します。
②検索欄にLive Serverと入力するとRitwick Dey 作の「Live Server」が出てくるため選択します。
③インストールボタンをクリックしてインストールします。
2.Go Liveボタンでローカルサーバー立ち上げ
①.htmlファイルを VSCode で開きます。(例：index.html)
②Live Serverがインストールされたことで右下に「Go Live」ボタンが表示されているので、クリックします。
※ファイル名を右クリックして「Open with Live Server」でもOKです。
これでローカルサーバーが立ち上がります！
3. ブラウザ自動表示＆更新
ローカルサーバが立ち上がると通常http://127.0.0.1:5500/やhttp://localhost:5500/でブラウザが自動的に開きます。
この状態でVSCodeでファイルを編集・保存すると、リアルタイムで更新が反映され、ブラウザで確認できます。
オプション設定
Live Serverのオプション設定をご紹介します。オプションの設定はsettings.jsonの編集で行えます。
settings.jsonの開き方
①サイドバーの左下にある「歯車アイコン」を選択
②メニューから「拡張機能」を選択
③Live Server Configを選択
④settings.jsonで編集をクリック
ポート番号の変更
ポート番号を変えたい場合はsettings.jsonに以下を追加します。この例の場合ローカルサーバー起動時のポート番号が5555になります。
"liveServer.settings.port": 5555,設定を保存して再度Go Liveボタンをクリックするとポート番号が5555番に変更されていることが分かります。
デフォルトブラウザを設定
デフォルトで開くブラウザを変更したい場合は以下を追加します。
"liveServer.settings.CustomBrowser": "ブラウザ名"Microsoft Edge … edge または msedge
Firefox… firefox
Safari（Macのみ）… safari
例としてmsedgeで設定し、再度Go Liveをクリックすると自動的に開くブラウザがChromeからEdgeに変更になりました。
まとめ
今回は簡単なローカルサーバーの立て方をご紹介しました。Live Serverの設定で自分に合った開発環境を構築でき、ブラウザの自動起動や自動リロード機能で作業の効率もUPしますね。設定方法や手順が参考になれば幸いです。お読みいただきありがとうございました！
