3
1

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とdocker-composeを利用した環境にjQueryを導入する方法

Last updated at Posted at 2021-04-11

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

3
1
0

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

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?