TurboLinksでWindowのLoadイベントが発火できるようにする

環境

Rails5.2

はじめに

Railsには、画面表示を高速に行うために、Turbolinksという仕組みが備わっています。Turbolinksを使うと、画面遷移を行うときに、HTML全体を置き換えるのではなく、Bodyタグだけを置き換えるため、高速に画面遷移ができるようになります。TurbolinksはRailsのオプションではなく、標準で備わっている機能になります。よって、Railsを使うときは、Turbolinksも一緒に使うことになります。しかし、Turbolinksが有効になっていると、何かと不便な状況が出てきてしまうため、TurbolinksはRailsから外すといった選択をしているエンジニアも多いようです。Turbolinksは、絶対に使わないといけないというものではなく、Railsから意図的に外すことができます。こういう話を聞くと、駆け出しのエンジニアであれば、このように考えるかも分かりません。「Turbolinksを使うとトラブルの元になるのなら、最初から使わない方が無難なのではないか」いきなり、このように考えるのではなく、まずは、Turbolinksありきで開発を行ってみて、どうしても、Turbolinksを使うと行き詰る状況に陥った時に、始めて、Turbolinksを外すという決断をしても、遅くはないと思います。Turbolinksを有効にすることで得られる恩恵も当然あります。Turbolinksの使い勝手について詳しく知るためにも、まずは、Turbolinksありきで開発をしてみるのもいいのではと思います。そこで、Turbolinksを使う場合の注意点について書いてみました。

Turbolinksの詳細についての記述は割愛します。Turbolinksについては、ググると沢山の記事が検索されます。いくつかの記事を掻い摘んで読んでみると、どの記事も大抵、同じようなことが書かれています。自分がTurbolinksについて書いたとしても、ググって出てくる記事以上のことを書くことができないため、詳しい内容については、そちらの記事をご参照ください。

事前準備

Railsでは標準で、JavaScriptではなく、CoffeeScriptを使うようになっています。今回はJavaScriptを使います。app/assets/javascriptsの中に、作成したコントローラーと同じ名前のcoffeeファイルがあるため、拡張子をjsに変更します。

Turbolinksを有効にした場合の対応

Turbolinksを有効にした場合、windowsのloadイベントが動作しなくなります。つまり、発火しなくなります。最初の画面表示（ブラウザでリロードした時）では表示されますが、その後、link_toで画面遷移をすると、loadイベントは有効になりません。

windowは省略できます。windowを付けても、省略してもどちらでもOKです。

test.js

window.addEventListener('load', function() {
    alert("OK");
}, false)

addEventListener('load', function() {
    alert("OK");
}, false)

Turbolinksを有効にしても、windowsのloadイベントが動作するようにするには、次のようにします。最初の画面表示（ブラウザでリロードした時）でも、link_toで画面遷移をした時でも、loadイベントが有効になります。

test.js

window.document.addEventListener('turbolinks:load', function() {
    alert("OK");
}, false)

document.addEventListener('turbolinks:load', function() {
    alert("OK"); 
}, false)

補足

下記の場合は、最初の画面表示（ブラウザでリロードした時）も、link_toで画面遷移したときも、動作しなくなります。Documentに対して、loadイベントを発生させるようなことはないため、通常、このような書き方をすることはありません。

test.js

document.addEventListener('load', function() {
    alert("OK");
}, false)

addEventListenerの書き方

addEventListenerは３種類の書き方があります。どの書き方でもOKではありますが、一般的には無名関数で書くことが多いように思います。

test.js

// 無名関数
document.addEventListener('turbolinks:load', function() {
    alert("OK1");
}, false)

// アロー関数（ES2015）
document.addEventListener('turbolinks:load', () => {
    alert("OK2");
})

// 外部関数
document.addEventListener('turbolinks:load', hoge1, false);
function hoge1() {
    alert("OK3");
}

window.onloadを使うこともできる

addEventListenerの他にwindow.onloadを使った書き方もできます。ただし、window.onloadを使った場合、画像ファイル読み込む時に速度が遅くなるといったデメリットがあるようです。

test.js

// 無名関数
window.onload = function() {
    console.log("OK1");
}

// アロー関数
window.onload = () =>{
    console.log("OK2");
}

// 外部関数
window.onload = hoge;
function hoge(){
    console.log("OK3");
}