目的
Railsで作成したアプリにjQueryを導入する。
開発環境
macOS: Big Sur
Rubyバージョン: 2.6.5
Railsバージョン: 6.0.0
前提
- アプリが作成されている。
- アプリ名は
test-appとする。
手順
前置き
Rails６から標準装備されているWebpackerを利用することでGem無しでインストール可能です。
jQueryのインストール
それでは早速始めていきます！
まずjQueryをインストールしましょう！
ターミナル
% yarn add jquery
Webpackの設定
次に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の設定
続いてapplication.jsの設定です！
javascript/packs/application.js
//省略
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require('jquery')
//省略
これでjQueryが導入できました！
確実に導入できているか、確認も行っていきましょう！
テスト用ファイルの作成
それでは、実際にテストを行ってみます！
test.jsファイルを作成し、以下のように記述してください！
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")
//省略
最終確認
アプリを立ち上げて、コンソールにtestの文字が表示されていれば成功です！
最後に
以上でjQueryの導入が完了しました。
手軽に導入できるので、ぜひ試してみてください。
では。