teratail
回答率
85.35%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問Uncaught TypeError: $(...).slick is not a function が消えず困っています

編集履歴

質問編集履歴

3

誤字の修正

2020/05/27 09:59

投稿

Tamusu
Tamusu

スコア8

test CHANGED
File without changes
test CHANGED
@@ -106,6 +106,6 @@
106
106
 
107
107
 
108
108
 
109
- webpackのことやrails6のことをあまり理解せずに作り始めてしまったため、わからなくなってしまいました。
109
+ webpackerのことやrails6のことをあまり理解せずに作り始めてしまったため、わからなくなってしまいました。
110
110
 
111
111
  当たり前のことができていないかもしれませんが、ご教授いただければ幸いです。

2

エラーの状況が変化した　そのため質問内容を変更した。

2020/05/27 09:59

投稿

Tamusu
Tamusu

スコア8

test CHANGED
@@ -1 +1 @@
1
- rails6 で jquery の slick を実装したいです
1
+ Uncaught TypeError: $(...).slick is not a function が消えず困っています
test CHANGED
@@ -16,71 +16,51 @@
16
16
 
17
17
 
18
18
 
19
- ↓赤文字で出ているエラー
20
-
21
19
  ```console
22
20
 
23
- Uncaught ReferenceError: $scroll_image is not defined
21
+ 　Uncaught TypeError: $(...).slick is not a function
24
22
 
25
- at initSlider (slick-custom.js:4)
23
+ at HTMLDocument.<anonymous> (1:128)
26
24
 
27
- at HTMLDocument.<anonymous> (slick-custom.js:10)
25
+ at e (jquery.min.js:2)
28
26
 
29
- at mightThrow (deferred.js:97)
30
-
31
- at process (deferred.js:139)
27
+ at t (jquery.min.js:2)
32
28
 
33
29
  ```
34
30
 
35
31
 
36
32
 
37
- ↓黄色文字で出てる注意
38
33
 
39
- ```console
40
34
 
41
- jQuery.Deferred exception: $scroll_image is not defined ReferenceError: $scroll_image is not defined
35
+ ### 該当のソースコード
42
36
 
43
- at initSlider (http://localhost:3000/packs/js/slick-custom-7c3c002474efdd4c2184.js:99:3)
37
+ show.html.erb
44
38
 
45
- at HTMLDocument.<anonymous> (http://localhost:3000/packs/js/slick-custom-7c3c002474efdd4c2184.js:105:5)
39
+ ```html
46
40
 
