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

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

新規登録して質問してみよう
ただいま回答率
85.50%
Yarn

Yarnは、Facebook/Exponent/Google/Tildeが開発したJavaScriptのパッケージマネージャ。npmよりもインストールが速く、厳密にモジュールのバージョンを固定できるなど、npmの問題を解決。npmと互換性があり、同じpackage.jsonを使用できます。

Ruby on Rails 6

Ruby on Rails 6は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

0回答

1342閲覧

Rails6 + webpacker slick is not a functionとエラーが出る

moai891

総合スコア9

Yarn

Yarnは、Facebook/Exponent/Google/Tildeが開発したJavaScriptのパッケージマネージャ。npmよりもインストールが速く、厳密にモジュールのバージョンを固定できるなど、npmの問題を解決。npmと互換性があり、同じpackage.jsonを使用できます。

Ruby on Rails 6

Ruby on Rails 6は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2020/08/17 12:45

編集2022/01/12 10:55

いつもお世話になっております。

Slickを使用してスライドショーを実装しようとしているのですが、slick is not a functionと表示が出て、解決できません。

Jqueryはyarnにてインストールしております。
以下の記事を参照しました。

https://qiita.com/masahisa/items/eaacb0c3b82f4a11fc13

エラーから考えるに、jsファイルの読み込み順が原因かと思われるのですが、私からは問題ないように思えます。
「webpack + slick is not a function」などのキーワードを中心に原因を探しているのですが、見つかりません・・・

恐れ入りますが、アドバイス頂ければ幸いです。よろしくお願いします。

解決したいこと

エラーを解決したい。(slick is not a function)

画像 https://gyazo.com/8c81b40c747c7888e166eff719ead4a8

環境

  • Rails 6.0.3.1
  • ruby 2.7.1
  • webpacker 4.2.2
  • gem "haml-rails", "~> 2.0"
  • yarn

関連ファイル

application.html.haml

!!! %html %head %meta{content: "text/html; charset=UTF-8", "http-equiv": "Content-Type"}/ %title Badsuru = csrf_meta_tags = csp_meta_tag = stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' = javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %body = yield

index.html.haml

= javascript_pack_tag 'slick' = javascript_pack_tag 'slide-show' = render "shared/header" = render "shared/nav" = render "shared/main" %h1 トップページ - if user_signed_in? %h2 ログインしています = link_to "ログアウト", destroy_user_session_path, method: :delete - else %h2 ログインしていません = link_to "ログイン", new_user_session_path = link_to "新規登録", new_user_registration_path .index - @datas.each do |data| = data.club = image_tag data.avatar.url = render "shared/footer"

main.html.haml

.main-visual = image_tag '/images/visual-bg.jpg', alt: '画像背景', height: '522px', width: '100%', class: 'main-visual__img--bg' .main-visual__images = image_tag '/images/visual-1.jpg', id: "main-visual__images-js", alt: '画像背景', class: 'main-visual__img--main' = image_tag '/images/visual-2.jpg', id: "main-visual__images-js", alt: '画像背景', class: 'main-visual__img--main' = image_tag '/images/visual-3.jpg', id: "main-visual__images-js", alt: '画像背景', class: 'main-visual__img--main' (中略)

packs/slick.js

slick公式サイトからダウンロードしたものを使用

slide-show.js(読み込み確認のため記述を最低限にしています)

$(function(){ $('main-visual__images').slick({ }); });

package.json

{ "name": "badsuru", "private": true, "dependencies": { "@rails/actioncable": "^6.0.0", "@rails/activestorage": "^6.0.0", "@rails/ujs": "^6.0.0", "@rails/webpacker": "4.2.2", "jquery": "^3.5.1", "turbolinks": "^5.2.0" }, "version": "0.1.0", "devDependencies": { "webpack-dev-server": "^3.11.0" } }

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' }) ) module.exports = environment

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問