raty ダウンロード

Gitからratyをダウンロードする。

（https://github.com/wbotelhos/raty）にアクセスし、右上の緑色の"Code"ボタンをクリックしてから"Download ZIP"を選択します。ダウンロードしたZIPファイルを解凍します。

RatyのJavaScriptファイルのコピー
srcファイル内の raty.jsをapp/jabascriptに配置する

画像の配置
　app/assets/imagesに ダウンロードしたものの中の
　src ファイル内の images　の中身の画像を　app/imagesに配置

ファイルの最後に import "../raty"; を追加し、保存します。

import "../raty"; を追加する前に、 raty.js ファイルが存在し、適切なコードが記述されていることを確認してください

app/javascript/packs/application.js

import "../raty";

---

Ratyを全てのページで使えるようにする

以下のコードを追加することで、Ratyのインスタンスを作成し、初期化する関数をグローバルスコープ（この場合は window オブジェクト）に追加します。
app/javascript/packs/application.js

// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.

import Rails from "@rails/ujs"
import Turbolinks from "turbolinks"
import * as ActiveStorage from "@rails/activestorage"
import "channels"
import "jquery"
import "popper.js"
import "bootstrap"

+ import Raty from "../raty"

+ window.raty = function(elem,opt) {
+ let raty =  new Raty(elem,opt)
+  raty.init();
+  return raty;
}

import "../stylesheets/application"

Rails.start()
Turbolinks.start()
ActiveStorage.start()

このコードについて説明します：

import Raty from "../raty"：この行は、raty.js ファイルから Raty オブジェクトをインポートします。"
../raty" の部分は、raty.js ファイルが application.js ファイルから見て一つ上のディレクトリ（app/javascript）にあることを示しています。

window.raty = function(elem,opt) {...}：これは、新しい raty 関数を全体的なJavaScriptコンテキスト（windowオブジェクト）に追加しています。この関数は、指定されたDOM要素に対して新しいRatyインスタンスを作成し、初期化します。elem パラメータは、Ratyを適用するDOM要素のセレクタ（例えば ".star-rating"）で、opt パラメータは、Ratyのオプションを指定するオブジェクトです。

上記のコードを追加した後、保存して閉じてください。これで、Ratyを全てのページで使えるようになりました。具体的には、HTMLの中のJavaScriptで以下のように書くことができます

window.raty('#my-element', {score: 3, readOnly: true});

import Raty from "./raty" の部分は、raty.js ファイルが application.js ファイルと同じディレクトリ（app/javascript）にあることを示しています。

これで raty.js ファイルが正しくインポートされ、全てのページで window.raty 関数を使用できるはずです。