学習55日目 RailsにjQueryを導入する方法

こんにちはKATUUUNです。
現在オリジナルアプリ製作中ですが、自分の予定していた機能は一通り実装できたため、これからはフロント実装を頑張って、見た目を武装しようと思います。せっかくなので新しい事をやろうと思いJavascriptのライブラリの一つであるjQueryを使ってみました。今回はその導入方法をアウトプットします。

条件：Rails6.0.0

「jquery-rails」というgemもありますが今回はWepakerで管理したいため
Yarnでインストールします

以下のコマンドをターミナルで実行します

yarn add jquery

Webpakとは様々なjavascriptを一まとめにしてくれるツール
WebpakerとはrailsでWebpackが使用できるgem

jQueryを管理下に置くため、以下の記述をconfig/webpack/environment.jsにします

const { environment } = require('@rails/webpacker')
const webpack = require('webpack')

environment.plugins.prepend('Provide',
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    jquery: 'jquery',
  })
)

module.exports = environment

application.jsでjQueryを呼び出す記述を加えます。

require('jquery')

これで導入は完了です