Rails6のJavasqriptとJ.Queryの取り扱い方法

概要

Rails6からJS周りの取り扱いが大きく変わったようなので、
JavascriptとJ.Queryの取り扱いについてまとめました。

概念

まずRailsではブラウザにJ/Sファイルの内容を表示するときには、
基本的にwebpackで複数のJ/Sファイルコンパイルして出力するという流れがあります。

Rails6におけるJavasqriptの使用方法

Rails6では下記のjsに参照を書き込む事でコンパイル対象のモジュールを追加できる。
app/javascript/packs/application.js

コンパイルされたjsは、下記のタグヘルパーを記載する事でscriptタグが記載される。

javascript_pack_tag

デフォルトでは共通レイアウト(※)に書かれていて、全てのページにこれが読み込まれるようになっている。

app/views/layout/application.html.erb

<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>

実際作成したJ/Sファイルを仕込む方法

application.jsに参照を追加する事でコンパイル対象にする。
app/javascript以下の任意のディレクトリもしくは直下にjsを作成する。
(※packs以下に作らない事。)

// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")

// 追加
require ('user/sample')

// Uncomment to copy all static images under ../images to the output folder and reference
// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
// or the `imagePath` JavaScript helper below.
//
// const images = require.context('../images', true)
// const imagePath = (name) => images(name, true)

Rails6でjQueryの導入方法

ターミナル

$ yarn add jquery

webpacker/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

app/javascript/packs/application.js

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require('jquery') #追記
require("J/Sファイル名")#実際に読み込むファイル