rails5 turbolinks 画面遷移時jsが読み込まれない

Question

いつもお世話になっております。

画面遷移時jsが読み込まれないことを下記の実装で回避しました。
しかし、これがrailsらしい書き方なのかわかりません
現在の実装がrailsらしい実装の仕方なのか
turbolinksの恩恵を受けているのか、教えていただけませんでしょうか。
よろしくお願いいたします。

現在の実装

• jsを二つに分け、片方をヘッダーで読み込み、片方をbodyの最後で読み込む。

• 該当ページ以外でもjsが読み込まれてしまう。

• application.js

//= require rails-ujs

• app.js

//= require jquery/jquery.slim.min
//= require bootstrap/bootstrap.min
//= require user  //自分で書いたjs  
//= require turbolinks

• user.js

console.log("hoge");

• application.html.slim

doctype html
html lang="ja"
  head
    meta charset="utf-8" /
    title
      | sample
    = csrf_meta_tags
    = stylesheet_link_tag  'application'
    = javascript_include_tag 'application'
  body
    = yield
    = javascript_include_tag 'app'
   

過程

1. jsをヘッダーで読み込み、'turbolinks:load'を付与

• 画面遷移をするとjsが読み込まれない

• application.js

//= require rails-ujs
//= require jquery/jquery.slim.min
//= require bootstrap/bootstrap.min
//= require user //自分で書いたjs  
//= require turbolinks

• user.js

document.addEventListener("turbolinks:load", function() {
  console.log("hoge");
})

• application.html.slim

doctype html
html lang="ja"
  head
    meta charset="utf-8" /
    title
      | sample
    = csrf_meta_tags
    = stylesheet_link_tag    'application'
    = javascript_include_tag 'application'
  body
    = yield

2. jsの読み込み位置をbodyの最後に持ってくる

• 画面遷移してもjsを読み込んでくれる
• Uncaught Error: rails-ujs has already been loaded!が発生

  body
    = yield
    = javascript_include_tag 'application'
   

3. rails-ujs has already been loaded!を解消

• jsの読み込み位置はbodyの最後
• ページ遷移するとjsが読み込まれない問題が再発

= javascript_include_tag 'application', 'data-turbolinks-eval': false

• 参考url

https://stackoverflow.com/questions/20684846/turbolinks-causing-a-jquery-ujs-has-already-been-loaded-error

4. jsを使うページへのlink_to にdata: {turbolinks: false}を付与

• jsの読み込み位置はbodyの最後
• 画面遷移時jsを読み込んでくれる
• 設定していないページにはrails-ujs has already been loaded!が発生している

5. ライブラリをヘッダー、自前のをbodyで読み込む

• jqueryが動かない

• application.js

//= require rails-ujs
//= require jquery/jquery.slim.min
//= require bootstrap/bootstrap.min
//= require turbolinks

• app.js

//= require user  //自分で書いたjs  

Answer 1

turbolinksの恩恵を受ける

turbolinksをヘッダーで読み込む必要がある。
javascriptはapplication.jsにまとめ
= javascript_include_tag 'application'
をヘッダーで読み込む

リロードしないとjsが読み込まれない

$(document).on 'turbolinks:load', ->

内にjsを記述し、下記を実施

• 適切な発火条件を設ける
• undefinedエラーを削除
• Holder.run()を追記