課題でプラグインなしでスライダーを作っています。
コードはできているのですが、今のコードをクラス構文に書き直す課題です。

constructorにhtmlエレメントを定義したいのですが、
その場合の引き数をどう定義して良いのか？
メソッドの中にどう書くべきか？
そもそも、constructorにhtmlエレメントを定義するのがダメなのか？

色々試して、consoleにエラーは出ないものの起動もしません。
（同じコードでクラス構文を使わなければ動きます。）
ネットでも同じ例が見つけられなくて、こちらで再び質問しました。
どうぞよろしくお願いします。

Jquery
1let slideNumber = $('.slide').length;
2let slideLarge = $('.slide').width();
3let slideContentsLarge = slideNumber * slideLarge;
4slideNumber = 0;
5
6class Slider {
7  constructor(slide, slideContainer, contents, animationSpeed, interval){
8  this.slide = document.getElementById('slider');
9  this.slideContainer = document.getElementsByClassName('slide-container');
10  this.contents = document.getElementsByClassName('slide');
11  this.animationSpeed = animationSpeed;
12  this.interval = interval;
13} //constructor
14
15
16  initSlide(){
17
18  $(this.contents).css('width', slideLarge);
19  $(this.slideContainer).css({
20    width: slideContentsLarge,
21    marginLeft: -slideLarge
22  });
23
24  // On insère la dernière slide au début de la Div.slide-container
25  $('.slide:last-child').prependTo($(this.slideContainer));
26
27  function moveGauche(){
28    $(this.contents).animate({'left': slideLarge}, this.animationSpeed, function(){
29      $('.slide:last-child').prependTo($(this.slideContainer));
30      $(this.slideContainer).css('left', '');
31    });
32  }
33  //next
34  function moveDroite(){
35    slideNumber++;
36    $(this.slideContainer).animate({'left': -slideLarge}, this.animationSpeed, function(){
37    $('.slide:first-child').appendTo($(this.slideContainer));
38    $(this.slideContainer).css('left', '');
39  });
40
41}
42setInterval(moveDroite, this.interval);
43} //initSlide()
44
45} //class Slider
46
47const slider = new Slider('slide', 'slideContainer', 'contents', 300, 5000);
48slider.initSlide();

HTML
1<body>
2    <div class="container-fluid">
3      <section class="row" id="slider">
4       <div class="col-md-12 slide-container">
5         <div class="col-md-12 slide" id="slide06"></div>         
6         <div class="col-md-12 slide" id="slide01"></div>
7         <div class="col-md-12 slide" id="slide02"></div>
8         <div class="col-md-12 slide" id="slide03"></div>
9         <div class="col-md-12 slide" id="slide04"></div>
10         <div class="col-md-12 slide" id="slide05"></div>
11      </div>
12      <div class="slider-navi">
13        <a href="#" class="arrow next"><i class="fas fa-arrow-right"></i></a>
14        <a href="#" class="arrow prev"><i class="fas fa-arrow-left"></i></a>
15      </div>
16      <div class="pagination"></div>
17    </section>

