« ^ »

ファイルを保存する時にブラウザを更新する

所要時間: 約 2分

フロントエンドを実装する時、webpack(およびwebpack-dev-server)や、それと同様の機能をもつツールを使って実装を進める事が多い。リアルタイムでブラウザが切り替わり確かに便利だけれど、本当にそれって必要なのかとも思う。確かにTypeScriptを使っていたり、ReactやVueなどを使っている場合には、トランンスパイルをする必要があるから、この手のツールは必要になる。SaSSを使うにしてもCSSへの変換が必要になるため、もうこの手のツールは常に必要になるのかもしれない。

この機能はBrowserSyncのようなツールでも同様の事ができて、Webブラウザを更新したり、多画面で確認作業を行うのであれば、BrowserSyncの方が高機能のようにも思う。ではトランンスパイルを必要としないものについてはどうか。重要な所は「ファイルを保存したら、表示を更新する」という事をしたいだけだ。

Emacsではバッファをファイルに保存する際に after-save-hook に登録されたシンボルにインターンされている関数が呼び出される。そしてEmacsでxwidget-webkitを使っている場合 xwidget-webkit-reload を呼び出す事で、 Webkit が表示しているページを再読み込みできる。つまり after-save-hookxwidget-webkit-reload を登録してしまえば、ファイルを保存した時に表示を更新できる。

(add-hook 'after-save-hook #'xwidget-webkit-reload)

解除する場合は次のLispを評価する。

(remove-hook 'after-save-hook #'xwidget-webkit-reload)