Rails
jQuery
turbolinks

RailsでjQueryを使えるようにする方法

環境

Rails 5.2.0

やり方

①Gemの追加

Gemfileにgem "jquery-rails"を記述する。

bundle updateを実行。

②application.jsに追記

//= require jquery
//= require jquery_ujs
の二つを/app/assets/javascripts/application.jsに追記しましょう。

application.js
//= require activestorage
//= require turbolinks
//= require_tree .
//= require jquery #追加
//= require jquery_ujs #追加

③レイアウトファイルの確認

javascrip_include_tage の次にapplicationを指定しておきましょう。でないと、jQueryを利用できません。
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
これを実行することでスクリプトファイルを読み込むためのスクリプトタグを自動的に生成してくれます。

試しに使ってみる

適当にコントローラとビューを作り、jQueryが動作しているのか確かめて見ましょう。

test.html.erb
<h1>test#index</h1>
<p id="hoge">赤色になるよ</p>

Cards.png

ではjQueryを使って文字を赤色に表示してみましょう。

test.html.erb
<h1>test#index</h1>
<p id="hoge">赤色になるよ</p>

<script>
  $("#hoge").css("color","red")
</script>

ここではhogeを指定して色を変えているので以下のような表示になっているかと思います。
Cards.png

色が変わっていればjQueryが正常に動作しています。

もしjQueryが使えていなかったら。

jsが走っているのになぜか適応されない状態に僕もハマったので @kumagi さんの以下の記事を参考にしてみましょう。
https://qiita.com/kumagi/items/289ccadf344f32613304