回答編集履歴
17
テキスト修正
test
CHANGED
|
@@ -2,7 +2,17 @@
|
|
|
2
2
|
|
|
3
3
|
|
|
4
4
|
|
|
5
|
+
リファクタリングの指針として、以下の２点が考えられます。
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
- `one`, `two`, `three`, ... という id や変数を使わないようにすること
|
|
10
|
+
|
|
11
|
+
- イベント属性を使わずに、控えめなJavaScript（※追記2) にすること
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
5
|
-
以下、修正案の一例です。
|
|
15
|
+
以下、上記を踏まえた修正案の一例です。
|
|
6
16
|
|
|
7
17
|
|
|
8
18
|
|
16
テキスト修正
test
CHANGED
|
@@ -144,23 +144,17 @@
|
|
|
144
144
|
|
|
145
145
|
|
|
146
146
|
|
|
147
|
-
|
|
147
|
+
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
148
|
+
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
上記の回答に挙げたjavascriptのコードは、テーブルの行が増えても、
|
|
149
|
+
上記の回答に挙げたjavascriptのコードは、テーブルの行が増えても、増えた行に対応するためのコード追加、修正をする必要がないものになっています。たとえば、上記のHTMLのテーブルの行を単に４行追加して計７行にしたとしても、javascriptのコードには何も手を加える必要がないです。
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
150
|
+
|
|
151
|
+
|
|
152
|
+
|
|
159
|
-
- **テーブルの行を７行に
|
|
153
|
+
- **テーブルの行を７行にする。：** [https://codepen.io/jun68ykt/pen/BaadEmw?editors=1010](https://codepen.io/jun68ykt/pen/BaadEmw?editors=1010)
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
154
|
+
|
|
155
|
+
|
|
156
|
+
|
|
163
|
-
ご質問に挙げられている元のjavascriptのコードを、テーブル
|
|
157
|
+
ご質問に挙げられている元のjavascriptのコードを、テーブルが何行になっても追加、修正する必要がないものにするためには、
|
|
164
158
|
|
|
165
159
|
|
|
166
160
|
|
|
@@ -172,7 +166,7 @@
|
|
|
172
166
|
|
|
173
167
|
|
|
174
168
|
|
|
175
|
-
### 追記
|
|
169
|
+
### 追記1： onclick属性にスクリプトを書く例
|
|
176
170
|
|
|
177
171
|
|
|
178
172
|
|
|
@@ -196,7 +190,7 @@
|
|
|
196
190
|
|
|
197
191
|
```
|
|
198
192
|
|
|
199
|
-
のようにして、クリックされたボタンを引数にとる関数`count(button)` を作っておいて、どのボタンがクリックされてもこれに処理させるようにします。以下、その一例です。（
|
|
193
|
+
のようにして、クリックされたボタンを引数にとる関数`count(button)` を作っておいて、どのボタンがクリックされてもこれに処理させるようにします。以下、その一例です。（初めに挙げた回答と同じく、`one`, `two`, `three` を使わないようにもしています。）
|
|
200
194
|
|
|
201
195
|
|
|
202
196
|
|
|
@@ -318,7 +312,7 @@
|
|
|
318
312
|
|
|
319
313
|
|
|
320
314
|
|
|
321
|
-
### 追記
|
|
315
|
+
### 追記2: 控えめなJavaScript
|
|
322
316
|
|
|
323
317
|
|
|
324
318
|
|
15
テキスト修正
test
CHANGED
|
@@ -350,7 +350,7 @@
|
|
|
350
350
|
|
|
351
351
|
|
|
352
352
|
|
|
353
|
-
HTML要素の属性である `onclick` や `onchange` はイベント属性と呼ばれますが、MDNのイベント属性の説明には、以下のように書かれています。
|
|
353
|
+
HTML要素の属性である `onclick` や `onchange` はイベント属性と呼ばれますが、MDNのイベント属性の説明には、以下のように、使用を非推奨とする旨が書かれています。
|
|
354
354
|
|
|
355
355
|
|
|
356
356
|
|
14
テキスト修正
test
CHANGED
|
@@ -152,7 +152,7 @@
|
|
|
152
152
|
|
|
153
153
|
|
|
154
154
|
|
|
155
|
-
上記の回答に挙げたjavascriptのコードは、テーブルの行が増えても、何らかの追加、修正をする必要がないものになっています。以下はテーブルの行を７行に
|
|
155
|
+
上記の回答に挙げたjavascriptのコードは、テーブルの行が増えても、何らかの追加、修正をする必要がないものになっています。以下は、上記のHTMLのテーブルの行を単に７行にしただけで、javascriptのコードには何も手を加えていないです。
|
|
156
156
|
|
|
157
157
|
|
|
158
158
|
|
13
テキスト修正
test
CHANGED
|
@@ -184,7 +184,7 @@
|
|
|
184
184
|
|
|
185
185
|
```
|
|
186
186
|
|
|
187
|
-
のように、`input`要素の`onclick`属性にスクリプトを直接書くという
|
|
187
|
+
のように、`input`要素の`onclick`属性にスクリプトを直接書くという手法をそのまま使いつつ、かつ、コードをまとめる例を挙げておきます。
|
|
188
188
|
|
|
189
189
|
|
|
190
190
|
|
12
テキスト修正
test
CHANGED
|
@@ -350,7 +350,7 @@
|
|
|
350
350
|
|
|
351
351
|
|
|
352
352
|
|
|
353
|
-
HTML要素の属性である `onclick` や `onchange` は
|
|
353
|
+
HTML要素の属性である `onclick` や `onchange` はイベント属性と呼ばれますが、MDNのイベント属性の説明には、以下のように書かれています。
|
|
354
354
|
|
|
355
355
|
|
|
356
356
|
|
11
テキスト修正
test
CHANGED
|
@@ -315,3 +315,53 @@
|
|
|
315
315
|
```
|
|
316
316
|
|
|
317
317
|
- **動作確認用CodePen: ** [https://codepen.io/jun68ykt/pen/OJJjYdG?editors=1010](https://codepen.io/jun68ykt/pen/OJJjYdG?editors=1010)
|
|
318
|
+
|
|
319
|
+
|
|
320
|
+
|
|
321
|
+
### 追記3
|
|
322
|
+
|
|
323
|
+
|
|
324
|
+
|
|
325
|
+
ご質問にある、下記のHTML
|
|
326
|
+
|
|
327
|
+
```html
|
|
328
|
+
|
|
329
|
+
<input type="button" value="+" onClick="count_up_btn1()">
|
|
330
|
+
|
|
331
|
+
```
|
|
332
|
+
|
|
333
|
+
のように、HTML要素の`onclick`などの属性に直接スクリプトを書くことで、イベントを処理させる書き方に対して、この回答の冒頭に書いたコードの下記の部分
|
|
334
|
+
|
|
335
|
+
```javascript
|
|
336
|
+
|
|
337
|
+
btn.addEventListener('click', () => {
|
|
338
|
+
|
|
339
|
+
・・・
|
|
340
|
+
|
|
341
|
+
});
|
|
342
|
+
|
|
343
|
+
```
|
|
344
|
+
|
|
345
|
+
のように、プログラムの中でイベントハンドラを設定する書き方は、**控えめなJavaScript**(Unobtrusive JavaScript)と呼ばれることがあります。
|
|
346
|
+
|
|
347
|
+
|
|
348
|
+
|
|
349
|
+
- **参考：** wikipedia [控えめなJavaScript#動作とマークアップの分離](https://ja.wikipedia.org/wiki/%E6%8E%A7%E3%81%88%E3%82%81%E3%81%AAJavaScript#%E5%8B%95%E4%BD%9C%E3%81%A8%E3%83%9E%E3%83%BC%E3%82%AF%E3%82%A2%E3%83%83%E3%83%97%E3%81%AE%E5%88%86%E9%9B%A2)
|
|
350
|
+
|
|
351
|
+
|
|
352
|
+
|
|
353
|
+
HTML要素の属性である `onclick` や `onchange` はEvent 属性と呼ばれますが、MDNのEvent属性の説明には、以下のように書かれています。
|
|
354
|
+
|
|
355
|
+
|
|
356
|
+
|
|
357
|
+
> 警告: これらの属性を使うことは避けるべきです。これは HTML を巨大化し可読性を下げます。情報と振る舞いの関心事が正しく分離されておらず、発見が困難なバグを生み出します。その上に、Event 属性の使い方はほとんどの場合、Window オブジェクト上のグローバル関数にスクリプトを晒す原因になります。これはグローバルの名前空間を汚染します。
|
|
358
|
+
|
|
359
|
+
|
|
360
|
+
|
|
361
|
+
> これらの属性が魅力的で簡単に使うことができたとしても、これを使うのは避けるべきです。代わりに、イベントリスナーを追加する為には EventTarget.addEventListener() 関数を使ってください。
|
|
362
|
+
|
|
363
|
+
|
|
364
|
+
|
|
365
|
+
|
|
366
|
+
|
|
367
|
+
- 以上、 MDN [Event 属性](https://developer.mozilla.org/ja/docs/Web/Guide/HTML/Event_attributes) より引用
|
10
テキスト修正
test
CHANGED
|
@@ -148,7 +148,7 @@
|
|
|
148
148
|
|
|
149
149
|
|
|
150
150
|
|
|
151
|
-
### 追記
|
|
151
|
+
### 追記1
|
|
152
152
|
|
|
153
153
|
|
|
154
154
|
|
|
@@ -196,7 +196,7 @@
|
|
|
196
196
|
|
|
197
197
|
```
|
|
198
198
|
|
|
199
|
-
のようにして、クリックされたボタンを引数にとる関数`count(button)` を作っておいて、どのボタンがクリックされてもこれに処理させるようにします。以下、その一例です。
|
|
199
|
+
のようにして、クリックされたボタンを引数にとる関数`count(button)` を作っておいて、どのボタンがクリックされてもこれに処理させるようにします。以下、その一例です。（先の追記1に書いた意図と同じく、`one`, `two`, `three` を使わないようにもしています。）
|
|
200
200
|
|
|
201
201
|
|
|
202
202
|
|
9
テキスト修正
test
CHANGED
|
@@ -184,7 +184,7 @@
|
|
|
184
184
|
|
|
185
185
|
```
|
|
186
186
|
|
|
187
|
-
のように、`input`要素の`onclick`属性にスクリプトを直接書くという方法はそのまま使って、かつコードをまとめる
|
|
187
|
+
のように、`input`要素の`onclick`属性にスクリプトを直接書くという方法はそのまま使って、かつコードをまとめる例を挙げておきます。
|
|
188
188
|
|
|
189
189
|
|
|
190
190
|
|
8
テキスト修正
test
CHANGED
|
@@ -184,7 +184,11 @@
|
|
|
184
184
|
|
|
185
185
|
```
|
|
186
186
|
|
|
187
|
-
のように、`input`要素の`onclick`属性にスクリプトを直接書くという方法はそのまま使って、かつコードをまとめるコード例を挙げておきます。
|
|
187
|
+
のように、`input`要素の`onclick`属性にスクリプトを直接書くという方法はそのまま使って、かつコードをまとめるコード例を挙げておきます。
|
|
188
|
+
|
|
189
|
+
|
|
190
|
+
|
|
191
|
+
修正方法としては、上記を
|
|
188
192
|
|
|
189
193
|
```html
|
|
190
194
|
|
|
@@ -192,7 +196,7 @@
|
|
|
192
196
|
|
|
193
197
|
```
|
|
194
198
|
|
|
195
|
-
のようにして、クリックされたボタンを引数にとる関数`count(button)` を作っておいて、どのボタンがクリックされてもこれに処理させる
|
|
199
|
+
のようにして、クリックされたボタンを引数にとる関数`count(button)` を作っておいて、どのボタンがクリックされてもこれに処理させるようにします。以下、その一例です。
|
|
196
200
|
|
|
197
201
|
|
|
198
202
|
|
|
@@ -278,6 +282,14 @@
|
|
|
278
282
|
|
|
279
283
|
```
|
|
280
284
|
|
|
285
|
+
|
|
286
|
+
|
|
287
|
+
以下は、 上記のボタンクリック時に使用する関数`count(button)` の一例です。
|
|
288
|
+
|
|
289
|
+
|
|
290
|
+
|
|
291
|
+
|
|
292
|
+
|
|
281
293
|
```javascript
|
|
282
294
|
|
|
283
295
|
function count(button) {
|
7
テキスト修正
test
CHANGED
|
@@ -184,7 +184,7 @@
|
|
|
184
184
|
|
|
185
185
|
```
|
|
186
186
|
|
|
187
|
-
のように、`input`要素の`onclick`属性にスクリプトを直接書くという方法はそのまま使って、かつコードをまとめて、テーブルの行が増えてもjavascriptのコードには変更追加が必要のないものにする(すなわち、`one`, `two`, `three` を使わないようにする）には、上記を
|
|
187
|
+
のように、`input`要素の`onclick`属性にスクリプトを直接書くという方法はそのまま使って、かつコードをまとめるコード例を挙げておきます。この場合に、テーブルの行が増えてもjavascriptのコードには変更追加が必要のないものにする(すなわち、`one`, `two`, `three` を使わないようにする）には、上記を
|
|
188
188
|
|
|
189
189
|
```html
|
|
190
190
|
|
6
テキスト修正
test
CHANGED
|
@@ -192,7 +192,7 @@
|
|
|
192
192
|
|
|
193
193
|
```
|
|
194
194
|
|
|
195
|
-
のようにして、クリックされたボタンを引数にとる関数`count(button)` を作っておいて、これに処理させるというコードになるかと思います。以下、その一例です。
|
|
195
|
+
のようにして、クリックされたボタンを引数にとる関数`count(button)` を作っておいて、どのボタンがクリックされてもこれに処理させるというコードになるかと思います。以下、その一例です。
|
|
196
196
|
|
|
197
197
|
|
|
198
198
|
|
5
テキスト修正
test
CHANGED
|
@@ -169,3 +169,137 @@
|
|
|
169
169
|
|
|
170
170
|
|
|
171
171
|
が、リファクタリングしていく際の指針のひとつになります。
|
|
172
|
+
|
|
173
|
+
|
|
174
|
+
|
|
175
|
+
### 追記2
|
|
176
|
+
|
|
177
|
+
|
|
178
|
+
|
|
179
|
+
hj_zebraさんのご質問にある元のコードで、HTMLの下記の部分
|
|
180
|
+
|
|
181
|
+
```html
|
|
182
|
+
|
|
183
|
+
<input type="button" value="+" onClick="count_up_btn1()">
|
|
184
|
+
|
|
185
|
+
```
|
|
186
|
+
|
|
187
|
+
のように、`input`要素の`onclick`属性にスクリプトを直接書くという方法はそのまま使って、かつコードをまとめて、テーブルの行が増えてもjavascriptのコードには変更追加が必要のないものにする(すなわち、`one`, `two`, `three` を使わないようにする）には、上記を
|
|
188
|
+
|
|
189
|
+
```html
|
|
190
|
+
|
|
191
|
+
<input type="button" value="+" onclick="count(this)">
|
|
192
|
+
|
|
193
|
+
```
|
|
194
|
+
|
|
195
|
+
のようにして、クリックされたボタンを引数にとる関数`count(button)` を作っておいて、これに処理させるというコードになるかと思います。以下、その一例です。
|
|
196
|
+
|
|
197
|
+
|
|
198
|
+
|
|
199
|
+
```html
|
|
200
|
+
|
|
201
|
+
<table border="1"cellspacing="0" cellpadding="5" bordercolor="black">
|
|
202
|
+
|
|
203
|
+
<tr>
|
|
204
|
+
|
|
205
|
+
<th>種類</th>
|
|
206
|
+
|
|
207
|
+
<th>ﾌﾟﾗｽ</th>
|
|
208
|
+
|
|
209
|
+
<th>ﾏｲﾅｽ</th>
|
|
210
|
+
|
|
211
|
+
<th>合計<br>回数</th>
|
|
212
|
+
|
|
213
|
+
<th>残り<br>回数</th>
|
|
214
|
+
|
|
215
|
+
</tr>
|
|
216
|
+
|
|
217
|
+
<tr>
|
|
218
|
+
|
|
219
|
+
<td align="center">1</td>
|
|
220
|
+
|
|
221
|
+
<td align="center"><input type="button" value="+" onclick="count(this)" /></td>
|
|
222
|
+
|
|
223
|
+
<td align="center"><input type="button" value="-" onclick="count(this)" /></td>
|
|
224
|
+
|
|
225
|
+
<td align="center"><span>0</span>回</td>
|
|
226
|
+
|
|
227
|
+
<td></td>
|
|
228
|
+
|
|
229
|
+
</tr>
|
|
230
|
+
|
|
231
|
+
<tr>
|
|
232
|
+
|
|
233
|
+
<td align="center">2</td>
|
|
234
|
+
|
|
235
|
+
<td align="center"><input type="button" value="+" onclick="count(this)" /></td>
|
|
236
|
+
|
|
237
|
+
<td align="center"><input type="button" value="-" onclick="count(this)" /></td>
|
|
238
|
+
|
|
239
|
+
<td align="center"><span>0</span>回</td>
|
|
240
|
+
|
|
241
|
+
<td></td>
|
|
242
|
+
|
|
243
|
+
</tr>
|
|
244
|
+
|
|
245
|
+
<tr>
|
|
246
|
+
|
|
247
|
+
<td align="center">3</td>
|
|
248
|
+
|
|
249
|
+
<td align="center"><input type="button" value="+" onclick="count(this)" /></td>
|
|
250
|
+
|
|
251
|
+
<td align="center"><input type="button" value="-" onclick="count(this)" /></td>
|
|
252
|
+
|
|
253
|
+
<td align="center"><span>0</span>回</td>
|
|
254
|
+
|
|
255
|
+
<td></td>
|
|
256
|
+
|
|
257
|
+
</tr>
|
|
258
|
+
|
|
259
|
+
</table>
|
|
260
|
+
|
|
261
|
+
<br>
|
|
262
|
+
|
|
263
|
+
<table border="1"cellspacing="0" cellpadding="5" bordercolor="black">
|
|
264
|
+
|
|
265
|
+
<tr>
|
|
266
|
+
|
|
267
|
+
<th>合計<br>回数</th>
|
|
268
|
+
|
|
269
|
+
</tr>
|
|
270
|
+
|
|
271
|
+
<tr>
|
|
272
|
+
|
|
273
|
+
<td align=center><span id="total">0</span>回</td>
|
|
274
|
+
|
|
275
|
+
</tr>
|
|
276
|
+
|
|
277
|
+
</table>
|
|
278
|
+
|
|
279
|
+
```
|
|
280
|
+
|
|
281
|
+
```javascript
|
|
282
|
+
|
|
283
|
+
function count(button) {
|
|
284
|
+
|
|
285
|
+
const diff = +`${button.value}1`;
|
|
286
|
+
|
|
287
|
+
const spans = [
|
|
288
|
+
|
|
289
|
+
document.getElementById('total'),
|
|
290
|
+
|
|
291
|
+
button.closest('tr').querySelector('span')
|
|
292
|
+
|
|
293
|
+
];
|
|
294
|
+
|
|
295
|
+
spans.forEach(span => {
|
|
296
|
+
|
|
297
|
+
span.textContent = +span.textContent + diff;
|
|
298
|
+
|
|
299
|
+
});
|
|
300
|
+
|
|
301
|
+
}
|
|
302
|
+
|
|
303
|
+
```
|
|
304
|
+
|
|
305
|
+
- **動作確認用CodePen: ** [https://codepen.io/jun68ykt/pen/OJJjYdG?editors=1010](https://codepen.io/jun68ykt/pen/OJJjYdG?editors=1010)
|
4
テキスト修正
test
CHANGED
|
@@ -152,7 +152,7 @@
|
|
|
152
152
|
|
|
153
153
|
|
|
154
154
|
|
|
155
|
-
上記の
|
|
155
|
+
上記の回答に挙げたjavascriptのコードは、テーブルの行が増えても、何らかの追加、修正をする必要がないものになっています。以下はテーブルの行を７行に増やしましたが、javascriptのコードには何も手を加えていないです。
|
|
156
156
|
|
|
157
157
|
|
|
158
158
|
|
|
@@ -160,7 +160,7 @@
|
|
|
160
160
|
|
|
161
161
|
|
|
162
162
|
|
|
163
|
-
ご質問に挙げられている元のコードを、テーブルの行が何行になっても追加、修正する必要がないものにするには、
|
|
163
|
+
ご質問に挙げられている元のjavascriptのコードを、テーブルの行が何行になっても追加、修正する必要がないものにするには、
|
|
164
164
|
|
|
165
165
|
|
|
166
166
|
|
|
@@ -168,4 +168,4 @@
|
|
|
168
168
|
|
|
169
169
|
|
|
170
170
|
|
|
171
|
-
が、リファクタリングの
|
|
171
|
+
が、リファクタリングしていく際の指針のひとつになります。
|
3
テキスト修正
test
CHANGED
|
@@ -145,3 +145,27 @@
|
|
|
145
145
|
|
|
146
146
|
|
|
147
147
|
参考になれば幸いです。
|
|
148
|
+
|
|
149
|
+
|
|
150
|
+
|
|
151
|
+
### 追記
|
|
152
|
+
|
|
153
|
+
|
|
154
|
+
|
|
155
|
+
上記のJavascriptのコードは、テーブルの行が増えても、何らかの追加、修正をする必要がないものになっています。以下はテーブルの行を７行に増やしましたが、JavaScriptのコードのほうは、何も手を加えていないです。
|
|
156
|
+
|
|
157
|
+
|
|
158
|
+
|
|
159
|
+
- **テーブルの行を７行にした：** [https://codepen.io/jun68ykt/pen/BaadEmw?editors=1010](https://codepen.io/jun68ykt/pen/BaadEmw?editors=1010)
|
|
160
|
+
|
|
161
|
+
|
|
162
|
+
|
|
163
|
+
ご質問に挙げられている元のコードを、テーブルの行が何行になっても追加、修正する必要がないものにするには、
|
|
164
|
+
|
|
165
|
+
|
|
166
|
+
|
|
167
|
+
- `one`, `two`, `three`, ... という id や変数を使わないようにすること
|
|
168
|
+
|
|
169
|
+
|
|
170
|
+
|
|
171
|
+
が、リファクタリングの目標のひとつになります。
|
2
テキスト修正
test
CHANGED
|
@@ -98,13 +98,23 @@
|
|
|
98
98
|
|
|
99
99
|
const totalSpan = document.getElementById('total');
|
|
100
100
|
|
|
101
|
-
|
|
101
|
+
const rows = [...document.querySelectorAll('table:first-of-type tr')];
|
|
102
102
|
|
|
103
|
+
|
|
104
|
+
|
|
103
|
-
|
|
105
|
+
rows.forEach((row, rowIndex) => {
|
|
106
|
+
|
|
107
|
+
if (rowIndex === 0) return;
|
|
108
|
+
|
|
109
|
+
|
|
104
110
|
|
|
105
111
|
const counterSpan = row.querySelector('span');
|
|
106
112
|
|
|
107
|
-
[...row.querySelectorAll('input')]
|
|
113
|
+
const buttons = [...row.querySelectorAll('input')];
|
|
114
|
+
|
|
115
|
+
|
|
116
|
+
|
|
117
|
+
buttons.forEach((btn, btnIndex) => {
|
|
108
118
|
|
|
109
119
|
btn.addEventListener('click', () => {
|
|
110
120
|
|
|
@@ -116,9 +126,9 @@
|
|
|
116
126
|
|
|
117
127
|
});
|
|
118
128
|
|
|
119
|
-
});
|
|
129
|
+
});
|
|
120
130
|
|
|
121
|
-
});
|
|
131
|
+
});
|
|
122
132
|
|
|
123
133
|
|
|
124
134
|
|
1
テキスト修正
test
CHANGED
|
@@ -106,7 +106,7 @@
|
|
|
106
106
|
|
|
107
107
|
[...row.querySelectorAll('input')].forEach((btn, btnIndex) => {
|
|
108
108
|
|
|
109
|
-
btn.addEventListener('click',
|
|
109
|
+
btn.addEventListener('click', () => {
|
|
110
110
|
|
|
111
111
|
[counterSpan, totalSpan].forEach(span => {
|
|
112
112
|
|