4
3

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] jQueryを使えるようにする

Last updated at Posted at 2021-02-18

#環境
Rails 6

#インストールする

$ 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の編集をする

app/javascript/packs/application.js
import Rails from "@rails/ujs"
import Turbolinks from "turbolinks"
import * as ActiveStorage from "@rails/activestorage"
import "channels"
import "jquery"   //この1行を追加

#queryファイルを作成し、読み込む
jsファイルは、javascriptフォルダに作成します。
今回は test.js を作成しました。
作成したjsファイルを読み込むために application.js に以下のような import "ファイル名.js" を追記します。

app/javascript/packs/application.js
import "jquery"
import "test.js"   //この1行を追加

そして test.js コードを書いていきましょう。

##? リロードしないとJavaScriptが動かない場合
jsファイルに以下のように turbolinks:load を記述します。

document.addEventListener("turbolinks:load", function() {
  //処理
})

参考にしたサイト

4
3
1

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
4
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?