はじめに

いいねボタンを押したら本来一回しかリクエストが飛ばないはずなのに、2回リクエストしてしまう現象が発生しました。その時の原因対応メモです。

現象

いいねボタンを押した時の様子。Googleクロームのデベロッパーツールで見るとこんな感じ。生成も削除も二回。

通信のコード元はjqueryとrails-uis、この箇所で通信されている様子。はて？

原因

色々調べると今までRailsからクライアントサイドを操作するためにjquery-ujsが使用されていたみたいですが、Rails5.1からはJquery依存がなくなったrails-ujs使うようになった様子。jquery_ujsからrails-ujsに変更されたにもかかわらず、jquery_ujsとrails-ujsを混在させていたのが原因みたいでした。どうやら自分がいつの間にかに混在させてしてしまっていたみたいです。。
jquery-ujsとはRuby on RailsについてくるJavaScriptのライブラリのようです。

jquery → jquery-ujs
rails-ujs

この２つの流れが存在し、2回リクエストを送っていたんだと思います。

app/javascript/application.js

//= require jquery
//= require jquery_ujs
//= require rails-ujs
//= require turbolinks
//= require_tree .

Rails5.1でrails new された時は恐らく下。# rails -v Rails 5.1.6

//= require rails-ujs
//= require jquery
//= require bootstrap
//= require turbolinks
//= require_tree .

対応

Rails5.1からはjquery_ujsとrails-ujsに移行するということなのでjquery_ujsを削除しました。結果、問題なく動作するようになりました。めでたしめでたし。

・
//= require jquery
- //= require jquery_ujs
//= require rails-ujs
//= require turbolinks
//= require_tree .