Rails6とdocker-composeを利用した環境にjQueryを導入する方法

8146 ワード
docker-compose Rails jQuery Rails テキストリンク

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の管理下にするために設定ファイルを編集します。

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のファイルを編集してjQueryを呼び出せるように設定します。

javascript/packs/application.js
//中略

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

//中略

これでjQueryの導入は完了です。

jQueryの動作確認

jQueryが正常に動作するか確認します。
何らかのviewにテスト用のpタグを記入しましょう。

お好きなviewファイル.html.erb

<p>テスト</p>

当然ですがブラウザには以下のように表示されます。

次に、別ファイルにjQueryの動作を記入します。
Rails6ではapp/javascript以下にjsファイルを置くようなので、ここでは直下に仮でtest.jsファイルを作成します。

app/javascript/test.js
$(document).ready(function() {
  $("p").text("jQuery稼働テスト成功！");
});

作成したtest.jsをviewに読み込むにはapplication.jsにjsファイル読み込みのためのコードを追記する必要があります。

javascript/packs/application.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