Turbolinksの画面遷移をJS側でも使いたい

JSでTurbolinksの画面遷移処理を呼びたい

Turbolinksを利用しているアプリケーションで、以下のように任意の要素のクリックイベントに画面遷移を設定するコードを書いていました。
当然ながら以下のコードのままではTurbolinksの画面遷移は利用できず、任意の要素をクリックしても通常の画面遷移が実行されてしまいます。

element.addEventListener('click', (e) => {
  const href = e.currentTarget.dataset.href
  window.location.href = href
})

Turbolinksは自動的に<a href>リンクに対して独自の遷移処理を差し込むことで画面遷移の高速化を実現しています。
Turbolinksでは、この独自の遷移処理を明示的に呼び出すためにTurbolinks.visit(location)というメソッドを用意してくれています。

以下のように書き換えることでJS側でTurbolinksの画面遷移を利用できるようになりました。

element.addEventListener('click', (e) => {
  const href = e.currentTarget.dataset.href
  Turbolinks.visit(href)
})

Tips

ちなみに、第二引数に{ action: 'replace' }のオプションを与えることで、HistoryAPIのhistory.replaceStateを使用した画面遷移を実行することもできます。
新たに履歴エントリを追加することなくURLを変更することができるため、タブ切り替えなどの「URLは変えたいけど、戻るボタンの対象にはしたくない」といったケースで便利です。

Turbolinks.visit(location, { action: 'replace' })