More than 3 years have passed since last update.

Rails 6 (Webpacker標準搭載) で星による評価機能を実装する

Last updated at 2020-10-07Posted at 2020-10-07

はじめに

2019年8月にリリースされたRuby on Rails 6.0よりJavaScriptの扱いが変わったため、変更点(つまずいたポイント)を踏まえて"jQuery Raty - A Star Rating Plugin"を導入したいと思います。

環境

言語(Ruby 2.6.5)
フレームワーク(Rails 6.0.3.3)

参考

実装

jQueryの導入

まず、YarnによるjQueryのインストールを行います。

yarn add jquery

Webpackerで管理する際は、Node.jsのパッケージを利用します。

"jquery-rails"というGemは使用しません。
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

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require('jquery') #追記

jQuery Ratyの導入

下記サイトより、画像とコードをローカルに保存します。
https://github.com/wbotelhos/raty
-- app/assets/images ディレクトリ --
画像： https://github.com/wbotelhos/raty/tree/master/lib/images
-- app/javascript 配下に新しく任意の名称でjsファイルを作成(今回は"raty.js") --
コード： https://github.com/wbotelhos/raty/blob/master/lib/jquery.raty.js

jQuery Ratyの呼び込み

先ほどと同様に、新しく作ったjsファイルを追記します。

app/javascript/packs/application.js

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require('jquery')
require('raty') #追記

ここまでで、機能の設定は完了です。

Viewファイルへの記述

以降は、実装したい任意のViewファイルに下記のように書き込みます。

    <div class="note note-rating", id="star">
      <h3>総合評価</h3>
    </div>
    <script>
      $('#star').raty({
        size      : 36,
        starOff   : '<%= asset_path('star-off.png') %>',
        starOn    : '<%= asset_path('star-on.png') %>',
        starHalf  : '<%= asset_path('star-half.png') %>',
        scoreName : 'note[rating]',
        half      : true,
      });
    </script>

オプションや表示に関する記述は、下記２つの記事が詳しいです。

まとめ

RailsにおいてjQueryを導入するのがほぼ初めてだったため、実装したい機能を見つけても導入できませんでした。Rails6以降では、標準としてWebpacker(JavaScriptをまとめて管理するためのツール)がインストールされているため、思うように実装するためには実装の仕方やRailsが構成されるファイル一つ一つを学ばなければいけないと感じました。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up