[Rails 6] Raty.jsを使った星型レビュー #JavaScript

1 はじめに

星型レビューを実装するために、ググったけど

「app/assetsの中`javascriptsファイル`が存在しない！！」と嘆いている、そこのアナタ！！！！！

なぜassetsにjavascriptsが無いかというと、

それは

開発環境がrails6だからです！

Ruby on Rails 6.0よりJavaScriptの扱いが変わってます！

この記事はRails 6 (Webpacker標準搭載)環境でRatyを導入し、星評価機能を実装する方法を説明します！

2 完成イメージ

評価を星マークで表示する！

ユーザーは星ボタンをクリックすればレビューできる！

3 開発環境と前提

開発環境

rails 6.0.3.4

前提

モデルは以下のように設定。
UserモデルとHouseモデルはCommentモデルを中間テーブルとした多対多の関係
commentsテーブル(口コミ投稿用のテーブル)のstarカラム（型:integer）に評価値を保存する。
すでに、テーブルとカラムは作成されていることを前提に進めます。
カラムを、半分の星による評価を行う場合、「0.5」や「1.5」という値を保存することになるため、float型にしておく必要があります。今回は整数でのみの評価とするため、starカラムはinteger型にしてます。

4 jQueryの導入

yarn add jquery

Webpackerで管理する際は、Node.jsのパッケージを利用します。
注意 他の記事でjqueryを導入する際に、 "jquery-rails"というgemを使用するが、今回のようなrails6環境の場合は使用しない！！
yarn addコマンドは、パッケージのインストールと共に、package.jsonへバージョンを書き込んでくれます。

次に、webpackerの設定ファイルで、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',
    jquery: 'jquery/src/jquery',
  })
)
#ここまで
module.exports = environment

最後に、jQueryを呼び出します。

app/javascript/packs/application.js


省略

window.$ = window.jQuery = require('jquery'); #追記

5 jQuery Ratyの導入

5_1 星の画像を保存する

　https://github.com/wbotelhos/raty/tree/master/lib/images

ここのgithubから
star-off.png
star-on.png
をコピーしてassets/imagesにフォルダの中に入れる。
（star-harf.png は　半分の星による評価を行う場合はコピーしておく）

5_2 Raty導入

app/javascript/packs に　raty.jsを作成。

次に下記URLのjsコードをraty.jsにコピーする。

最後にapplication.js に下記を追加

app/javascript/packs/application.js

window.$ = window.jQuery = require('jquery'); 
require('packs/raty') #追記

6 Viewへ記述

6_1 星による評価の入力

_form.html.erb

<%= form_for [@house, @comment] do |f| %>
  <div class="field">
  <div>
    <%= f.label :content%>
    <%= f.text_field :content %>
  </div>

  <div>
    <%= f.submit button_value %>
  </div>

    <div class="form-group row" id="star">
    <%= f.label :star,'評価 ', class:'col-md-3 col-form-label' %>
    <%= f.hidden_field :star, id: :review_star %>
  </div>

  <!-- 評価javascript -->
  <script>
  $('#star').raty({
    size     : 36,
    starOff:  '<%= asset_path('star-off.png') %>',
    starOn : '<%= asset_path('star-on.png') %>',

    scoreName: 'comment[star]',
    half: false,
  });
  </script>  

<% end %>

説明

Commentモデルのstarカラムに値を保存する
scoreName: 'comment[star]'
⭐️の半分の入力を行わない!
half: false,

6_2 星による評価の表示

星による評価をしたいviewに下記を記載する

<h1>口コミ一覧</h1>
<%= link_to '口コミを投稿する', new_house_comment_path(house_id: params[:house_id]) %>
<% @comments.each do |comment|%>

  <div class=card>
    <p>内容:<%= comment.content%></p>
    <p>評価 :<%= comment.star%>点</p>
    <div id="star-rate<%= comment.id%>"></div>    
    <script>
      $('#star-rate<%= comment.id%>').raty({
        size      : 36,
        starOff   : '<%= asset_path('star-off.png') %>',
        starOn    : '<%= asset_path('star-on.png') %>',
        half      : false,
        readOnly: true,
        score: <%= comment.star %>,
      });
    </script>
  </div>
<% end %>

最後に

上手く機能しない場合は、
Ratyの実装では、ターミナル上にはエラー文は表示されないので、ブラウザのデベロッパーツールを使って、エラー文を確認しましょう！！
初心者向け！Chromeの検証機能（デベロッパーツール）の使い方

[Rails 6] Raty.jsを使った星型レビュー