소개

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