47
- at mightThrow (http://localhost:3000/packs/js/slick-custom-7c3c002474efdd4c2184.js:6777:36)
41
+ ...
48
42
 
43
+ <script>
44
+
45
+ jQuery(function(){
46
+
47
+ console.log("hello");
48
+
49
- at process (http://localhost:3000/packs/js/slick-custom-7c3c002474efdd4c2184.js:6819:19) undefined
49
+ $('.slider').slick();
50
+
51
+ });
52
+
53
+ </script>
50
54
 
51
55
  ```
52
56
 
53
57
 
54
58
 
55
- ### 該当のソースコード
56
-
57
- slick-custom.js
59
+ helloの出力は確認できました。
58
-
59
- ```js
60
-
61
- $(function(){
62
-
63
- $(document).ready(function(){
64
-
65
- console.log("こんにちは");
66
-
67
- $('.scroll_images').slick();
68
-
69
- });
70
-
71
- })
72
-
73
- ```
74
60
 
75
61
 
76
62
 
77
- こんにちは　の出力は確認できました。
78
-
79
-
80
-
81
- slick関連のファイルを読み込んでいる場所
82
-
83
- views/layouts/application.html.erb　のheadの部分で読み込んでいます。
63
+ slick関連のファイルやjqueryは views/layouts/application.html.erb のheadの部分で読み込んでいます。
84
64
 
85
65
  ```html
86
66
 
@@ -91,20 +71,6 @@
91
71
  <link type="text/styleseet" type="text/css" href="/assets/slick/slick.css"/>
92
72
 
93
73
  <link type="text/styleseet" href="/assets/slick/slick-theme.css">
94
-
95
- ```
96
-
97
-
98
-
99
- slick-custom.jsを読み込んでいる場所
100
-
101
- views/home/show.html.erb で読み込んでいます
102
-
103
-
104
-
105
- ```
106
-
107
- <%= javascript_pack_tag 'slick-custom.js' %>
108
74
 
109
75
  ```
110
76
 
@@ -140,4 +106,6 @@
140
106
 
141
107
 
142
108
 
109
+ webpackのことやrails6のことをあまり理解せずに作り始めてしまったため、わからなくなってしまいました。
110
+
143
- ご教授いただければ幸いです
111
+ 当たり前のことができていないかもしれませんが、ご教授いただければ幸いです。

1

冗長表現を改善しました

2020/05/27 08:47

投稿

Tamusu
Tamusu

スコア8

test CHANGED
File without changes
test CHANGED
@@ -10,7 +10,9 @@
10
10
 
11
11
  ### 発生している問題・エラーメッセージ
12
12
 
13
+
14
+
13
- slick読み込んでいる場所show.html.erbで、以下のエラーメッセージが出ました。
15
+ localhostで読み込み、F12で確認すると、slick読み込んでいる場所show.html.erbで、以下のエラーメッセージが出ました。
14
16
 
15
17
 
16
18
 
@@ -18,11 +20,11 @@
18
20
 
19
21
  ```console
20
22
 
21
- Uncaught TypeError: $(...).slick is not a function
23
+ Uncaught ReferenceError: $scroll_image is not defined
22
24
 
23
- at initSlider (slick-custom.js:2)
25
+ at initSlider (slick-custom.js:4)
24
26
 
25
- at HTMLDocument.<anonymous> (slick-custom.js:16)
27
+ at HTMLDocument.<anonymous> (slick-custom.js:10)
26
28
 
27
29
  at mightThrow (deferred.js:97)
28
30
 
@@ -36,15 +38,15 @@
36
38
 
37
39
  ```console
38
40
 
39
- jQuery.Deferred exception: $(...).slick is not a function TypeError: $(...).slick is not a function
41
+ jQuery.Deferred exception: $scroll_image is not defined ReferenceError: $scroll_image is not defined
40
42
 
41
- at initSlider (http://localhost:3000/packs/js/slick-custom-751e008ac45cd8c59f5d.js:97:23)
43
+ at initSlider (http://localhost:3000/packs/js/slick-custom-7c3c002474efdd4c2184.js:99:3)
42
44
 
43
- at HTMLDocument.<anonymous> (http://localhost:3000/packs/js/slick-custom-751e008ac45cd8c59f5d.js:111:5)
45
+ at HTMLDocument.<anonymous> (http://localhost:3000/packs/js/slick-custom-7c3c002474efdd4c2184.js:105:5)
44
46
 
45
- at mightThrow (http://localhost:3000/packs/js/slick-custom-751e008ac45cd8c59f5d.js:6783:36)
47
+ at mightThrow (http://localhost:3000/packs/js/slick-custom-7c3c002474efdd4c2184.js:6777:36)
46
48
 
47
- at process (http://localhost:3000/packs/js/slick-custom-751e008ac45cd8c59f5d.js:6825:19) undefined
49
+ at process (http://localhost:3000/packs/js/slick-custom-7c3c002474efdd4c2184.js:6819:19) undefined
48
50
 
49
51
  ```
50
52
 
@@ -56,37 +58,13 @@
56
58
 
57
59
  ```js
58
60
 
59
- unction initSlider(){
60
-
61
- $('.scroll_images').slick({
62
-
63
- dots: false,
64
-
65
- infinite: true,
66
-
67
- speed: 300,
68
-
69
- slidesToShow: 1,
70
-
71
- autoplay: true,
72
-
73
- prevArrow: '<div class="slick-prev"><i class="fa fa-chevron-left"></i></div>',
74
-
75
- nextArrow: '<div class="slick-next"><i class="fa fa-chevron-right"></i></div>'
76
-
77
- });
78
-
79
- }
80
-
81
-
82
-
83
61
  $(function(){
84
62
 
85
63
  $(document).ready(function(){
86
64
 
87
65
  console.log("こんにちは");
88
66
 
89
- initSlider();
67
+ $('.scroll_images').slick();
90
68
 
91
69
  });
92
70
 
@@ -94,15 +72,15 @@
94
72
 
95
73
  ```
96
74
 
97
- ↑consoleに出力している文字は出力できています。
98
75
 
99
76
 
77
+ こんにちは　の出力は確認できました。
100
78
 
101
79
 
102
80
 
103
81
  slick関連のファイルを読み込んでいる場所
104
82
 
105
- views/layouts/application.html.erb
83
+ views/layouts/application.html.erb　のheadの部分で読み込んでいます。
106
84
 
107
85
  ```html
108
86
 
@@ -120,7 +98,7 @@
120
98
 
121
99
  slick-custom.jsを読み込んでいる場所
122
100
 
123
- views/home/show.html.erb 一番下
101
+ views/home/show.html.erb で読み込んでいます
124
102
 
125
103
 
126
104
 
@@ -162,16 +140,4 @@
162
140
 
163
141
 
164
142
 
165
- jquery@^3.5.1 yarn.lockで確認
166
-
167
-
168
-
169
- "jquery": "^3.5.1" package.json
170
-
171
-
172
-
173
- js自体は読み込めているのですが、slickが読み込めていない？ようで、slickでエラーが出ているようです
174
-
175
-
176
-
177
143
  ご教授いただければ幸いです