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) スクリーンショット 2020-11-08 18.55.05.png 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!

✔︎

Recommended Posts

How to introduce jQuery in Rails 6
How to use JQuery in js.erb of Rails6
How to deploy jQuery on Rails
[Rails] How to write in Japanese
How to install Swiper in Rails
How to deploy jQuery in your Rails app using Webpacker
How to implement search functionality in Rails
How to change app name in rails
How to use custom helpers in rails
How to use MySQL in Rails tutorial
Preparing to introduce jQuery to Ruby on Rails
[rails] How to configure routing in resources
[Rails 5.x] How to introduce free fonts
How to implement ranking functionality in Rails
How to use credentials.yml.enc introduced in Rails 5.2
How to write Rails
Introduce Vue.js to Rails
How to uninstall Rails
[Webpacker] Summary of how to install Bootstrap and jQuery in Rails 6.0
How to get boolean value with jQuery in rails simple form
[Rails] How to use select boxes in Ransack
How to translate Rails into Japanese in general
How to separate .scss by controller in Rails
How to conditionally add html.erb class in Rails
How to implement a like feature in Rails
How to easily create a pull-down in Rails
[Ruby on Rails] How to install Bootstrap in Rails
How to make a follow function in Rails
[Rails] How to use PostgreSQL in Vagrant environment
How to check Rails commands in the terminal
[Rails] How to easily introduce slick (slider function)
[rails] How to post images
[Rails] How to use enum
[Rails] How to install devise
[Rails] How to use enum
How to introduce Basic authentication
How to read rails routes
How to use rails join
How to terminate rails server
How to write Rails validation
How to write Rails seed
[Rails] How to use validation
[Rails] How to disable turbolinks
[Rails] How to use authenticate_user!
[Rails] How to use "kaminari"
[Rails] How to implement scraping
[Rails] How to make seed
How to write Rails routing
[Rails] How to install simple_calendar
[Rails] How to install reCAPTCHA
[Rails] How to use Scope
How to set the display time to Japan time in Rails
How to implement guest login in 5 minutes in rails portfolio
How to implement a like feature in Ajax in Rails
[Ruby on Rails] How to write enum in Japanese
Introduce devise in Rails to implement user management functionality
[Ruby On Rails] How to reset DB in Heroku
[How to insert a video in haml with Rails]
How to query Array in jsonb with Rails + postgres
[Rails 6] How to set a background image in Rails [CSS]
[Rails] How to load JavaScript in a specific view