Rails6.0にjQueryを導入したい

はじめに

RailsアプリにjQueryを導入したいときにどの手順で行えばいいのか。
今回はその課題解決を図る目的でアウトプットしていきたいと思います。

この記事のゴール

• RailsアプリにjQueryを導入できるようにする

目次

1.管理ツールとjQueryの導入手順
2.JSファイルの管理場所

1. 管理ツール

Rails5.2まではJavascriptJavascriptをSprocketsをで管理していました。
しかし、Rails6.0からはWebpackerを使ったJavascriptの管理がデフォルトに変更されました。

1-1. Webpackerとは

WebpackerはwebpackをRailsから使いやすくするためのラッパーです。
webpackとは、JSをなどの様々な形式のファイルを一括でまとめるモジュールです。
今後のフロントエンド開発にとってはスタンダートなツールになるのでなるべく最新の管理方法でjQueryを導入しましょう。

1-2. jQueryの導入手順

では早速、jQueryを導入していきましょう！
WebpackerではパッケージマネージャーとしてYarnを採用しているため、このyarnコマンドを使用します。
旧来のやり方だとgem 'jquery-rails'というGemをインストールするのですが、今回は別の方法で行います。

terminal

% yarn add jquery #ターミナルからコマンドを入力

次にenvironment.jsファイルを編集します

config/webpack/environmant.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ファイルを編集します

app/javascript/packs/application.js

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

// ↓ 追記
require('jquery')

ここまででjQueryの導入が完了しました。

続いてjQueryを書き込みたいファイルをjavascript以下に作成します。

2. JSファイルの管理場所

app/javascript以下にファイルを作成します。
今回は「test.js」という名前のファイルを作成します。

先ほど作成したファイル(test.js)が読み込まれるよう「application.js」に「require(‘test.js’)」の記述を追記しましょう。

app/javascript/packs/application.js

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

// 以下の1行を追記
require('test.js')

必要な手順はすべて行いました。
あとは実際にjQueryが読み込まれているか挙動を確認します。

test.js

$(function() {
  console.log("OK");
});

下の図のようにOKと表示されていれば、無事jQueryが夜もいこまれています。

おわりに

最後まで読んでいただきありがとうございました！
お疲れさまでした。。

参考文献

・Rails6】Webpackerを用いてjQueryをインストールする手順を簡単にまとめてみた
・パーフェクトRuby on Rails