初心者がやった★５機能作成した際に起きた悲しい出来事と対応法

口下手な文章になっているので申し訳ない
制作物を作成中に起きた出来事なのですが練習など事前に作成していたわけでもないなら作り方調べてやろうということでやった。しかし起きたことはやり方最新版ではなく旧のやり方であった。
ここからはその日は対応日でなかったことという絶望そしてうまくいったと思いきや
実際に対応した方法がこれでした

事前準備
モデルファイルを用意する

rails g model Book

ファイル内部を編集

class CreateBooks < ActiveRecord::Migration[6.1]
  def change
    create_table :books do |t|
      t.string :title
      t.text :body
      t.integer :user_id
      t.float :rate
      t.timestamps
    end
  end
end

忘れずrails db:migrateを行う
投稿者は忘れて痛い目を見ているので
重要です

rails db:migrate

jqueryのインストール

yarn add jquery

webpackに追加

const { environment } = require('@rails/webpacker')

module.exports = environment
ここから追加
const webpack = require('webpack')
environment.plugins.prepend(
  'Provide',
  new webpack.ProvidePlugin({
    $: 'jquery/src/jquery',
    jQuery: 'jquery/src/jquery',
    jquery: 'jquery/src/jquery',
 　 Popper: 'popper.js'

  })
)

application.html.erbを変更する

変更前
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>

変更後
<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
   <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
   <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>

これで事前準備が完了です

raty.jsを導入するため画像ファイルをダウンロードする

https://github.com/wbotelhos/raty

raty/src/imagesの中にある３つのスターの画像ダウンロードし自分のapp/assets/imagesフォルダに格納します

star-on.png
star-off.png
star-harf.png

import Raty from "raty.js"
window.raty = function(elem,opt) {
let raty =  new Raty(elem,opt)
 raty.init();
return raty;
}
Rails.start()
Turbolinks.start()
ActiveStorage.start()

コントローラーにパラメータとして受け取れるように追加

def book_params
  params.require(:book).permit(:title,:content,:image,:status, :review, :rate)　#ここに追加
end

投稿フォーム

app/views/public//_form.html.erb
# new book投稿フォーム
<%= form_with model: book, local: true do |f| %>
  <div class="form-group">
    <%= f.label :title %>
    <%= f.text_field :title, class: 'form-control book_title' %>
  </div>
  <div class="form-group">
    <%= f.label :opinion %>
    <%= f.text_area :body, class: 'form-control book_body' %>
  </div>
  
  # starについての記述
  <% if book.id.nil? %>
    <div class="form-group" id="star">
      <%= f.label :star %>
      <%= f.hidden_field :star, id: :review_star, class: 'form-control' %>
      <div id="post_raty"></div>
    </div>
    <script>
      $(document).on('turbolinks:load', function() {
        let elem = document.querySelector('#post_raty');
        if (elem == null) return;
  
        elem.innerHTML = ""
        let opt = {  
          starOn: "<%= asset_path('star-on.png') %>",
          starOff: "<%= asset_path('star-off.png') %>",
          starHalf: "<%= asset_path('star-half.png') %>",
          scoreName: 'book[star]',
        };
        raty(elem, opt);
      });
    </script>
  <% else %>
    <div class="form-group">
      <%= render "static_rate", book: book %>
    </div>
  <% end %>
  <div class="form-group">
    <%= f.submit class: 'btn btn-success' %>
  </div>
<% end %>

<div id="rate_<%= book.id %>"></div>
<script>
$(document).on('turbolinks:load', function() {
  let elem = document.querySelector('#rate_<%= book.id %>');
  if (elem == null) return;
  
  elem.innerHTML = "";
  let opt = {  
    starOn: "<%= asset_path('star-on.png') %>",
    starOff: "<%= asset_path('star-off.png') %>",
    starHalf: "<%= asset_path('star-half.png') %>",
    score: "<%= book.rate %>",
    readOnly: true,
  };
  raty(elem, opt);
});
</script>

app/views/public/books/show.html.erb

<td> <%= render "public/books/static.rate", book: @book %></td>

今回はなかなか苦労した機能はできるだけ共有したい