matsutoba’s blog

フロントエンドエンジニアをしています

HTMLコード編集をブラウザに自動反映

フリーランスになる直前ぐらいにWebデザインの学校に通っていました。

デザインをしてもらって簡単なフロントエンドのコーディングはしていたのですが、デザインを作るところから開発チームに渡すところまでをどのように進めるのか、またデザイナーさんの作業はどのようにしているのかを知りたかったので学校に通うことにしました。

書籍でも勉強できるのですが、実際に現役のデザイナーさんに話が聞けたり、現場ではこのように進めるとかこのようにコーディングするという話がきけるので、(受講料は高いですが)良かったと思います。

HTMLコーディング時のリロードめんどくさい問題

html/cssのコーディングの課題を始めると、html/cssで保存してブラウザで確認という作業を繰り返しながら行いますが、細かく調整しながら都度リロードして確認するのはやはり面倒です。

Live Server プラグイン

私は他の言語のプログラミングをすることもあるので、Visual Studio Code を使うことが多いのですが、CTRL+S を押したらブラウザを勝手にリロードして表示してくれるプラグインがないかなぁと探したところ、やっぱりありました。

marketplace.visualstudio.com

Visual Studio Code にインストールしてサーバを起動します。Visual Studio Codeからhtmlを開いておき、htmlを更新するとブラウザに自動反映されます。

これでブラウザを選択して毎回 CTRL+R しなくて済むので作業がはかどりそうです。

Live Sass Compiler プラグイン

HTMLだけではなく、Sassも変更の都度自動反映してほしいのですが、こちらもプラグインがありました。

これを設定しておくと、ファイル保存時にsassからcssコンパイルを自動実行してくれて、Live Serverプラグインもいれていれば、CSS反映が自動で行われるのでとても効率よくなりました。

marketplace.visualstudio.com