スクールでの頻出エラー

2022年3月18日

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

学習時の状況やレベル

  • 学習時期:HTML・CSS学習初期
  • 受講生が既に学んでいること:作成したHTMLファイルをブラウザで確認する方法

こんにちは!

DIVE INTO CODE mentorの齊藤です!

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

スクールでのとあるやりとり

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

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

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

VSCode拡張機能:Live Serverインストールページ

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

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

ほうほう…?

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

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

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

簡単そう!

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

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

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

まとめ

  • テキストエディタの拡張機能を使う
  • 変更されない場合はリロードしたりLive Serverの再起動する

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

DIVE INTO CODEのことをもっと知ってみませんか?