Rails jQueryが動かないときの解消方法

はじめに

Railsにてポートフォリオ作成中に、
jQueryが機能しないことがあり苦戦した為、まとめます。

実装した機能(一部紹介)

・slick(スライド機能)
・jp_prefecture(住所自動入力機能)
・iTyped(タイピングアニメーション)
・ScrollTop(ページトップにスクロールするボタン)
・ScrollReveal(要素のアニメーション表示)
　など

開発環境

・ruby: 2.6.3
・rails: 5.2.5
・OS: macOS Catalina ver10.15.7
・Cloud9

前提条件

・jQueryのコードはしっかり書いている(間違いなし)

【ここが１番ポイントかも】
・ページをリロードした時は__ちゃんと動く__
・別ページからリンクで飛んでくると__動かない__

原因

Rails4以降に導入されたTurbolinksが原因だった。

これが原因でjQueryのreadyイベントが着火しないらしい。

#### Turbolinksとは

簡単に言うと、ページ遷移を高速化させる仕組み

※公式より

Turbolinksを用いた画面遷移の順番
1:リンクのクリックイベントが発火する
2:画面遷移を阻害し、非同期でリクエストを送る
3:レスポンスとしてHTMLを返す
4:headタグに含まれているJSとCSSが、現在のページと一致しているかチェック

## 解決方法

解決方法は__２つ__
1:turbolinks: loadを使ってjsファイルを書きかえる
2:Turbolinksを機能として停止させる

turbolinks: loadを使ってjsファイルを書きかえる方法

$(function () { 〜の部分を
$(document).on('turbolinks:load', function() { 〜に書きかえる

jsファイル.

/* 変更前 */
$(function () {
  // 処理
});

/* 変更後 */
$(document).on('turbolinks:load', function() {
  // 処理
});

これだけ！簡単！

Turbolinksを機能として停止させる方法

1:Gemfileの以下の記述を__コメントアウト__する

Gemfile.

gem ‘turbolinks’, ‘~> 5’

2:読み込み

ターミナル.

bundle install

3:`app/javascript/packs/application.js`の該当箇所を__コメントアウト__する

application.js

require('turbolinks').start()

4:app/views/application.html.erbの該当箇所を__消す__(headタグ内)

application.html.erb

<!--変更前-->
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>

<!--変更後-->
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application' %>

<!--javascript~の部分の消した箇所はここ！-->
'data-turbolinks-track': 'reload'

これで解決！
僕は1の方法が早くて楽だったので1で解決しました！

さいごに

コードは合っているはずなのになぜ動かない・・・
そんなこんなで１時間ほど時間を無駄にしてしまいました。

今後、私のようにこの問題にぶち当たった人が、
この記事見つけ、早めに問題を解決してくれたら幸いです。

ポートフォリオ作りながら、Qiita発信両立するのは難易度高い...。


誤字、誤った記述等ありましたら、コメントよろしくお願いします。