VSコードで作成したWebサイトの表示確認と便利な拡張機能について
当たり前の話になりますが、作成したWebサイトを確認する際は、ChromeやEdgeなどのWebブラウザを利用します。
ここでは、VSコードで作成したWebサイトをブラウザで確認する方法と、効率よく反映・確認ができるようになるVSコードの拡張機能について紹介します。
この記事の目次
ブラウザで確認する手順
Webサイトを制作する場合、2通りの確認方法があります。
- PC内にある「.htmlファイル」を開く。
- インターネット上にあるWebサイトはURLからアクセスする。
この2つは前提条件によって確認の方法が変わるため、「PC内で完結しているWebサイトか？」「アップロード済みのWebサイトか？」を把握しておく必要があります。
PC内にあるHTMLファイルを開く
アップロードがまだのWebサイトを確認する場合、.htmlファイルをダブルクリックすることで、既定のブラウザが立ち上がり、作成中のWebサイトが表示されます。
Webサイト制作の基本的な話になりますが、Webサイトを構成するファイル（.htmlやCSS、画像ファイル）は必ず同じフォルダに入っているのを確認してください。
1.Webサイトのデータが入っているフォルダを開き、確認したいページの.htmlファイル（ここではindex.html）をダブルクリックします。
2.既定のブラウザ（ここではGoogle Chrome）が立ち上がり、HTMLの情報を読み取ってindex.htmlのページが表示されます。
このとき、アドレスバーには「ファイル」と表示され、index.htmlのファイルパスが表示されます。
3.VSコードでindex.htmlを少し編集して保存します。この時ブラウザ（ページ）は開いたままにしておきましょう。
4.再びブラウザに戻り、「再読み込み」のボタンをクリック（もしくはctrl+R）することで、保存された内容のindex.htmlに変更されます。
インターネット上にあるWebサイトはURLからアクセスする。
アップロード済みのWebサイトに関しては、ブラウザを起動してURLからアクセスすることで表示確認をすることができます。
1.ブラウザを起動し、URLを入力して（もしくはブックマークから）アクセスする。
2.VSコードで編集したファイルをFTPツール（ここではFilezilla）からアップロードする。（ページは開いたまま）
3.再びブラウザに戻り、「再読み込み」のボタンをクリック（もしくはctrl+R）することで、保存された内容のindex.htmlに変更されます。
4.インターネット上のWebサイトにてCSSの編集を確認する場合、ブラウザのキャッシュ（２回目以降表示を早くする仕組み）が残ってて反映されない場合があります。
その場合は「ctrl+shift+R」のスーパーリロードを行うか、ブラウザの検証ツールを起動して「再読み込みボタンを右クリック」→「キャッシュの消去とハード再読み込み」を行うことで反映されるようになります。
表示確認で役に立つVSコードの拡張機能
上記の表示確認はWebサイト制作には必ず行うもので、その回数も数えきれないほどになります。
そんな時、VSコードの保存に合わせて自動で最新の状態に再読み込みしてくれる拡張機能があるとWeb制作の効率が良くなります。（特にインターネット上のWebサイト）
Live Server
ローカル（PC内で完結する）でのページ確認を行う際に、VSコードの編集内容が保存されると自動的に再読み込みを行う拡張機能で、事前に設定を行い、専用のリンクからWebページを開くことで利用することができます。
1.事前に紐づけるブラウザの設定が必要なので、上記画像の歯車アイコンをクリックし「Setting Custom Browser」の項目から、利用するブラウザを指定します。（ここではChromeですが、プライベートモードで開くことも可能です）
2.拡張機能を起動すると、画面の右下に「Go Live」という文字が表示されるので、ここをクリックします。
3.指定したブラウザ（ここではGoogle Chrome）が起動し、特別なリンクからWebページが表示されます。
※HTMLファイルを直接開いたページとは違うのでご注意ください
4.VSコードで編集して保存（自動保存推奨）すると、即座にLive Serverが反応し、特別なリンクで開いたページが最新の状態になります。
6.ローカルで作業を行う場合は、.htmlファイルをブラウザで開き、確認時に再読み込みを行うだけなので、特にこの拡張機能があっても無くてもあまり変わらないので、使う・使わないは、お好みで選んでください。
sftp sync extension for VS Code
インターネット上にアップロードされているWebサイトの場合、FTPツールでファイルの上書きアップロードが必要になります。
この拡張機能は、契約しているサーバーの情報を使って連携し、VSコードの保存に合わせてFTPツールを使わずに自動でファイルをアップロードしてくれる便利な拡張機能ですが、サーバーが絡むため少々面倒な設定が必要になります。
1.この拡張機能の設定として、サーバー情報を「sftp.json」というファイルに記入して行うため、Webサイトが入ったフォルダに「.vscode」というフォルダを作成します。
2.VSコードで「ファイル」→「新しいテキストファイル」を作成し、言語を「JSON」に設定します。
3.はじめに保存するため、「ファイル」→「名前を付けて保存」をクリックし、先ほどの「.vscode」のフォルダの中に「sftp.json」と名前を変更してから保存します。
4.「sftp.json」のファイルには以下のFTP情報を入力します。
{
"name": "接続名（わかりやすいもの）",
"host": "サーバーのホスト名",
"protocol": "ftp",
"port": 21,
"username": "FTPユーザー名",
"password": "FTPパスワード",
"remotePath": "Webサイトのフォルダパス",
"uploadOnSave": true,
"ignore": [
".vscode",
".git",
"node_modules"
],
"debug": true
}
これらの情報はサーバーによって変わりますので、FTP設定の項目を確認してください。
例えば、FC2ホームページの場合はこのページから確認できます。
Webサイトのフォルダパスはわかりにくいのですが、Filezillaの「リモートサイト」から確認できます。
※sftp.jsonファイルは、Webサイトごとに設置可能です。
5.VSコードで編集（保存）すると、自動でファイルをアップロードしますが、Live Serverと違ってブラウザの操作を制御しているわけではないため、再読み込みは自分で行う必要があります。
※Chromeの拡張機能で可能になるらしいですが、未検証のため割愛します。
ローカルで作業をする場合はあまりメリットはありませんが、サーバー上にあるファイルを編集する時はFTPで手動アップロードする手間が無くなるため、かなり効率が良くなるかと思います。
設定が少し必要ですが、一度設定しておけば他のサイトにも応用できるようになりますし、なによりFTPツールを立ち上げたり、それを使ったドラッグ＆ドロップをその都度しなくても良いのがとても便利なので、ぜひ取り入れていただくことをお勧めします。
