エンドユーザーが利用するページは、たくさんのデバイスやブラウザで閲覧されています。
フロントエンドのエンジニアは、それらの数えきれない閲覧環境で正しい見た目と動作を出来る限り保証できるページを実装する必要があります。

もちろん実際には全ての環境に対応することは現実不可能で、クライアントの要望やターゲットとなるユーザーを想定して対応すべきデバイスやブラウザを決めて実装します。

そういった様々な環境に対応するには、十分なテストが必要になり、何度もブラウザで動作確認をすることになります

今回紹介する「browser-sync」はソースコードファイルを監視し、自動でブラウザをリロードしてくれたり、モバイルの実機確認を快適にしてくれる便利ツールです。

導入の手順

browser-syncはnpmを使って導入するので、事前に「node.js」をインストールしておきます。

browser-syncのインストール

CLIにて、インストールしたいプロジェクトのディレクトリまで移動します。

npmでbrowser-syncを開発用でローカルインストール。 ＊npmを初期化していない場合は先に初期します。

設定のカスタマイズ

インストールが完了した後にbrowser-syncのコンフィグファイルを作成します。

コマンドを実行すると現在のディレクトリに「bs-config.js」が作成されます。

このコンフィグファイルではbrowser-syncの様々な設定をカスタマイズできます。詳細は公式ドキュメントで確認できます。

▶︎Browsersync options

今回は必要な設定のみを残して不要な記述は削除してしまいます。

“files“はプロジェクト内の監視対象にするファイルを指定します。
[*（アスタリスク）]はワイルドカードで、ファイル名を任意の文字と文字数で指定できます。ディレクトリ名で使用する場合は「**」とします。

“proxy“はプロジェクトのローカル環境URLをポート付きで指定します。

npmのrunコマンドで実行できるようにする

npmの「package.json」を編集します。”scripts“の項目に以下を追記します。

これで以下コマンドを実行することでbrowser-syncが起動します。

実行するとブラウザが起動し、”proxy“で指定したURLのページが開かれるます。この状態で”files“で指定したファイルを編集するとページが自動でリロードします。

モバイルの実機確認

browser-syncを起動するとローカルマシンで閲覧するためのURLと、外部の端末で閲覧するためのURLを用意してくれます。

上はbrowser-syncを起動すると出力されるメッセージです。
[Local]と[External]それぞれがローカルマシンと外部端末のためのURLです。

[Local]…ローカルマシンで閲覧できるURLです。
[External]…ローカルマシンと同じネットワークに繋がっている外部端末からページを閲覧するためのURLです。

iPhoneなど外部端末からページを確認するには、ローカルマシンと同じネットワークに接続して上記のURLにSafariなどのブラウザでアクセスするだけです。とても簡単。

もちろん外部端末でもファイルを更新するとページがリロードがされるので、実機で動作の確認をしながら実装を行えるようになります。素晴らしい。