docker-compose上に構築したRails6の環境に、jQueryを導入しようと色々調べたのでメモを残します。
Rails5以前のやり方を真似してGemを導入しても動かず、しばらくハマりました...。
Rails6ではwebpackerを使って以下の手順で簡単に導入できるみたいです。
#まずはjQueryをインストール
webpackerで管理する場合はyarnコマンドを使ってインストールします。
docker-compose上でインストールするためdocker-compose exec web
コマンドを使用します。
$ docker-compose exec web yarn add jquery
無事にインストールできたらdocer-composeを立ち上げましょう。
$ docker-compose up
#次にwebpackの設定を追加
jQueryをWebpackの管理下にするために設定ファイルを編集します。
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のファイルを編集してjQueryを呼び出せるように設定します。
//中略
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
// 追記
require('jquery')
//中略
これでjQueryの導入は完了です。
#jQueryの動作確認
jQueryが正常に動作するか確認します。
何らかのviewにテスト用のpタグを記入しましょう。
<p>テスト</p>
当然ですがブラウザには以下のように表示されます。
次に、別ファイルにjQueryの動作を記入します。
Rails6ではapp/javascript
以下にjsファイルを置くようなので、ここでは直下に仮でtest.js
ファイルを作成します。
$(document).ready(function() {
$("p").text("jQuery稼働テスト成功!");
});
作成したtest.js
をviewに読み込むにはapplication.js
にjsファイル読み込みのためのコードを追記する必要があります。
//中略
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require('jquery')
// 追記
require("test.js")
//中略
jQueryの読み込みが成功すると以下のようにpタグの文字がjQueryによって置き換えられます。
このように表示されたらjQueryの動作確認は成功です。
これで無事にdocker-composeとRails6の環境にjQueryを導入することができました。
#おわりに
RailsへのjQuery導入の記事は多くありますが、Rails5以前のやり方を参照していたことでうまく行かずにしばらく悩みました。
初心者あるあるかもしれませんが、Railsのバージョンが違うと導入方法が全く違うということを痛感しつつ、なんとかjQueryを導入することができました。
同じく初心者で悩んでいる人の参考になれば幸いです。
参考にさせていただいた記事はこちら
https://qiita.com/tatsuhiko-nakayama/items/b2f0c77e794ca8c9bd74
https://qiita.com/iiyama_makoto/items/940b130fd20540fd70f1