Rails6になってjQueryの設定が大きく変わった！
自作アプリの開発に取り掛かろうとした矢先、jsが全く動かせなくて滅茶苦茶焦りました。
それで調べてみたら、Rails6からjQueryの設定方法がガラリと変わっているらしいです。
このせいで2〜3時間無駄にしたのではないのだろうか・・・まだまだ精進が足りない。
どう変わったのか？
まだまだ勉強中のため詳しいことはまだ分かりませんが、触りの部分だけ紹介します。
いいから使えるようにしたい、という場合は下の方にある設定手順から読み進めてください。
1. gemが必要ではなくなった
今までは'jquery-rails'gemをインストールしていましたが、Rails6からはgemの追加が必要なくなります。
代わりにwebpackで必要な情報をインストールしていきます。
2. jQuery関連ファイルの保存フォルダが違う場所にある
かつてはapp/assets/javascriptsフォルダに保存していましたが、今後はapp/javascriptフォルダに変更となります。
Rails6での設定手順
1.ターミナル、アプリのフォルダで下記のコマンドを実行します。
ターミナル
yarn add jquery
2.webpackの設定ファイルを編集します。
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
3.application.jsファイルを編集します。
app/javascript/packs/application.js
// (前略)
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("jquery") // ←の1行を追加
// (後略)
4.自身のjqueryファイルを作成、読み込ませます。
作成するjsファイルは、javascriptフォルダに保存します。
app/javascript/test.js
$(function() {
console.log("test");
});
app/javascript/packs/application.js
// (前略)
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("jquery")
require("test.js") // ←の1行を追加
// (後略)
フォルダを作って保存する場合は、require("(フォルダ名)/(ファイル名).js")を追加してあげると読み込んでくれるようになります。
作成したjsファイルがなかなか読み込まれずに苦戦しました。
ですがこれでRails6でも心置きなくjQueryに取り組めそうです。