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

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

事前準備
モデルファイルを用意する
```
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に追加
```config/webpack/environment.js
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を変更する
```app/views/layouts/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を導入するため画像ファイルをダウンロードする


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

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

```application.js
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 %>
```
```_static_rate.html
<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>

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