LoginSignup
0

More than 1 year has passed since last update.

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

Last updated at Posted at 2022-05-18

エラーの発見

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

解決策

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

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

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

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

手順3 yarnからjqueryを導入

  1. yarn add jquery を実行
  2. installされているか確認
    image.png
  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")     <= こいつを追加

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

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0