質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.06%

Rails6でWebpacker開発環境でRaty.jsを使いたい。

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 269

ytommy

score 11

前提・実現したいこと

Rails6でWebpacker開発環境でRaty.jsを使いたい。

(環境)
・ruby 2.6.5
・Rails 6.0.2.2
・Windows 10

発生している問題

jquery.raty.jsで5段階評価機能を実装したいが、jsが効いていない。

該当のソースコード

#webpacker.yml
# Note: You must restart bin/webpack-dev-server for changes to take effect

default: &default
  source_path: app/javascript
  source_entry_path: packs
  public_root_path: public
  public_output_path: packs
  cache_path: tmp/cache/webpacker
  check_yarn_integrity: false
  webpack_compile_output: true

  # Additional paths webpack should lookup modules
  # ['app/assets', 'engine/foo/app/assets']
  resolved_paths: ['app/assets']

  # Reload manifest.json on all requests so we reload latest compiled packs
  cache_manifest: false

  # Extract and emit a css file
  extract_css: false

  static_assets_extensions:
    - .jpg
    - .jpeg
    - .png
    - .gif
    - .tiff
    - .ico
    - .svg
    - .eot
    - .otf
    - .ttf
    - .woff
    - .woff2

  extensions:
    - .mjs
    - .js
    - .sass
    - .scss
    - .css
    - .module.sass
    - .module.scss
    - .module.css
    - .png
    - .svg
    - .gif
    - .jpeg
    - .jpg

development:
  <<: *default
  compile: true

  # Verifies that correct packages and versions are installed by inspecting package.json, yarn.lock, and node_modules
  check_yarn_integrity: true

  # Reference: https://webpack.js.org/configuration/dev-server/
  dev_server:
    https: false
    host: localhost
    port: 3035
    public: localhost:3035
    hmr: false
    # Inline should be set to true if using HMR
    inline: true
    overlay: true
    compress: true
    disable_host_check: true
    use_local_ip: false
    quiet: false
    pretty: false
    headers:
      'Access-Control-Allow-Origin': '*'
    watch_options:
      ignored: '**/node_modules/**'


test:
  <<: *default
  compile: true

  # Compile test packs to a separate directory
  public_output_path: packs-test

production:
  <<: *default

  # Production depends on precompilation of packs prior to booting for performance.
  compile: false

  # Extract and emit a css file
  extract_css: true

  # Cache manifest.json for performance
  cache_manifest: true
#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.

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("jquery")
require("bootstrap")
require("jquery.raty")


// Uncomment to copy all static images under ../images to the output folder and reference
// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
// or the `imagePath` JavaScript helper below.
//
const images = require.context('../images', true)
// const imagePath = (name) => images(name, true)

import 'bootstrap';
import '../stylesheets/application';
import '../stylesheets/custom';

試したこと

cssは正常に動作しています。
画像もimage_pack_tagで読み込めています。
raty.jsは効いていません。

ひととおり記事は読み込んだのですが、
webpackerの使い方がいまいち分かっておりませんで、
助言いただけると助かります。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • ytommy

    2020/04/14 14:19

    あ、すみません。
    そういうことではないですね。
    適用部分のコードは下記です。

    <div class="star-rating" data-score= <%= review.rating %> ></div>

    <script>
    $('.star-rating').raty({
    readOnly: true,
    score: function() {
    return $(this).attr('data-score');
    }
    });
    </script>

    キャンセル

  • maisumakun

    2020/04/14 14:19

    raty.jsは$().raty();のような形で呼ばないと有効になりません。それはどこへどのように書きましたか?

    キャンセル

  • ytommy

    2020/04/14 15:04

    上記はviewファイルに直接<script></script>で書いています。

    キャンセル

回答 1

checkベストアンサー

+1

適用部分のコードは下記です。

問題は2点あります。

  • require("jquery")のようにWebpack環境からjQueryを読み込んだ場合、jQueryインスタンスはWebpack環境に閉じてしまって、他のコードからは使えません。window.$ = window.jQuery = require('jquery');のようにwindow経由で公開する必要があります。
  • <script>を使ってスクリプトを書くような構成を取る場合、Turbolinksはマッチしません。require("turbolinks").start()の行を消しておきましょう。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/04/14 15:48

    エラーが出ていました。(下記)
    Uncaught Error: Cannot find module 'jquery.raty'
    at webpackMissingModule (application.js:12)
    at Module../app/javascript/packs/application.js (application.js:12)
    at __webpack_require__ (bootstrap:19)
    at bootstrap:83
    at bootstrap:83

    キャンセル

  • 2020/04/14 16:17

    エラーメッセージのとおりです。yarn add jquery.ratyなどで追加する必要があります。

    キャンセル

  • 2020/04/14 18:13

    yarn add raty-jsで追加したところ解決いたしました。
    ありがとうございました。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.06%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る