2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

rails6でjQeryを確実に導入する方法

Posted at

背景

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ファイル内に下記を記述する。

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')を記述する

javascript/packs/application.js
//中略

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
// 追記
require('jquery')

//中略

④動作確認

なんでもいいのでjQuryの記述をして検証ツールで確認してみる。
私は、Javascrypt ディレクション内にtest.jsというファイルを作成し、下記コードを記述しました。

test.js
$(function() {
  console.log("OK");
});

下記のように検証ツールで問題なく表示されたら導入成功!!
Image from Gyazo

##注意
最後の導入テストフェーズで、test.jsを作って記述する際は、
javascript/packs/application.jsにrequire('../test')を記述して作成したファイルを読み込ませる必要があります!!

javascript/packs/application.js
//中略

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などの使用方法はまた別の記事で書きますー!

2
0
0

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
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?