LiveReloadというツールがとても便利。

一言で言うと、ファイルの変更を監視して、変更があったらブラウザーをリロードしてくれる、ものです。 Web系の開発やっているとブラウザーのリロードは年中やってます。 だけど、これをしなくていいというのがこんなにも幸せなこととは知りませんでした。 LiveReloadの使い方は簡単です。

1. LiveReloadを起動する
2. 開発中のプロジェクトのフォルダを監視対象に追加する
3. 開発中のプロジェクトにコードスニペットを忍ばす（あるいはブラウザーエクステンションをインストールする）

こうすると、監視対象のファイルが更新された時にブラウザーがリロードされるようになります。

2の監視対象の追加は、ディレクトリをドラッグアンドドロップすれば巻単位追加できます。

3のスニペットはLiveReloadの画面に表示されているものをコピペするだけです。 次のようなスニペットです。

<script>
    document.write(
        '<script src="https://' + 
        (location.host || 'localhost').split(':')[0] + 
        ':35729/livereload.js?snipver=1"></' + 
        'script>'
    )
</script>

ブラウザーエクステンションを使うのではなく、コードスニペットを使った場合は、 別なマシンから接続していても自動的にリロードがかかります。 別なマシンは、iPadでもiPhoneでもAndroidでも大丈夫です。 対象のサイトを表示しているすべてのブラウザーが同時にリロードされます。

テストの効率が上がること請け合いです。