みの屋.

プログラムを書いてる時に躓いたことやコードの進捗などをメモでまとめていく予定です.(ついでに日常のつぶやきもちらほらと……)

【Rails】jqueryが適用されてなかったお話

久々にRailsでツールを作っているのですが、そこでなぜかjqueryが動かないという問題発生.

結果、jqueryの導入がうまくできていないことが判明したのですが、それに気づいたきっかけと導入までにかなり躓くことが多かったのでメモー.

その時使用していた環境

ちなみに、知らない間にjqueryの導入方法が変わってしまっていたのが地味に衝撃(&混乱の原因)でした.
(ちょっと触らなくなったうちにツールはどんどん変化してしまうものですね…)

では、実際に私がjqueryがなぜ動作していないか気づいたきっかけからです.

jqueryが動いていないのに気づいたきっかけ

実はこの時、実装で画面に表示されているフォームを動的にjqueryを使って増やそうとしていたのですが、なぜかボタンを押してもフォームが増えない.

Railsのサーバーコンソールにもそんなエラー書かれてない.

????

となっていました.
そこで最後にChromeブラウザについている
開発/管理」→ 「デベロッパーツール
からページ内部のエラーを確認したところ、以下のようなエラー発見.

Uncaught ReferenceError: $ is not defined

このエラーは… jqueryがきちんと導入できていない時に主に起こるエラーです.

つまり、jquery使おうとしてるのにjqueryが存在してない(or導入できてない)ことが動かなかった原因でした

そりゃないものは動かないですよね……

jqueryの導入

では、早速jqueryを導入するためにgemでいつも通りgemでインストールしようとしたのですが、ここでも一つ罠がありました.

Rails5までは assets/javascript/ というフォルダがあってgemインストール後にそこにあるファイルに設定を書き込んでいくはずなのですが、
まずassetsファイルの下にjavascriptというフォルダがない!

少し調べてみるとこちらのサイト様よりRails6からjqueryはWebpackで管理するようになったとのことでした.

qiita.com

jqueryの導入方法

そこで早速先ほどのサイト様を参考にさせていただいて以下のようにjqueryを導入していきます.
(ここからは上記の参考サイト様とほとんど同じ方法なので、どちらを見ても同じ感じになると思います.)

まずyarnで以下をインストール.

$ yarn add jquery

gemでインストールする必要はなくなったみたいです.

次に app/javascript/packs/application.jsに以下を記述します

require("jquery")

次は config/webpack/environment.jsに以下を記述します.

const webpack = require('webpack')

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

ここまで記述したらjqueryを使うための設定は完了です. そのままRailsサーバを再起動するとjqueryが動くようになっていると思います.

私の場合ここまでたどり着くのにかなりな時間使ってしまったので、もし同じ人がいれば参考になると嬉しいです. 「Rails」だけで検索するといろんなバージョンのサイトが出てきてしまうのでやっぱり使っているバージョンも合わせて検索しないと穴にハマりやすいので気をつけたいです……