CSS
1#slider {
2  height: 500px;
3  width: 85%;
4  position: relative;
5  margin: auto;
6  box-shadow: 0 0 8px #404040;
7}
8
9.slide-view {
10  /*position: relative;*/
11  overflow: hidden;
12  height: 500px;
13  width: 100%;
14}
15
16.slide-container {
17  width: 600%;
18  height: 100%;
19  display: flex;
20  position: absolute;
21  left: 0;
22}
23
24.slide{
25  position: relative;
26  width: 100%;
27  height: 500px;
28  color: #fff;
29  /*float: left;*/
30}
31
32.slide a {
33  display: block;
34}
35
36.slide a:hover {
37  color: #600;
38}
39
40#slide01 {
41  background: linear-gradient(45deg, rgba(24, 24, 24, 0.9) 10%, rgba(255, 255, 255, 0.1) 55%),
42              url(images/bike-414278_1920.jpg) no-repeat 0px -120px;
43}
44
45#slide01 .text-container {
46  color: #fff;
47  top: 20%;
48  left: 50px;
49}
50
51#slide01 .text-container > h2 {
52  font-size: 3em;
53  font-family: 'latobold', Arial, sans-serif;
54}
55
56#slide01 .text-container > h1 {
57  font-size: 1.5em;
58  font-family: 'latoregular', Arial, sans-serif;
59  line-height: 1.5em;
60}
61
62/* slide 02 */
63#slide02 {
64  background: linear-gradient(rgba(22, 129, 134, 0.7), rgba(22, 129, 134, 0.7)),
65  url(images/bike-414278_1920.jpg);
66}
67
68#slide02 .text-container,
69#slide03 .text-container,
70#slide04 .text-container,
71#slide05 .text-container,
72#slide06 .text-container
73{
74  margin: 80px auto auto auto;
75  text-align: center;
76  width:70%;
77}
78
79#slide02 .text-container{
80  margin: 120px auto auto auto;
81}
82
83#slide02 .text-container > h2{
84  font-size: 2.8em;
85  margin-bottom: 0.6em;
86}
87
88#slide02 .text-container > p{
89  font-size: 1.4em;
90  line-height: 1.5em;
91  font-family: 'latoregular', sans-serif;
92}
93
94#slide03 .text-container > h3,
95#slide04 .text-container > h3,
96#slide05 .text-container > h3,
97#slide06 .text-container > h3 {
98  font-size: 1.8em;
99  line-height: 1.5em;
100  font-family: 'latoregular', sans-serif;
101}
102
103#slide03 .text-container > p,
104#slide04 .text-container > p,
105#slide05 .text-container > p,
106#slide06 .text-container > p {
107  font-size: 1.2em;
108  border: 1px solid #fff;
109  padding: 5px 3px;
110  margin: 5% auto;
111}
112
113#slide03 .text-container > img,
114#slide04 .text-container > img,
115#slide05 .text-container > img,
116#slide06 .text-container > img {
117  width: 20%;
118  margin-bottom: 0;
119}
120
121
122#slide03 {
123  background: linear-gradient(rgba(119, 178, 82, 0.8), rgba(119, 178, 82, 0.8)),
124  url(images/bike-414278_1920.jpg);
125}
126
127#slide04 {
128  background:
129  linear-gradient(rgba(245, 166, 31, 0.8), rgba(245, 166, 31, 0.8)),
130  url(images/bike-414278_1920.jpg);
131}
132
133#slide05 {
134  background:
135  linear-gradient(rgba(22, 142, 149, 0.8), rgba(22, 142, 149, 0.8)),
136  url(images/bike-414278_1920.jpg);
137}
138
139#slide06 {
140  background:
141  linear-gradient(rgba(142, 119, 182, 0.8), rgba(142, 119, 182, 0.8)),
142  url(images/bike-414278_1920.jpg);
143}
144
145.slider-navi a,
146.pagination a {
147  overflow: hidden;
148}
149
150.slider-navi a.disabled{
151  display: none;
152}
153
154
155.arrow {
156  z-index: 10;
157  cursor: pointer;
158  position: absolute;
159  top: 45%;
160  color: #FFF;
161  font-size: 1.2em;
162}
163
164.arrow i {
165  color: #D75254;
166  border: solid 1px #D75254;
167  padding: 7px;
168}
169
170.arrow i:hover{
171  border: solid 1px rgba(255, 255, 255, 0.7);
172  background: rgba(64, 64, 64, 0.5);
173  color: rgba(215,84,82,0.7);
174}
175
176.next {
177 position: absolute;
178 right: -70px;
179}
180
181.prev {
182  position: absolute;
183  left: -70px;
184}
185
186.pagination {
187    position: absolute;
188    bottom: 30px;
189    left: 45%;
190    width: 200px;
191    z-index: 30;
192}
193
194.pagination a {
195    float: left;
196    margin: 5px 5px 0;
197    width: 11px;
198    height: 11px;
199    border-radius: 5px;
200    background: rgba(238, 238, 238, 0.8);
201    vertical-align: middle;
202}
203
204.pagination a.active{
205   cursor: default;
206   background: rgba(215,84,82,1);
207}
208
209.pagination a.active:before{
210   margin-left: -130px;
211}

