jQueryが導入できないRuby on rails バージョン6.0.0の人に告ぐ、、瞬速jQuery導入法

ども、

今回はAjaxが導入できない人や、
ドロワーなどを実装しようとして記事丸コピしたが、
何故かできない人に向け、

基本に立ち返り、jQuery ほんんんとに導入できているか問題を解消スべく
この記事を書かせてもらいたいと思います。

この番組は

ruby '2.6.5'

# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '~> 6.0.0'
# Use mysql as the database for Active Record
gem 'mysql2', '>= 0.4.4'
# Use Puma as the app server
gem 'puma', '~> 3.11'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 5'
# Transpile app-like JavaScript. Read more: https://github.com/rails/webpacker
gem 'webpacker', '~> 4.0'
# Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
gem 'turbolinks', '~> 5'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.7'

の環境でお送りさせてもらいます。

では
まずは、
Gemfileからいじっていきましょ

gem 'jquery-rails'

こちらをみんなが読み込めるように一番下に追加！

続いてJavascript ファイルをいじりまそう

javascript/application.js

require("@rails/ujs").start()
// require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require('jquery')
require('../fadeIn')
require('./preview')


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

こんな漢字。

最後にこれを忘れているかが多いのではないでしょうか！？

config/webpack/environment.jsの設定です。

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',
    jquery: 'jquery',
  })
)
module.exports = environment

僕はここで完全に泥沼っていました笑

これで
以上です。

何か間違っている所があれば、
大変お手数ですが、この記事を見てくださった人が被害を受けないためにもコメントお願いします！！

jQUery入れたけどどこで使うねんという人にはこの記事がオススメ💖

フリーターでも分かる、jQuery基礎

jQueryでできること10選。動的サイトの制作やプログラミングを簡略化！

めちゃ手こずったAjax　いいね機能作成、、メモ書きとして。Ruby on rails6.0.0