How to introduce jQuery in Rails 6

Introduction

Thing you want to do

--I want to implement Ajax support for the like function ――I want to introduce jQuery for that

Operating environment

ruby 2.6.5 / Rails 6.0.3.4

Try it

It was easy to implement by using Webpacker which is standard equipment from Rails6. Many articles have taken a detour with information up to Rails 5, so if you are 6 or later, please do not waste time like me ...

Reference URL

Rails Guide> Using JavaScript with Rails

procedure

--Installing jQuery --Webpack settings --application.js settings --Operation check

jQuery installation

What is jQuery in the first place?

One of the libraries to write JavaScript more easily.

Therefore, if you want to use jQuery (library), you need to compile (translate) it into JavaScript (original programming language). There are many ways to compile, but since I'm a beginner, let's use the simple Webpacker for now! That is the main point of this article.

First, install jQuery.

Terminal

% yarn add jquery

In the installation method before Rails5, it seems that the basic line is to install the gem called jquery-rails, but when managing with Webpacker, install it using the yarn command.

*** I installed Gem from Gemfile, so I deleted it referring to this article *** > Remove the Gem installed with Gemfile

What is yarn

JavaScript package manager. Manage packages that run on Node.js.

What is Node.js

An "environment" for using JavaScript, which is originally a language for front-side development, on the server side. Thanks to Node.js, you can easily support Ajax.

In other words, it feels like you registered the language jQuery in a translator called Webpacker with a server manual called yarn (I'm sorry if it's different).

Webpack settings

Authorize jQuery as managed in the Webpack config file.

config/webpack/environment.js

const { environment } = require('@rails/webpacker')
//Added below
const webpack = require('webpack')
environment.plugins.prepend('Provide',
    new webpack.ProvidePlugin({
        $: 'jquery/src/jquery',
        jQuery: 'jquery/src/jquery'
    })
)
//So far
module.exports = environment

application.js settings

Allows application.js to call jQuery.

javascript/packs/application.js

//Omission

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

//Omission

This completes the installation.

Operation check

Check if jQuery is working fine. Post the following code to your favorite page.

:Favorite page.html.erb

<p>test</p>
<script type="text/javascript">
  $(document).ready(function() {
    $("p").text("success! !!");
  });
</script>

"Success !!" is assigned to the text of the p element.

(Success example) If "Success !!" is displayed instead of "Test" like this, the operation check is complete.

in conclusion

I researched various articles and introduced gems, but it was easy to implement using Webpacker.

Especially this time, I think it was good that I could understand Node.js even superficially while investigating JavaScript and jQuery.

Articles that I used as a reference Engineer entrance> For beginners! What is Node.js to understand in 3 minutes?

*** I am writing an article for Ruby / Rails beginners. *** *** *** I would like to update 3-4 articles a week in the future, so please follow me if you are a beginner! !! *** ***

Until the end Thank you for reading!

✔︎