browser-syncでライブリロード開発環境を整える

概要

静的なHTML/CSS/JSを編集するたびにブラウザを手動でリロードするのは、地味ながら積み重なると大きなストレスになります。browser-sync を使うと、ファイルを保存した瞬間にブラウザが自動でリロード（あるいはCSSだけ差し替え）され、さらに複数デバイス・複数ブラウザの操作を同期できます。

この記事では、browser-sync をゼロから導入し、ライブリロード開発環境を整えるまでの手順を入門者向けに解説します。

browser-sync とは

browser-sync は、ローカル開発時に次のことをしてくれるツールです。

• ライブリロード: ファイル変更を検知して自動でブラウザをリロード
• CSSインジェクション: CSSはページを再読み込みせずスタイルだけ差し替え（スクロール位置を保ったまま反映）
• デバイス同期: 同一LAN内の複数端末でスクロール・クリック・フォーム入力を同期
• 静的サーバ機能: 簡易HTTPサーバとしても動く
• プロキシ機能: 既存のバックエンド（PHP/Rails/WordPressなど）の前段に差し込める

ビルドツール非依存で、素のHTML/CSS制作から既存アプリの前段差し込みまで幅広く使えるのが特徴です。

環境

• Node.js（LTS系を想定）
• npm または yarn
• ブラウザ（Chrome / Firefox など）

バージョンは環境により異なります。本記事のコマンドはNode.js LTS + npm を前提にしています。

インストール

プロジェクトローカルにインストールするのがおすすめです。

npm init -y
npm install --save-dev browser-sync

グローバルに入れることもできますが、プロジェクトごとにバージョンを固定できるローカルインストールを推奨します。ローカルに入れた場合は npx browser-sync で呼び出せます。

npx browser-sync --version

使い方1: 静的サーバとして起動する

HTMLファイルを直接配信しつつ、変更を監視するパターンです。制作中のLP・静的サイトに向いています。

npx browser-sync start --server --files "**/*.html, css/*.css, js/*.js"

• --server: カレントディレクトリを静的サーバとして配信
• --files: 監視対象。ここに指定したファイルが変わるとリロード（CSSは差し替え）

起動すると、次のような情報が表示されます。

[Browsersync] Access URLs:
 --------------------------------------
       Local: http://localhost:3000
    External: http://192.0.2.10:3000
 --------------------------------------
          UI: http://localhost:3001
 UI External: http://192.0.2.10:3001
 --------------------------------------

• Local: 自分のマシンからアクセスするURL
• External: 同一LAN内の他端末（スマホ実機など）からアクセスするURL
• UI: browser-sync の管理画面。同期設定やネットワークスロットリングを操作できる

使い方2: 既存バックエンドのプロキシとして使う

PHPやWordPress、Railsなど、すでに別ポートで動いているアプリの前段に差し込むパターンです。

npx browser-sync start --proxy "localhost:8080" --files "**/*.php, **/*.css, **/*.js"

--proxy に既存アプリのホスト:ポートを指定すると、browser-sync がその前段に入り、ファイル変更時にリロードを挟んでくれます。バックエンド込みの案件でライブリロードだけ足したい、というときに便利です。

使い方3: 設定ファイルで管理する

コマンドが長くなってきたら設定ファイルに切り出します。プロジェクト直下に bs-config.js を作成します。

// bs-config.js
module.exports = {
  server: {
    baseDir: "./",
  },
  files: ["**/*.html", "css/*.css", "js/*.js"],
  port: 3000,
  open: false,          // 起動時に自動でブラウザを開かない
  notify: false,        // ブラウザ右上の通知バナーを消す
  ghostMode: {          // デバイス間の同期対象
    clicks: true,
    forms: true,
    scroll: true,
  },
  reloadDelay: 0,
};

起動は次の通り。

npx browser-sync start --config bs-config.js

package.json にスクリプト化する

毎回コマンドを打つのは面倒なので、package.json に登録しておきます。

{
  "scripts": {
    "dev": "browser-sync start --config bs-config.js"
  }
}

npm run dev

これでチームの誰が触っても同じ起動方法になり、READMEに「npm run dev でOK」と書けるようになります。

CSSインジェクションを効かせる

CSSは「ページ全体のリロード」ではなく「スタイルだけ差し替え」が理想です。これが効くと、スクロール位置やフォーム入力状態を保ったままデザイン調整ができます。

browser-sync は、--files で監視している対象が .css の場合は自動でインジェクション（差し替え）を試みます。もしCSS変更でもフルリロードされてしまう場合は、<link rel="stylesheet"> のURLにクエリ文字列やハッシュが付いていないか、HTML側でCSSをインライン化していないかを確認してください。インラインスタイルやクエリ付きURLはインジェクションの対象外になります。

確認方法

導入が正しくできているかは次の手順で確認します。

1. npm run dev で起動し、表示された Local URL をブラウザで開く
2. HTMLを編集して保存 → ブラウザが自動リロードされる
3. CSSを編集して保存 → リロードされずにスタイルだけ変わる（スクロール位置が保たれる）
4. External URL をスマホ実機で開き、PC側でスクロール → スマホ側も連動する

3と4が確認できれば、ライブリロードとデバイス同期の両方が機能しています。

注意点

• External URL は同一LAN内限定: 社外や別ネットワークからは原則アクセスできません。ファイアウォールやVPNの設定によっては同一LAN内でも弾かれます。
• 監視対象の広げすぎに注意: node_modules などを含めて監視すると起動が重くなります。監視グロブは必要なディレクトリに絞りましょう。
• 本番配信には使わない: browser-sync はあくまで開発用ツールです。本番の配信サーバには使いません。
• ビルドツールとの併用: Vite や webpack-dev-server には独自のHMRがあるため、それらを使うプロジェクトでは browser-sync と役割が重複します。素のHTML/CSSや、HMRを持たない既存バックエンドの前段で特に効果を発揮します。

まとめ

• browser-sync は、保存のたびのブラウザ手動リロードをなくす開発支援ツール
• --server で静的サーバ、--proxy で既存バックエンドの前段、と使い分けられる
• CSSはインジェクションでリロードなしに差し替わるため、デザイン調整が快適になる
• 設定は bs-config.js に切り出し、package.json の dev スクリプトに登録しておくとチームで共有しやすい

まずは静的サーバモードで npx browser-sync start --server --files "**/*.html, css/*.css" を試し、保存→自動反映の体験から始めるのがおすすめです。