htmlやcssは本来WebServerに配置して世界中に公開するものだ。
しかし、開発段階で毎回WebServerに配置してチェックするのは効率が悪い。
その場合はPC内に擬似的な環境を使って開発していくことになる。
今回はPC内で作る疑似的な環境としてもっとも簡単にできる
VSCode + Live Server
環境を作成する
Step:1 VSCodeをインストール
これはもうお済みだろう。フロントエンド開発のデファクトスタンダードともいえるVSCode。これに異論はないだろう。もしまだな人は以下からダウンロード&インストール
https://code.visualstudio.com/
Step:2 Live Server 拡張機能を入れる
VSCodeに拡張機能として
- Live Server(Ritwick Dey)
をインストール
Step3: サーバーで実行
たったこれだけで環境構築が完了だ。
好きな場所(デスクトップなど)に新規にフォルダを作成して確かめみよう。
ここでは、デスクトップにLiveTestフォルダを作成して、そこにtest.htmlを作成していく。
- test.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>Hello Live Server!</p>
</body>
</html>- VSCode上でtest.htmlを右クリックすると出てくるメニューにOpen with Live Serverを選択
- ブラウザが開いて表示される。URLを見るとWebServer上で配信されていることがわかる
- ただし、これはローカル環境でのアドレスなのでこのPC上のみで有効なURLなので注意
完了
たったこれだけのステップでフロント開発環境が整ってしまった。
「別にファイルをブラウザで開けば同じなんじゃないか？」
と感じた人もいると思うが、これが結構違う。
まず、ファイル名の大文字、小文字問題がある。fileドロップでは大文字・小文字は区別しないので問題なく表示されるが、一般的なWebServerはこれを区別する。
なのでファイルドロップで確認してときはOKなのに、いざ公開となったときに「なんでだ〜？？」ということが起こる。ローカルで表示されていたcat.JPGという記述が本番では非表示になってしまうということだ(本当のファイル名はcat.jpg)
次にJavaScriptを記述した場合だがファイルアクセスではセキュリティ上の問題で
- ローカルファイル同士の読み込み
- JSモジュールの読み込み
- 外部APIへの通信
に制限が加わる。
Live Server を使うことで、
「実際のWebサイトに近い HTTP 環境」
でコードを動かせるようになるのだ。
ときにローカル開発環境では、ファイルの配置場所が決まっていたりするものだが、今回のVSCode + Live Server
の組み合わせはその制限もない。フロントエンド(html+css+js)の開発には是非この便利なLiveServerを使っていこう。
コメント