JavaScriptのクラスについて

ドットインストールにてJavaScriptを学習しているのですがクラスの中に入れるものとそうでないものとの区別がつきません。
クラス内に書くものと外に書くものをどのように判断すれば良いのでしょうか。
教えて頂ければ幸いです。

'use strict';

{
class Panel {
constructor() {
const section = document.createElement('section');
section.classList.add('panel');

  this.img = document.createElement('img');
  this.img.src = this.getRandomImage();

  this.timeoutId = undefined;

  this.stop = document.createElement('div');
  this.stop.textContent = 'STOP';
  this.stop.classList.add('stop', 'inactive');
  this.stop.addEventListener('click', () => {
    if (this.stop.classList.contains('inactive')) {
      return;
    }
    this.stop.classList.add('inactive');

    clearTimeout(this.timeoutId);

    panelsLeft--;

    if (panelsLeft === 0) {
      checkResult();
      spin.classList.remove('inactive');
      panelsLeft = 3;
    }
  });

  section.appendChild(this.img);
  section.appendChild(this.stop);

  const main = document.querySelector('main');
  main.appendChild(section);
}

getRandomImage() {
  const images = [
    'img/seven.png',
    'img/bell.png',
    'img/cherry.png',
  ];
  return images[Math.floor(Math.random() * images.length)];
}

spin() {
  this.img.src = this.getRandomImage();
  this.timeoutId = setTimeout(() => {
    this.spin();
  }, 50);
}

isUnmatched(p1, p2) {
  return this.img.src !== p1.img.src && this.img.src !== p2.img.src;
}

unmatch() {
  this.img.classList.add('unmatched');
}

activate() {
  this.img.classList.remove('unmatched');
  this.stop.classList.remove('inactive');
}

}

const panels = [
new Panel(),
new Panel(),
new Panel(),
];

let panelsLeft = 3;

const spin = document.getElementById('spin');
spin.addEventListener('click', () => {
if (spin.classList.contains('inactive')) {
return;
}
spin.classList.add('inactive');

panels.forEach(panel => {
  panel.activate();
  panel.spin();
});

});
}

K_3578

2021/03/19 04:47

ソースコードはMarkDownの<code>ブロック内に貼り付けてください。質問は編集できますので。

maisumakun

2021/03/19 04:51

> クラス内に書くものと外に書くものをどのように判断すれば良いのでしょうか。「この変数/プロパティはこっちにあってはだめなのでしょうか」程度に、質問をもう少し具体的にしていただけないでしょうか？

yambejp

2021/03/19 04:54

なにがわからないのでしょうか？なにをクラスにするべきかがわからないということですか？

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

回答1件

ベストアンサー

再利用できないクラスは意味が無い。
細分化して機能ごとに組み立てなおす。

js
1<!DOCTYPE html>
2<meta charset="UTF-8">
3<style>
4</style>
5
6<body> 
7<section id="S"></section>
8<button id="START">Start</button>
9<button id="RESET">Reset</button>
10<hr>
11<section id="S2"></section>
12<button id="START2">Start</button>
13<button id="RESET2">Reset</button>
14
15<script>
16
17class Drum {
18
19  constructor (body, ctrl, display, interval = 100) {
20    this.body = body;
21    this.ctrl = ctrl;
22    this.display = display;
23    this.timerId = null;
24    this.interval = interval;
25    this.no = null;
26    this.started = false;
27  }
28
29
30  stop () {
31    this.timerId && (this.timerId = (clearInterval (this.timerId), null));
32    return this;
33  }
34
35
36  start () {
37    this.timerId || (this.timerId = setInterval (this.change.bind (this), this.interval));
38    this.started = true;
39    return this;
40  }
41
42
43  change (index = -1) {
44    const
45      images = [//これは外から指定できるようにする
46        'img/seven.png',
47        'img/bell.png',
48        'img/cherry.png',
49      ],
50      len = images.length;
51
52    this.no = (index < 0 ? Math.random () * len: index % len) |0;
53    this.display.src = this.display.alt = images[this.no];
54    return this;
55  }
56
57
58  reset (index) {
59    this.started = false;
60    return this.stop ().change (index);
61  }
62
63
64  get value () {
65    return this.timerId ? null: this.started ? this.no: null;
66  }
67
68
69  handleEvent (event) {
70    let e = event.target;
71    if (e === this.ctrl)
72      this.stop ();
73  }
74
75
76  static create (interval) {
77    const
78      doc = document,
79      section = doc.createElement ('section'),
80      display = section.appendChild (doc.createElement ('img')),
81      ctrl = section.appendChild (doc.createElement ('div')),
82      drum = new this (section, ctrl, display, interval);
83    
84    ctrl.textContent = 'STOP';
85    section.addEventListener ('click', drum, false);
86    
87    drum.reset ();
88    return drum;
89  }
90}
91
92
93class Panel {
94  constructor (body, childs, SWStart, SWReset) {
95    this.body = body;
96    this.childs = childs;
97    this.SWStart = SWStart;
98    this.SWReset = SWReset;
99  }
100
101  get length () {
102    return this.childs.length;
103  }
104
105  start () {
106    this.childs.forEach (c=> c.start ());
107    return this;
108  }
109
110  stop () {
111    this.childs.forEach (c=> c.stop ());
112    return this;
113  }
114
115  reset () {
116    this.childs.forEach (c=> c.reset ());
117    return this;
118  }
119
120  check () {
121    let 
122      values = this.childs.map (c=> c.value),
123      isAllStop = values.every (i=> i !== null);
124
125    if (isAllStop) {
126      console.log (values);
127      let
128        first = values.shift (),
129        isSame = values.every (v=> v === first);
130
131     if (isSame) {
132       alert ('おめでとう');
133     }
134
135    }
136  }
137
138  handleEvent (event) {
139    let e = event.target;
140    switch (true) {
141    case this.SWStart === e: this.start (); return;
142    case this.SWReset === e: this.reset (); return;
143    }
144    this.check ();
145  }
146
147  static create (body, childs, SWStart, SWStop) {
148    const panel = new this (body, childs, SWStart, SWStop);
149    childs.forEach (c=> body.appendChild (c.body));
150    document.addEventListener ('click', panel, false);
151    panel.reset ();
152    return panel;
153  }
154}
155
156//________________________
157
158const
159  drums = [ Drum.create (), Drum.create (), Drum.create (), Drum.create () ],
160  panel = Panel.create (S, drums, START, RESET);
161
162const
163  drums2 = [ Drum.create (), Drum.create () ],
164  panel2 = Panel.create (S2, drums2, START2, RESET2);
165
166</script>
167