対象者

Ruby on Railsに初めてjQueryを実装する方

手順目次

1.gemを追加する

2.application.jsにファイルを追加する

3.スクリプトタグを自動的に生成

実際の手順と実例

1.gemを追加する


gem "jquery-rails"

追記できたら、bundle installを実行してgemを読み込みをする。

2.application.jsにファイルを追加する

:
:
<この下の行を追加する>
//= require jquery
<この上の行を追加する>

//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require_tree .
````````


### 3.スクリプトタグを自動的に生成


app/views/layouts/application.html.erbを
下記ファイルに追加する

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

これでjQueryを使う準備ができました。

実際の例を上げると下記の通り

app/assets/javascripts/application.js
:
:

$(document).ready(function () {
  $('.jquery').on('click', function(){
    $(this).css('color','red');
  });
});

Viewファイルにて

<main>
  <div class="container">
    <div class="row">
     <h1 class="px-3 mx-auto">Welcome to <i class="fas fa-book"></i><strong>Bookers</strong>!</h1>
    </div>

    <!--クラスにjqueryを追加-->
    <p class="jquery">クリックすると色が変わるよ！</p>

  </div>
</main>

クリック後に色が変化しました！