【Rails】RailsにJS, jQueryを実装する方法

こんばんは！
現在チーム開発で時間がだいぶ余りRailsにJavaScriptやjQueryを実装したので、実装方法を忘れないうちに書いておきます！

環境

AWS Cloud9
Rails6系

方法

app/javascript配下にjsファイルを作成する

名前はxxxx.jsとなっていればなんでも大丈夫です！今回はscript.jsにしました。
実装後、基本的にはこのファイルにJS、jQueryの記述をしていくことになります。

app/javascript/packs/application.jsにimportする

app/javascript/packs/application.js

import "script.js"

この記述を追加してください。

yarnを使用して導入

ターミナル上でこのコマンドを実行してください。

ターミナル

$ yarn add jquery

config/webpack/environment.jsに追記する

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

jQueryをimportする

:
:
import 'jquery' // この行を追記
import "script.js"
:
:

実際に試してみる

ここまでで実装は終了ですが、確認のためにアラートを試してみます。
最初に作ったapp/javascript配下のjsファイルを開いて記述してください。

app/javascript/script.js

let title = "javascript実装完了！";
alert(title);

サーバーを起動後、viewページを開いたときにアラートメッセージが表示されれば実装できている証拠です！

すべてのページで遷移時JS,jQueryを反映させる

　表示させたいviewページが1ページなら上の実装のみで問題ありませんが、複数ページある場合問題がおきてしまいます。その問題について対処できるようになりましょう。
　RailsではTurbolinksという仕組みを使って、サイト内で最初のページの表示にはHTMLファイルすべてを参照しますが、サイト内のページ遷移後はbodyタグ内の情報のみ取得して表示することで動作を軽くしています。(headタグ内やjsファイルは最初のページでしか読み込まれません。読み込まれても差分のみです。)そのため、最初に表示したページから他のページへaタグやlink_toで遷移した際にはjsファイルは読み込まれないようになっています。そうするとjsファイルで実装した内容がページ遷移後に反映されなくなるので、以下の記述を付け足すとすべてのページでjsファイルの内容が反映されます。

jsファイル

$(document).on('turbolinks:load', function () {
 // 実装内容
});