【30歳から目指すwebエンジニア学習録】Rails6でjQueryの導入につまずいた話

エラーの発見

• 「いいね」ボタンをAjaxで作ろうとしていた
• jQueryを仕込んでも変化せず、、、
• ターミナルを見るとjs.erbファイルには到達している。
• ブラウザのコンソールを見ると$ is not defineのエラーログが。

解決策

• $ is not define で検索するとrails6ではjQueryの導入方法が変わったとの記事があった。
  https://qiita.com/RIN_HM/items/bdbd76f5015b3c15bfe9
• こちらの海外の記事の指示に従って直していく。
  https://www.botreetechnologies.com/blog/introducing-jquery-in-rails-6-using-webpacker/

手順1　application.jsファイルを移動する

1. assetsのapplication.jsファイルを
2. app/javascript/packsフォルダに移動する。
   

手順2　gem jquery-rails から置き換える

1. views/layouts/application.html.erbのjavascript_include_tag を javascript_pack_tag に置き換える
2. gem　jquery-rails はもう使わないらしいのでGemファイルから削除してbundle install
   

手順3　yarnからjqueryを導入

1. yarn add jquery を実行
2. installされているか確認
   
3. 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 = evironment

手順4　application.jsファイルに追加

1. 手順1で移動しさせたapp/javascripts/packsのapplication.jsファイルにrequire("jquery")を追加

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("jquery")　　　　 <= こいつを追加

以上！お疲れさまでした！

• 調べている感じ初学者の方(自分含めて)が躓いているよう。
• こうやってアウトプットしながら学び合うなんてステキな文化だなあ。