소개

하고 싶은 일

좋아하는 기능의 Ajax 대응을 구현하고 싶다

그래서 jQuery를 도입하고 싶습니다

운영 환경

루비 2.6.5/Rails 6.0.3.4

해봐

Rails6에서 표준 장비되어 있는 Webpacker를 이용하는 것으로 간단하게 구현할 수 있었습니다.
많은 기사가 Rails5까지의 정보로 굉장히 돌아다녔기 때문에, 6 이후의 분은 나처럼 쓸데없는 시간을 사용하지 말아 주셨으면…

참고 URL

Rails 가이드 > Rails에서 JavaScript 사용

절차

jQuery 설치

Webpack 설정

application.js 설정

동작 확인

jQuery 설치

원래 jQuery란?

JavaScript를 더 쉽게 작성할 수 있는 라이브러리 중 하나입니다.

따라서 jQuery (라이브러리)를 사용한다면 JavaScript (원래 프로그래밍 언어)로 컴파일 (번역)해야합니다.
컴파일하는 방법은 여러가지 있습니다만, 초학자고, 일단 간단한 Webpacker를 사용해 가자! 라는 것이 본 기사의 취지입니다.

그럼 우선, jQuery의 인스톨을 실시합니다.

터미널

% yarn add jquery

Rails5 이전의 도입 방법에서는 jquery-rails라고 하는 Gem을 인스톨 하는 것이 기본선인 것 같습니다만, Webpacker로 관리할 때는 yarn 커멘드를 사용해 인스톨 합니다.

Gem을 Gemfile에서 설치했으므로이 기사를 참고로 삭제했습니다.
> Gemfile로 설치된 Gem 삭제

yarn이란?

자바 스크립트 패키지 관리자. Node.js에서 실행되는 패키지를 관리합니다.

Node.js란?

본래 프론트 사이드 개발용의 언어인 JavaScript를 서버 측에서 사용하기 위한 「환경」
Node.js 덕분에 쉽게 Ajax 대응을 할 수 있다.

즉, Webpacker라는 번역기에 jQuery라는 언어를 yarn이라는 서버용 설명서로 등록했다는 느낌일까요(달라면 미안해요)

Webpack 설정

Webpack 구성 파일에서 jQuery를 관리하에 인증합니다.

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

application.js 설정

application.js에서 jQuery를 호출할 수 있도록 합니다.

javascript/packs/application.js

//中略

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

//中略

이상으로 도입은 완료입니다.

동작 확인

jQuery가 제대로 작동하는지 확인합니다.
원하는 페이지에 다음 코드를 전기합니다.

좋아하는 페이지.html.erb

<p>テスト</p>
<script type="text/javascript">
  $(document).ready(function() {
    $("p").text("成功！！");
  });
</script>

p요소의 텍스트에 "성공!"을 대입하게 되어 있습니다.

(성공 예)

이와 같이 「테스트」가 아니고 「성공!!」이라고 표시되어 있으면 동작 확인은 완료입니다.

결론

여러가지 기사를 조사해 gem을 도입하거나 하고 있었습니다만, Webpacker를 사용하면 간단하게 구현할 수 있었습니다.

특히 이번, JavaScript와 jQuery를 조사해 가는 가운데, Node.js를 표면적으로도 이해할 수 있었던 것은 좋았을까 생각합니다.

참고로 한 기사
엔지니어 입구 > 초보자용! 3 분 안에 이해하는 Node.js 란 무엇입니까?

Ruby/Rails 초학자를위한 기사를 쓰고 있습니다.
앞으로도 주 3~4기사 페이스로 갱신하고 싶다고 생각하므로, 초학자 여러분, 꼭 팔로우 부탁드립니다! !

끝까지 읽어 주셔서 감사합니다!

✔︎