rails でjqueryが反映しなかった時の話

悩み

 

 

初めに

 

コードのミスもないしやり方も間違っていないのに

jqueryが読み込まれない時に確認すること

 

railsでアプリケーション開発を行なっている際にjqueryは多くの人が使うと思います。

 

□基本的な流れ

-----------------------------------------

1.gem 'jquery-rails'をgemに記載

2.bundle install

3.application.jsに下記を記載

//= require jquery
//= require jquery_ujs
 

-----------------------------------------

 

ここまでは順調にできるんですがその後ファイルが読み込まれないなどの

トラブルが出てくることがあります。

 

主な原因は2つ!

 

①application.jsのqueryの読み込む順番が間違っている

//= require jquery
//= require jquery_ujs

こちらの上記の記述ですがなるべく上に持ってくるようにしてあげましょう。

 

//= require jquery
//= require jquery_ujs
//= require activestorage
//= require_tree .

//= require activestorage
//= require_tree .
//= require jquery_ujs
//= require jquery

 

読み込む順番が違うと反映されなくなってしまいます・・・!

 

 

 

②turbolinksが影響を受けてjsがうまく動かない

 

前提

turbolinksはgemとしてRailsアプリケーションに初めから導入されている機能です!

このturbolinksで動かなくなってしまう可能性があるのです。

例えば、Ajaxなどを使うときは競合してしまい動かなくなる可能性があります。

 

 

なのでturbolinksは削除or停止をしておきましょう!

 

□手順

 1.Gemfile から turbolinksの部分をコメントアウトする

# Turbolinks makes navigating your web application faster. Read more:
# gem 'turbolinks', '~> 5'

 

→コメントアウトした後にbundle installを忘れずに!

 

2.application.html.haml から turbolinks の関連部分を削除

-# = stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload'
-# = javascript_include_tag 'application', 'data-turbolinks-track': 'reload'

 

3.application.js から turbolinks の関連部分を削除する

//= require turbolinks

 

この一文は消してしまいましょう!

以上です!

 

もし、jqueryの導入手順やコードミスがないのに反映されなかったら今の2点を

確認してみてください!