Rails6でRaty4.1.0を使いたい

前提

本のレビューを投稿できるサイトをratyを使用して作成したいのですが、エラーが出てしまい困っています

実現したいこと

ホシデ評価をつけて投稿できるようにしたい

発生している問題・エラーメッセージ

Uncaught ReferenceError: Raty is not defined
    at books:109:5

Uncaught ReferenceError: Raty is not defined
    at <anonymous>:3:5
    at o.assignNewBody (turbolinks.js:604:1)
    at o.replaceBody (turbolinks.js:542:1)
    at turbolinks.js:535:1
    at e.renderView (turbolinks.js:495:1)
    at o.render (turbolinks.js:533:1)
    at e.render (turbolinks.js:493:1)
    at t.renderSnapshot (turbolinks.js:690:1)
    at t.render (turbolinks.js:686:1)
    at r.render (turbolinks.js:940:1)

該当のソースコード

_form.html.erb
1<%= form_with model:book,local:true do |f| %>
2  <div id="error_explanation">
3    <% if book.errors.any? %>
4      <h3><%= book.errors.count %>errors prohibited this obj from being saved:</h3>
5      <ul>
6        <% book.errors.full_messages.each do |message| %>
7          <li><%= message %></li>
8        <% end %>
9      </ul>
10    <% end %>
11  </div>
12  <div class="form-group">
13    <%= f.label :title %>
14    <%= f.text_field :title, class: 'form-control book_title' %>
15  </div>
16  <div class="form-group">
17    <%= f.label :opinion %>
18    <%= f.text_area :body, class: 'form-control book_body' %>
19  </div>
20  <div class="form-group row" id="star">
21    <%= f.label 'Rate', class:'col-md-3 col-form-label' %>
22    <%= f.hidden_field :star, id: :review_star %>
23  </div>
24  <script>
25    $('#star').empty();
26    new Raty(document.querySelector('#star'), {
27      size     : 36,
28      starOff:  '<%= asset_path('star-off.png') %>',
29      starOn : '<%= asset_path('star-on.png') %>',
30      starHalf: '<%= asset_path('star-half.png') %>',
31      scoreName: 'book[star]',
32      half: true
33    });
34  </script>
35  <div class="form-group">
36    <%= f.submit class: 'btn btn-success' %>
37  </div>
38<% end %>

config/webpack/enviroment.js
1const { environment } = require('@rails/webpacker')
2
3const webpack = require('webpack')
4environment.plugins.prepend(
5  'Provide',
6  new webpack.ProvidePlugin({
7    $: 'jquery/src/jquery',
8    jQuery: 'jquery/src/jquery',
9    jquery: 'jquery/src/jquery',
10    Popper: 'popper.js'
11  })
12)
13module.exports = environment

app/javascript/packs/application.js
1// This file is automatically compiled by Webpack, along with any other files
2// present in this directory. You're encouraged to place your actual application logic in
3// a relevant structure within app/javascript and only use these pack files to reference
4// that code so it'll be compiled.
5
6import Rails from "@rails/ujs"
7import Turbolinks from "turbolinks"
8import * as ActiveStorage from "@rails/activestorage"
9import "channels"
10import "jquery"
11import "popper.js"
12import "bootstrap"
13import '@fortawesome/fontawesome-free/js/all';
14import "../stylesheets/application"
15require('packs/raty')
16window.$ = window.jQuery = require('jquery');
17
18Rails.start()
19Turbolinks.start()
20ActiveStorage.start()

application.html.erb
1<!DOCTYPE html>
2<html>
3  <head>
4    <title>Bookers2Ver2</title>
5    <%= csrf_meta_tags %>
6    <%= csp_meta_tag %>
7    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
8    <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
9    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
10  </head>
11  <body>
12    <%= render 'layouts/header' %>
13      <main>
14        <p id="notice"><%= notice %></p>
15        <%= yield %>
16      </main>
17    <%= render 'layouts/footer' %>
18  </body>
19</html>

試したこと

最新のバージョンのratyだとjqueryに依存しないというところまでは理解したのですが、その先がわからなくなってしまいました。

no1knows

2022/11/05 17:31

下記のチュートリアルを試してみてはどうでしょうか？ https://github.com/wbotelhos/raty/blob/main/tutorial.md

NASKA--

2022/11/05 17:32

試してはみたのですが、そもそもnew Ratyの部分でRatyが使えないと言われ、弾かれてしまっているため、何をやってもダメな状態になってしまっています

no1knows

2022/11/05 18:29

公式だとUsage with ImagesとかUsage with Fontのところに記載がありますが、事前に必要なファイルをダウンロードするなりしてRailsに認識させる必要があるかと思います。

NASKA--

2022/11/06 04:09

https://github.com/wbotelhos/raty/blob/main/build/raty.js 一応こちらのファイルはコピーしてpacksの下のraty.jsにいれたのですが、それでも全く変わらない状態です

no1knows

2022/11/07 04:44

うーん。僕もテスト的にhtmlとjsファイルで実装しようと思ったのですが、うまくできなかったです。ちなみにratyのRails版は試しましたか？ https://github.com/wbotelhos/rating

NASKA--

2022/11/07 04:58

そちらは少しみたのですが、やり方がわからなくてまだやってません。

行動規範の内容に同意します

回答1件

ベストアンサー

質問とそれてしまうのですが、★3.5とかは必要ない、★5段階評価でよければ、gemやJavaScriptを利用せずに実装できそうです。

下記はHTMLでの記載となりますが、事前に配列を準備してcollection_radio_buttonsを利用すればシンプルな実装が可能かと思います。

HTML
1<div class="review">
2  <p>レビュー</p>
3  <div class="stars">
4    <span>
5      <input id="review01" type="radio" name="book[review]" value="1"><label for="review01">★</label>
6      <input id="review02" type="radio" name="book[review]" value="2"><label for="review02">★</label>
7      <input id="review03" type="radio" name="book[review]" value="3"><label for="review03">★</label>
8      <input id="review04" type="radio" name="book[review]" value="4"><label for="review04">★</label>
9      <input id="review05" type="radio" name="book[review]" value="5"><label for="review05">★</label>
10    </span>
11  </div>
12</div>

CSS
1.stars span{
2  display: flex;               /* 要素をフレックスボックスにする */
3  flex-direction: row-reverse; /* 星を逆順に並べる */
4  justify-content: flex-end;   /* 逆順なので、左寄せにする */
5}
6
7.stars input[type='radio']{
8  display: none;               /* デフォルトのラジオボタンを非表示にする */
9}
10
11.stars label{
12  color: #D2D2D2;              /* 未選択の星をグレー色に指定 */
13  font-size: 30px;             /* 星の大きさを30pxに指定 */
14  padding: 0 5px;              /* 左右の余白を5pxに指定 */
15  cursor: pointer;             /* カーソルが上に乗ったときに指の形にする */
16}
17
18.stars label:hover,
19.stars label:hover ~ label,
20.stars input[type='radio']:checked ~ label{
21  color: #F8C601;              /* 選択された星以降をすべて黄色にする */
22}