追記：クラス定義を修正したjavascriptコードとクラス名を変更したのでHTMLファイルも再度掲載します。

javaScript
1let slideNumber = $('.contents').length;
2let slideLarge = $('.contents').width();
3let slideContentsLarge = slideNumber * slideLarge;
4
5console.log(slideNumber);
6console.log(slideLarge);
7console.log(slideContentsLarge);
8
9slideNumber = 0;
10
11class Slider {
12  constructor(slider, slidecontainer, contents, animationSpeed, interval){
13  this.slide = $("#"+slider);
14  this.slideContainer = $("."+slidecontainer);
15  this.contents = $("."+contents);
16  this.animationSpeed = animationSpeed;
17  this.interval = interval;
18} //constructor
19
20 check(){
21  console.log($(this.slide).length);
22  console.log($(this.slideContainer).length);
23  console.log($(this.contents).length);
24};
25
26  initSlide(){
27  $(this.contents).css('width', slideLarge);
28  $(this.slideContainer).css({
29    width: slideContentsLarge,
30    marginLeft: -slideLarge
31  });
32
33  // On insère la dernière slide au début de la Div.slide-container
34  $('.contents:last-child').prependTo($(this.slideContainer));
35//prev
36  function moveGauche(){
37    slideNumber--;
38    $(this.slideContainer).animate({'left': slideLarge}, this.animationSpeed, function(){
39      $('.contents:last-child').prependTo($(this.slideContainer));
40    $(this.slideContainer).css('left', '');
41    });
42  }
43  //next
44  function moveDroite(){
45    slideNumber++;
46    $(this.slideContainer).animate({'left': -slideLarge}, this.animationSpeed, function(){
47    $('.contents:first-child').appendTo($(this.slideContainer));
48    $(this.slideContainer).css('left', '');
49  });
50
51}
52setInterval(moveDroite, this.interval);
53} //initSlide()
54
55} //class Slider
56window.addEventListener('DOMContentLoaded', function(e){
57  const sliderA = new Slider('slider', 'slidecontainer', 'contents', 300, 5000);
58  sliderA.initSlide();
59  sliderA.check();
60});

HTML
1<section class="row" id="slider">
2 <div class="col-md-12 slide-view">
3  <div class="col-md-12 slidecontainer">
4
5   <div class="col-md-12 contents" id="slide01"></div>
6   <div class="col-md-12 contents" id="slide02"></div>
7   <div class="col-md-12 contents" id="slide03"></div>
8   <div class="col-md-12 contents" id="slide04"></div>
9   <div class="col-md-12 contents" id="slide05"></div>
10   <div class="col-md-12 contents" id="slide06"></div>
11
12  </div> <!--slidecontainer-->
13 </div> <!--slide-view-->
14</section>

kei344

2019/04/15 09:08

HTMLも質問文に追記されてはいかがでしょう。

Naotimu

2019/04/15 09:16

了解です！

行動規範の内容に同意します

回答3件

