Rails5までの実装方法を試してみてもjQueryが動かなかったので調べてみると、
Railsのversionが上がり、Rails6になってからはjQueryの実装方法が変わったようなので、
自分の勉強もかねて、読んでくださる方々に共有させていただきます。
※プログラミング初心者ですので、おかしい点などがありましたら指摘してもらえると助かります。
開発環境
- 使用PC：Windows10
- 仮想環境：vagrant + CentOS7
- テキストエディタ：VSCode
- Ruby version：ruby2.5.8
- Rails version：6.1.1
実装したい環境
Ruby on Rails6での環境でjQueryを実装したい
目次
- jQueryインストール
- application.jsのファイル先の変更
- Webpackの設定
- application.jsの設定
- 外部ファイル作成
1. jQueryインストール
Rails5までのverでは、GemfileにjQueryを記載してbundle installしていた。しかし、Rails6ではWebpacketを利用してjQueryをインストールします。
【Windowsの人はこちらのコマンド yarnが使えない人用】
npm add jquery
【Macの人はこちらのコマンド yarnが使える人用】
yarn add jquery
2. application.jsのファイル先の変更
Rails5ではapplication.jsファイルは
【Rails5の場合】
app/assets/javascript/application.js
にあった。しかしRails6では
【Rails6の場合】
app/javascript/packs/application.js
ファイルの場所が変わっている。
application.jsの head 内に以下のコードが追記されているか確認する。
追記されていない場合は追記する。
<head>
// ～他のコードが記載されている
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
// ↑のコードが記載されているか
</head>
3. Webpackの設定
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
4. application.jsの設定
【Rails6の場合】
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require ('test.js') //追加 自分が決めたjsのファイル名
【Rails5の場合】
import Rails from "@rails/ujs"
import Turbolinks from "turbolinks"
import * as ActiveStorage from "@rails/activestorage"
import "channels"
Rails.start()
Turbolinks.start()
ActiveStorage.start()
僕はRailsのバージョンが違うと何が変更されるのかなど、よくわかっておらず、Rails5のapplication.jsのコードの下や上にRails6のコードを書いたりしててjQueryが動かなかったので注意が必要かもです。
5. 外部ファイル作成
次に外部ファイルにjQueryコードを書いていく。
今回は例としてtest.jsとファイル名をする。
ファイルは app/javascript/ このjavascriptフォルダより下に格納する。
※フォルダを新たに作って、その下に格納してもいい。
$(function() {
$(".title").css("color", "red");
});
今回は例として post/index.html.erb にjQueryを実行してみる。
viewやコントローラーやモデルなどはすでに作られている前提で書いていきます。
<title>Hello World</title>
実際に rails s して確認してみる。
正常に動きました。
【jQueryを導入していない場合の結果】
4. でapplication.js に require ('test.js') を追加したので
どのViewファイルでも test.js（好きなファイル名） に書き込めばjQueryが実行される。
app/views/posts/index.html.erb に直接jQueryを書き込むこともできるが、
重くなったり、管理がしづらかったりなど、あまり使われていないです。
<title>Hello World</title>
<script>
$(".title").css("color", "blue");
</script>
最後まで見てくれてありがとうございます。
プログラミングの勉強一緒に頑張りましょう！