書いて、直して、また見る。この“くり返し”をラクにする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で直して保存した瞬間、ブラウザが自動でパッと最新の見た目に変わるのです。もう「更新」を押す必要はありません。
これで「書く → 見る」のくり返しがぐっとラクになりました。