書いて、直して、また見る。この“くり返し”をラクにする2つの方法を紹介します。ブラウザの更新と、Live Serverの自動プレビューです。
書いたHTMLをブラウザで開けました。でもこれから何度も「ちょっと直しては、見て」をくり返します。そのたびにファイルを開き直すのは大変。そこで今回は、作ったものをサッと確認するコツを覚えます。これを知ると、練習のテンポが上がります。
どちらでも、やっていることは同じ「書いたHTMLを画面で確かめる」。自分がラクな方でかまいません。
⌘/Ctrl + S → ⌘/Ctrl + R）いちばん基本のやり方です。手順はたったの2つ。
Ctrl + S / Macは⌘ + S）Ctrl + R / Macは⌘ + R。キーボードのF5でもOK）すると、直した内容がブラウザに反映されます。「保存 → 更新」。この2つをセットで覚えましょう。
「変わらない！」の二大原因
直したのに変わらないとき、犯人はたいていこのどちらか。①保存を忘れている（VSCodeのタブに「●」が出ていたら未保存のサイン）、②ブラウザの更新を忘れている。「保存した？更新した？」と、この2つを声に出して確認するのが近道です。
「毎回“更新”を押すのも地味に面倒……」。その気持ちに応えてくれるのがLive Serverです。以前入れた拡張機能、いよいよ出番です。
使い方はかんたん。VSCodeでindex.htmlを開いた状態で、ファイルの上で右クリック → 「Open with Live Server」を選ぶだけ。
index.htmlを右クリック → Open with Live Serverすると自動でブラウザが開き、ページが表示されます。すごいのはここから。VSCodeで直して保存した瞬間、ブラウザが自動でパッと最新の見た目に変わるのです。もう「更新」を押す必要はありません。