lite-serverでローカルファイル保存時に自動表示更新

ウェブサイトを作るとき、ファイルを保存したらブラウザが自動で更新してくれると便利ですよね。でも、以前Google Chromeで試してみたら、CSSファイルはすぐ反映されたのに、HTMLファイルは更新されませんでした。この問題を解決してくれたのが“Lite-Server”というツールです。とても簡単で便利なので、今回はその使い方を説明します！

まずは準備しよう

Lite-Serverを使うには、Node.jsというソフトが必要です。Node.jsがまだ入っていない人は、公式サイトからダウンロードしてインストールしてください。

Lite-Serverをインストールする方法

Lite-Serverは、ファイルを変更するとブラウザを自動でリロードしてくれるツールです。インストールの手順は次のとおりです。

1. パソコンのターミナル（コマンドプロンプト）を開きます。
2. 次のコマンドを入力して、Lite-Serverをインストールします。

npm install -g lite-server

このコマンドを実行すると、Lite-Serverがパソコン全体で使えるようになります。これでどのプロジェクトでも手軽に使えます！

Lite-Serverを使ってみよう

Lite-Serverの使い方はとても簡単です。

1. HTMLファイル（例えばindex.html）があるフォルダに移動します。
2. 次のコマンドを入力してLite-Serverを起動します。

npx lite-server

すると、ブラウザが自動で開いて、index.htmlの内容が表示されます。

保存するだけでブラウザが更新！

Lite-Serverを使うと、HTMLやCSSファイルを保存するたびにブラウザが自動で更新されます。例えば、HTMLを少し変更して保存するだけで、ブラウザがすぐに最新の状態を表示してくれます。これで、手動でページを更新する必要がなくなります！

まとめ

Google Chromeのワークスペース設定を使う方法もありますが、Lite-Serverを使う方が簡単で便利です。Node.jsさえインストールしていれば、すぐに導入できます。特に、頻繁にファイルを変更する場合は、このツールが大活躍します。

ウェブサイト作りをもっと効率よく進めたい人は、ぜひLite-Serverを試してみてください！