RailsアプリケーションにjQueryを導入する方法

RailsでjQueryを導入する方法について記述していく。
アプリケーションを立ち上げて毎回調べるのも面倒なので備忘録として。

手順

① 下記gemをGemfileに記述する。

gem "jquery-rails"

② ターミナルでbundle installを実行する。

$ bundle install #bundleでも可

③ Gemfile.lockに下記が追加されている事を確認する。

jquery-rails(n.n.n) #nはinstallした時によってバージョンが異なる為

④ application.jsに //= require jquery と //= require jquery_ujs の2行を追加する。

//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require jquery #これを追加
//= require jquery_ujs #これも追加
//= require_tree .

⑤ app/views/layouts/application.html.erb内の記述を確認する。

<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>

この中の'application'が記述されることで、スクリプトファイルを読み込むためのスクリプトタグが自動的に生成される。

⑥ 正常にjQueryが動くかを確認する。
5までの手順で基本的には実装は完了しているが、念の為動いているかを確認する。
適当にindex.html.erbファイルを作成。下記は1例。

<p>jQuery稼働テスト(未稼働)</p>

こう表示される。
ではjQueryの記述を追加しよう。

  <p>jQuery稼働テスト(未稼働)</p>

#ここから追加
  <script type="text/javascript">
  $(document).ready(function() {
    $("p").text("jQuery稼働テスト(稼働中)");
  });
</script>
#ここまで

記述としては、ページを読み込んだ際にpタグのテキストを"jQuery稼働テスト(稼働中)"に置き換える、という物だ。
再度ページを読み込む。

無事jQueryが動作している事が確認できた。

参考サイト
https://qiita.com/ngron/items/95846bd630a723e00038
https://www.sejuku.net/blog/57790