class Slider {

constructor(slide, slideContainer, contents, animationSpeed, interval){
this.slide = document.getElementById('slider');
this.slideContainer = document.getElementsByClassName('slide-container');
this.contents = document.getElementsByClassName('slide');
this.animationSpeed = animationSpeed;
this.interval = interval;
}

コンストラクタに渡した変数を無視してスタティックにgetElementByIdしています
ちなみに宣言時点ですでにそのidを持ったHTMLElementがあるなら拾えるでしょうし
これからつくるならdocument.createElementでHTML要素を作った上で
idを付加してあげてください

sample

javascript
1<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
2<script>
3class Slider {
4  constructor(slide, slideContainer, contents, animationSpeed, interval){
5    this.slide = $("#"+slide);
6    this.slideContainer = $("."+slideContainer);
7    this.contents = $("."+contents);
8    this.animationSpeed = animationSpeed;
9    this.interval = interval;
10  }
11  check(){
12    console.log($(this.slide).length);
13    console.log($(this.slideContainer).length);
14    console.log($(this.contents).length);
15  }
16}  
17window.addEventListener('DOMContentLoaded', function(e){
18  const s = new Slider('slider', 'slide-container', 'slide', 300, 5000);
19  s.check();
20});
21</script>
22
23<body>
24    <div class="container-fluid">
25      <section class="row" id="slider">
26       <div class="col-md-12 slide-container">
27         <div class="col-md-12 slide" id="slide06"></div>         
28         <div class="col-md-12 slide" id="slide01"></div>
29         <div class="col-md-12 slide" id="slide02"></div>
30         <div class="col-md-12 slide" id="slide03"></div>
31         <div class="col-md-12 slide" id="slide04"></div>
32         <div class="col-md-12 slide" id="slide05"></div>
33      </div>
34      <div class="slider-navi">
35        <a href="#" class="arrow next"><i class="fas fa-arrow-right"></i></a>
36        <a href="#" class="arrow prev"><i class="fas fa-arrow-left"></i></a>
37      </div>
38      <div class="pagination"></div>
39    </section>

投稿2019/04/15 09:10

編集2019/04/15 10:32

yambejp

総合スコア114825

Naotimu

2019/04/15 09:29

回答ありがとうございます。すみません、「コンストラクタに渡した変数を無視してスタティックにgetElementByIdしている」という意味が分かりませんでした。初心者なもので、噛み砕いで説明いただいてもいいでしょうか？ constructorの引数と変数の名前が違うという意味ですか？それは私も気になっていて、でも、変数の値、例えば this.slideContainer = document.getElementsByClassName('slide-container');において引数をslide-containerにするとエラーが出ました。ちなみに、idとclassを持ったエレメントはHTMLに定義されています。 HTMLコードとCSSコードも追記しました。

yambejp

2019/04/15 10:33 編集

new Slider('slide', 'slideContainer', 'contents', 300, 5000); 引数の順番に'slide', 'slideContainer', 'contents'という文字列と 300, 5000という数値を渡していますこれがコンストラクタでslide, slideContainer, contents, animationSpeed, intervalの各変数に 'slide', 'slideContainer', 'contents', 300, 5000が渡っています。コンストラクタ内では this.slide = document.getElementById('slider'); としていますが'slider'というスタティックな文字列リテラルを渡しているのでさきほど受け取っsliderという変数がなんにも役になっていません同じような名前でクラスの名称も、変数も、文字列も使いまわしているのでご自身で何がなんだかわからなくなっているのでしょう、きっととりあえずsampleつけておきました。 jQueryオブジェクトが渡せているのがわかるでしょう。 HTMLCollectionやNodeList、HTMLElementなどでも同様に処理できるはずです

Naotimu

2019/04/15 13:37

回答とサンプルありがとうございました。納得です。 jQueryオブジェクト、consoleで正しく表示されました。なのに、まだスライドが動きません。同じコードでクラスを使わないと動くのになぜ？？？もう一回見直します。

yambejp

2019/04/16 02:25

jQueryオブジェクト（もしくはDOM）がつかめているならあとはスライダーの実装の問題では？想定するスライダーとはどういう仕様なのか提示したほうがよいでしょうね

Naotimu

2019/04/16 08:13 編集

スライダーは６枚のスライドをCSSで横１列に並べ、スライド幅の分だけ五秒毎に左にスライドさせるタイプです。スライド一枚の幅を設定し、右に進む場合、左にその分だけずらす、同時に一番前のスライド（.contents:first-child）を横いちで並べたスライド帯の一番後ろに回しています。これをsetIntervalで五秒毎に動くように設定。左に進む場合は、その逆で（.contents:last-child）をスライド帯の一番前に回しています。この後に、左右へ進むボタンの設定もありますが、割愛します。クラスを使わない書き方だと正常に動くということは、クラスの書き方が間違っているのでしょうか？

Naotimu

2019/04/16 07:50

コードをつけたかったんですが、コメント欄にはダメなんですね。。。

yambejp

2019/04/16 07:53 編集

コードを書くなら元の質問に追記するか、どうしても見にくくなる懸念があるならそうことわった上で、自分の質問に回答としてつけてください

Naotimu

2019/04/16 08:35

了解です。質問に追記しました。もしお時間があれば、どうぞよろしくお願いします。

行動規範の内容に同意します

とうとう解決しました。

JQueryを使った場合、constructorで設定した要素、例えばthis.slideを、メソッドの中にそのまま描いても（オブジェクトとして扱われて？ここ曖昧です。。。）、この要素を取得できないことが問題でした。
これらの要素をメソッド内で変数に入れて代入することで解決しました。
他にbindメソッドを使っても良いそう、むしろその方がいいそうですが、その書き方はまだ分かりません。

この問題はJQueryでは確実に、JavaScriptでもコードの内容によって起こるそうです。

後の方の為にコード貼っておきます。
回答いただいたyambejpさん、ありがとうございました。
色々調べて、試して、とても勉強になりました。
※HTMLは変更してないので割愛します。

JQuery
1let slideNumber = $('.contents').length;
2let slideLarge = $('.contents').width();
3let slideContentsLarge = slideNumber * slideLarge;
4
5slideNumber = 0;
6
7class Slider {
8  constructor(slider, slidecontainer, contents, speed, interval){
9  this.slide = $("#"+slider);
10  this.slideContainer = $("."+slidecontainer);
11  this.contents = $("."+contents);
12  this.speed = speed;
13  this.interval = interval;
14} 
15
16  initSlide(){
17
18  let slide = this.slide;
19  let container = this.slideContainer;
20  let contents = this.contents;
21  let speed = this.speed;
22
23  $(contents).css('width', slideLarge);
24  $(container).css({
25    width: slideContentsLarge,
26    marginLeft: -slideLarge
27  });
28
29  // 最後尾のスライドをDiv.slidecontainerの一番前にまわす
30  $('.contents:last-child').prependTo($(container));
31  //prev
32  function moveGauche(){
33    slideNumber--;
34  　$(container).animate({'left': slideLarge}, speed, function(){
35
36    // 最後尾のスライドをDiv.slidecontainerの前にまわす
37    $('.contents:last-child').prependTo($(container));
38
39    //Div.slidecontainerの位置を更新
40    $(container).css('left', '');
41    });
42  }
43  //next
44  function moveDroite(){
45    slideNumber++;
46    $(container).animate({'left': -slideLarge}, speed, function(){
47
48    // 一番前のスライドをDiv.slidecontainerの後ろにまわす
49    $('.contents:first-child').appendTo($(container));
50    $(container).css('left', '');
51  });
52
53}
54var demarrage = setInterval(moveDroite, this.interval);
55
56// ボタン操作の設定
57$('.arrow.prev').on('click', function(){
58  moveGauche();
59});
60
61$('.arrow.next').on('click', function(){
62  moveDroite();
63});
64
65// キーボード　矢印キー←　→操作の設定
66$('html').keydown(function(e){
67  switch(e.which){
68    case 37: // Key[←]
69      moveGauche(e);
70    break;
71
72    case 39: // Key[→]
73      moveDroite(e);
74    break;
75      }
76  });
77
78  //マウスがスライドに乗ったら一旦停止、外れたら再びスタート
79  $(container).hover(
80    function(){
81      $(this).css('cursor','url(css/images/icon/pause.png), url(css/images/icon/pause.cur), pointer');
82      clearInterval(demarrage);
83    },
84    function(){
85      moveDroite();
86    }
87  );
88
89} //initSlide()
90
91} //class Slider
92
93window.addEventListener('DOMContentLoaded', function(e){
94  const sliderA = new Slider('slider', 'slidecontainer', 'contents', 300, 5000);
95  sliderA.initSlide();
96});

投稿2019/04/18 10:31

Naotimu

総合スコア12

自己解決

とうとう解決できました。

JQueryを使った場合、constructorで定義した要素、例えばthis.slideをそのままメソッドの中に入れても読み込めないことが原因でした。
メソッドの中で、要素this.slideを変数に置き換えて代入すると作動しました。
bindメソッドを使ってもこの問題は解決するらしいですが、そのやり方はまだ分かりません。（その方が良いらしいですが）

この問題はJQueryでは確実に、Javascriptでもコードの内容には起こるそうです。
何にしろ、たくさん考えて、色々試して、とても勉強になりました。

回答いただいたyambejpさん、ありがとうございました。
後の方の助けになればと、コード貼っときます。
※HTMLは変更してないので割愛します。

JQuery
1let slideNumber = $('.contents').length;
2let slideLarge = $('.contents').width();
3let slideContentsLarge = slideNumber * slideLarge;
4
5slideNumber = 0;
6
7class Slider {
8  constructor(slider, slidecontainer, contents, speed, interval){
9  this.slide = $("#"+slider);
10  this.slideContainer = $("."+slidecontainer);
11  this.contents = $("."+contents);
12  this.speed = speed;
13  this.interval = interval;
14} 
15
16  initSlide(){
17
18  let slide = this.slide;
19  let container = this.slideContainer;
20  let contents = this.contents;
21  let speed = this.speed;
22
23  $(contents).css('width', slideLarge);
24  $(container).css({
25    width: slideContentsLarge,
26    marginLeft: -slideLarge
27  });
28
29  // 一番後ろのスライドをDiv.slide-containerの前にまわす
30  $('.contents:last-child').prependTo($(container));
31
32　//prev
33  function moveGauche(){
34    slideNumber--;
35  　$(container).animate({'left': slideLarge}, speed, function(){
36
37　　// 一番後ろのスライドをDiv.slide-containerの前にまわす
38    $('.contents:last-child').prependTo($(container));
39
40　　// Div.slide-containerの位置を更新
41    $(container).css('left', '');
42    });
43  }
44  //next
45  function moveDroite(){
46    slideNumber++;
47    $(container).animate({'left': -slideLarge}, speed, function(){
48
49　　// 一番前のスライドをDiv.slide-containerの後ろにまわす
50    $('.contents:first-child').appendTo($(container));
51    $(container).css('left', '');
52  });
53
54}
55var demarrage = setInterval(moveDroite, this.interval);
56
57// ボタン操作の設定
58// prev
59$('.arrow.prev').on('click', function(){
60  moveGauche();
61});
62
63// next
64$('.arrow.next').on('click', function(){
65  moveDroite();
66});
67
68// キーボードの←、→での操作の設定
69$('html').keydown(function(e){
70  switch(e.which){
71    case 37: // Key[←]
72      moveGauche(e);
73    break;
74
75    case 39: // Key[→]
76      moveDroite(e);
77    break;
78      }
79  });
80
81  //スライドにマウスが乗ると一旦停止、外れると再びスタート
82  $(container).hover(
83    function(){
84      $(this).css('cursor','url(css/images/icon/pause.png), url(css/images/icon/pause.cur), pointer');
85      clearInterval(demarrage);
86    },
87    function(){
88      moveDroite();
89    }
90  );
91
92} 
93
94} 
95
96window.addEventListener('DOMContentLoaded', function(e){
97  const sliderA = new Slider('slider', 'slidecontainer', 'contents', 300, 5000);
98  sliderA.initSlide();
99});