좋아요 기능 비동기화에 걸린 부분

대상자

좋아하는 기능을 구현하고있는 분에서 동기 처리가 가능하고 비동기 처리의 거동이되지 않는 분
리로드하지 않으면 "좋아하는 상태와 좋아하지 않는 상태의 전환"을 할 수없는 분
Rails6에서의 jQuery 도입 방법(①참조)이나 디버그가 잘 되어 있지 않다(②참조)방법

환경

Rails6 환경
Turbolinks 도입됨

기사의 목적

좋아하는 기능에 있어서 동기 처리는 실현할 수 있었지만, 비동기로 하는데 있어서 막힌 부분을 기록해 두고 싶습니다.

좋아 기능의 기사는 양질의 것이 있기 때문에 (단 Rails5의 환경이 많을지도?) 그쪽을 기본으로 해 주시고, 본 기사에서는 초학자가 막혔을 때에 참고가 되는 부분이 있으면 좋다고 하는 생각으로 기사로 했습니다.

또, 초학자이기 때문에, 실수가 있으면, 지적 받을 수 있으면 다행입니다.

①Rails5와 Rails6에 있어서의 JQuery 도입 방법의 차이를 이해하고 있지 않았다(환경 설정 미스)

현재 나와 있는 기사에서는 Rails5 환경의 것이 많습니다만, Rails6 환경에서의 설정 방법과 다른 것에 주의합시다.

Rails5의 경우

Rails5 계열까지는 자산 파이프라인을 사용하여 JavaScript를 관리합니다.

gem 'jquery-rails'

application.js

//= require jquery
//= require rails-ujs

이상과 같이 jquery-rails를 도입함으로써 Rails 애플리케이션 개발에 JQuery를 사용할 수 있습니다.
그런 다음 app/assets/javasctipts/application.js와 같은 매니페스트 파일에서 JQuery를 require합니다.
나는 Rails6를 도입했는데도 Rails5의 방법으로 설명했습니다.
이 부분에 한정되지 않고, Rails의 버전에 주의해 기사를 참조해 주세요.

Rails6의 경우

Rails6 이상에서는 "Webpacker"라는 기능으로 관리합니다.
제 경우에는 application.js의 위치는 app/javascript/packs/application.js입니다.

application.js

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

도입에 관해서는 이하의 기사를 참고로 했습니다.
htps : // / ch ch ch ぢ 아. 이 m / j 쿠에 ry- ぇ b pac 케 r 라 ls /
게다가 environment.js의 편집, jQuery 도입의 확인 방법에 대해서도 이 기사에서 접하고 있습니다.
jQuery 배포를 확인하는 방법은 아래에서 살펴보겠습니다.

jQuery 배포를 확인하는 방법

application.js에 다음 코드를 넣고,

application.js

require("@rails/ujs").start()
require("turbolinks").start()
require('jquery')
document.addEventListener("turbolinks:load", () => {
   console.log($.fn.jquery)
})

remote:true 의 기술에 의한 Javascript의 요구에 의해 불려 가는 js.erb 파일에 console.log($.fn.jquery)를 추가.

create.js.erb

console.log($.fn.jquery)
$("#like_<%= @review.id%>").html("<%= j(render partial: "reviews/likes", locals: { review: @review, book: @book, likes: @likes })%>");

그러면 개발자 도구의 콘솔 부분에 JQuery 버전이 표시됩니다.
자바스크립트로 비동기 처리를 구현할 때 확인하는 장소가 되므로 기억해 둡시다.
console 부분에 「3.5.1」과 같이 버젼이 표시되어 있으면, 도입이 되어 있다고 하는 것이 됩니다.

② 변수 정의의 에러를 깨닫지 못했다(rails s에 의한 에러의 로그를 확인하지 않았다)

create.js.erb

$("#like_<%= @review.id%>").html("<%= j(render partial: "reviews/likes", locals: { review: @review, book: @book, likes: @likes })%>");

에러 나오지 않았다고 착각하고 있었습니다만, rails s로 출력되는 로그를 확인하고 있지 않았습니다.
좋아요 버튼을 누르면 rails s의 로그가 출력되고 가장 마지막에 id가 정의되지 않은 경우 오류가 발생했습니다.
rails s의 로그는 다음과 같습니다.

Started POST "/books/2/reviews/3/likes" for ::1 at 2020-10-24 09:41:59 +0900
Processing by LikesController#create as JS
・
.

（省略）
・
.
ActionView::Template::Error (undefined method `id' for nil:NilClass):
    1: $("#like_<%= @review.id %>").html("<%= j(render partial: "reviews/likes", locals: { review: @review, book: @book, likes: @likes })%>");

하단에 오류가 있습니다.
제 경우에는 컨트롤러에 @review 의 정의 방법의 잘못으로 값이 들어 있지 않은 것이 이유로 @review 를 포함한 create.js.erb 가 동작하지 않고, 비동기의 거동이 되지 않았습니다 .
이 에러에 대한 적절한 디버그(변수의 올바른 정의)를 실시하면, 리로드 하지 않으면 「좋아하고 있는 상태와 좋지 않은 상태의 전환」을 할 수 없던 문제가 해결되어, 비동기 처리의 거동을 깨달을 수 있었습니다.

같은 환경·부분으로 막혀 있는 분의 참고가 되면 다행입니다.