背景
railsに画像スライドショーのslickなどのプラグインを導入する際に、
jQeryの導入が必須になり、ただ導入するだけかなり時間がかかってしまったため、
忘れない様にという自分のためと、同じレベルの方が苦労しなくていいように作成します!
やりたいこと
・slickなどの画像スライドショーツールをrubyで使用したい
・そのためにjQueryを導入したい
動作環境
rails (6.0.3.7)
手順
①jQueryのインストール
②Webpackの設定
③application.jsの設定
④動作確認
①jQueryのインストール
Rails5以前の導入方法ではjquery-railsというGemをインストールするのが基本のようですが、
Webpackerで管理する際はyarnコマンドを使用してインストールします。
*私はこの時点で間違えていました*
rails6以降
yarn add jquery
②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
③application.jsの設定
javascript/packs/application.jsにrequire('jquery')を記述する
//中略
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
// 追記
require('jquery')
//中略
④動作確認
なんでもいいのでjQuryの記述をして検証ツールで確認してみる。
私は、Javascrypt ディレクション内にtest.jsというファイルを作成し、下記コードを記述しました。
例
$(function() {
console.log("OK");
});
##注意
最後の導入テストフェーズで、test.jsを作って記述する際は、
javascript/packs/application.jsにrequire('../test')を記述して作成したファイルを読み込ませる必要があります!!
//中略
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require('jquery')
// 追記
require('../test')
//中略
#振り返り
過去の記事を参考にし、gem'jquery-rails'でbundle成功したので導入できてないことを全く疑ってませんでしたw
slickやswiperなどいろんなスライドショーのプラグインを試したが軒並みエラーが出たので途方に暮れていました。
その時、コンソールで動作テストをしたときに、jQueryの記述が読み込まれないことに気づきました。。。
もしかして導入方法が違うのか?と調べた時にRails6でのjQuery導入方法という記事に出会い、無事導入するに至りました。
もう少し早く、テストコードで試していればよかったのですが、
bundleの下記表記を信じて疑わなかったです。
Bundle complete! 26 Gemfile dependencies, 101 gems now installed.
Use `bundle info [gemname]` to see where a bundled gem is installed.
slickなどの使用方法はまた別の記事で書きますー!