Rails6にjQueryを導入

Rails6でjQueryを導入する方法

yarn add jquery

package.jsonとyarn.lockを確認すると、jQueryが追加されていることが分かる。

(package.json)
{
  "name": "zero_calorie",
  "private": true,
  "dependencies": {
    "@rails/actioncable": "^6.0.0",
    "@rails/activestorage": "^6.0.0",
    "@rails/ujs": "^6.0.0",
    "@rails/webpacker": "4.2.2",
    "jquery": "^3.5.1",
    "turbolinks": "^5.2.0"
  },
  "version": "0.1.0",
  "devDependencies": {
    "webpack-dev-server": "^3.11.0"
  }
} 

(yarn.lock)
jquery@^3.5.1:
  version "3.5.1"
  resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.5.1.tgz#d7b4d08e1bfdb86ad2f1a3d039ea17304717abb5"
  integrity sha512-XwIBPqcMn57FxfT+Go5pzySnm4KWkT1Tv7gjrpT1srtf8Weynl6R273VJ5GjkRb51IzMp5nbaPjJXMWeju2MKg== 

(config/webpack/environment.js)

const { environment } = require('@rails/webpacker')

module.exports = environment

以下のように変更

(config/webpack/environment.js)

const { environment } = require('@rails/webpacker')

const webpack = require('webpack')

environment.plugins.prepend('Provide',
  new webpack.ProvidePlugin({
    $: 'jquery/src/jquery',
    jQuery: 'jquery/src/jquery'
  })
)

module.exports = environment

JS、jQueryのファイルを読み込む

(app/javascript/packs/application.js)
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")

// 追加
require("jquery")
require("jquery/submit_food_image")

htmlが記述されたslimファイル

h1 id="red"
  | 食事記録の一覧

h2 食事記録

jsファイルを作成。これでJS、JQueryで記述した内容が反映される。

(app/javascript/jquery/submit_food_image.js)
$(function () {
  $(document).ready(function(){
    $("#red").css("color", "red");
  });
});

slimで直書きVer.

h1 id="red"
  | 食事記録の一覧

h2 食事記録

javascript:
  $(function () {
    $(document).ready(function(){
      $("#red").css("color", "red");
    });
  });

参照サイト

Rails 6にjQueryとBootstrapを入れる - Qiita