[スクールでよくある質問] HTMLの変更をすぐに知りたい! 爆速開発その1

htmlを記述した後に変更を確認するためにリロードします。当たり前の作業ではありますが毎回行うと面倒です。リロードの手間を省く実例を紹介します。

こんにちは！

ディープロ mentorの齊藤です！

今回は、知っていると作業が捗るHTMLの動作確認について紹介します！
エンジニアは効率的な作業をすることがとても大事です。

HTML・CSSファイルの変更内容を即座にページ上に反映、確認できると開発の作業効率が上がります！
HTML ブラウザに表示してみようのテキストにもあるように、通常であれば自分が作成したHTMLのpathをブラウザに入力すればプレビューが表示されて,
変更をするたびにリロードが必要です。

確かに、毎回ブラウザを更新してプレビューを確認するのがちょっと面倒でした…

リロードすればいいだけですが、この小さな手間も省けたら楽ですよね。そこで、テキストエディタVSCodeの拡張機能Live Serverを使って変更をすぐに反映していきます。

Live Serverの特徴としてこんなものがあります。

静的および動的ページのライブリロード機能を備えたローカル開発サーバーを起動します。

ほうほう…？

つまりこの機能を使うと変更した内容を自動で反映することができリロードする手間が省けます。(便利！)

すごく便利そうです！
こうやってエディタを自分用にカスタマイズしていくんですね！！

それではさっそく使っていきいましょう。

簡単そう！

あとはhtmlとcssの画面表示を表示しながらブラウザも開いておくと直感的で利用しやすい開発環境のできあがりです。

すごい！これだけで使いやすくなりました！
他にも便利そうな拡張機能を探してみます！

ありがとうございました！

まとめ

ディープロでは5月期の受講生を募集中！興味を持った方や、学習に関して悩みがある方は是非説明会にご参加ください！