回答編集履歴

3

クラス化

2018/09/24 14:19

投稿

think49
think49

スコア18156

test CHANGED
@@ -22,7 +22,7 @@
22
22
 
23
23
 
24
24
 
25
- ### コード
25
+ ### コードを短縮化
26
26
 
27
27
 
28
28
 
@@ -228,4 +228,182 @@
228
228
 
229
229
 
230
230
 
231
+ ### クラス化
232
+
233
+
234
+
235
+ コード短縮化が命題でしたので、短縮のみの視点で回答しましたが、私が提案したコードはループ回数を減らす為に複数の役割を同一コード上で実行しており、それがコードの可読性を下げている面はあると思います。
236
+
237
+ パフォーマンス寄りにチューニングすれば、「密結合」が進み、保守性にチューニングすれば、「疎結合」が進みます。
238
+
239
+ このバランスは人それぞれですが、「座標」の視点で暮らす化したコード例を書いておきます。
240
+
241
+
242
+
243
+ - [座標リストをクラス化する - JSFiddle](http://jsfiddle.net/srk03f2y/3/)
244
+
245
+ - [coordinate-list.js: Coordinate(座標を格納するクラス), CoordinateList(座標リストを格納するクラス)](https://gist.github.com/think49/2322863df508fa5fc1a77cb6e7efc55e)
246
+
247
+
248
+
249
+ 基本的な方針は、次の3つの処理を分化する事にあります。
250
+
251
+
252
+
253
+ - データを生成する (`new Coordinate`, `new CoordinateList`)
254
+
255
+ - データを使って演算する (`CoordinateList#getCenter()`)
256
+
257
+ - データを出力する (DOMノードの挿入)
258
+
259
+
260
+
261
+ 特にDOMノード系は処理を分けた方が良いと思います。後は、論理エラーをクラス内で排除します。
262
+
263
+
264
+
265
+ ```HTML
266
+
267
+ <form id="fm"></form>
268
+
269
+ <input type="button" id="atk" value="solve" form="fm" />
270
+
271
+
272
+
273
+ <script src="coordinate-list-0.1.0.js"></script>
274
+
275
+ <script>
276
+
277
+ 'use strcit';
278
+
279
+ (function () {
280
+
281
+ function generateDf (coordinateList) {
282
+
283
+ const df = document.createDocumentFragment();
284
+
285
+
286
+
287
+ for (let i = 0, entries = coordinateList.entries(), length = entries.length; i < length; i++) {
288
+
289
+ df.appendChild(document.createTextNode('p' + i + '('));
290
+
291
+
292
+
293
+ for (let [key, entry] of entries[i]) {
294
+
295
+ const input = document.createElement('input'), name = key + i, value = Math.random() * 1000;
296
+
297
+
298
+
299
+ input.type = 'number';
300
+
301
+ input.size = 10;
302
+
303
+ input.name = name;
304
+
305
+ input.placeholder = name;
306
+
307
+ input.value = value;
308
+
309
+
310
+
311
+ df.appendChild(input);
312
+
313
+ df.appendChild(document.createTextNode(','));
314
+
315
+ }
316
+
317
+
318
+
319
+ df.lastChild.data = ')';
320
+
321
+ df.appendChild(document.createElement('br'));
322
+
323
+ }
324
+
325
+
326
+
327
+ return df;
328
+
329
+ }
330
+
331
+
332
+
333
+ function createRandomCoordinateList (dimensionList, length) {
334
+
335
+ const coordinateList = [];
336
+
337
+
338
+
339
+ for (let i = 0; i < length; ++i) {
340
+
341
+ const coordinate = [];
342
+
343
+
344
+
345
+ for (let dimension of dimensionList) {
346
+
347
+ coordinate.push([dimension, Math.random() * 1000]);
348
+
349
+ }
350
+
351
+
352
+
353
+ coordinateList.push(coordinate);
354
+
355
+ }
356
+
357
+
358
+
359
+ return new CoordinateList(coordinateList);
360
+
361
+ }
362
+
363
+
364
+
365
+ function handleClick (event) {
366
+
367
+ const coordinateList = createRandomCoordinateList(this.dimensionList, this.length), form = event.target.form;
368
+
369
+
370
+
371
+ form.innerHTML = '';
372
+
373
+ form.appendChild(generateDf(coordinateList));
374
+
375
+
376
+
377
+ console.log(coordinateList.getCenter());
378
+
379
+ }
380
+
381
+
382
+
383
+ function main () {
384
+
385
+ this.document.getElementById('atk').addEventListener('click', {
386
+
387
+ handleEvent: handleClick,
388
+
389
+ length: 3,
390
+
391
+ dimensionList: ['x', 'y']
392
+
393
+ }, false);
394
+
395
+ }
396
+
397
+
398
+
399
+ main.call(this);
400
+
401
+ }.call(this));
402
+
403
+ </script>
404
+
405
+ ```
406
+
407
+
408
+
231
409
  Re: hectopascal1013 さん

2

input要素挿入時に合計値算出をする形に改善したコード

2018/09/24 14:19

投稿

think49
think49

スコア18156

test CHANGED
@@ -22,7 +22,13 @@
22
22
 
23
23
 
24
24
 
25
+ ### コード
26
+
27
+
28
+
25
- 関数と繰り返し構文は二者択一の関係にありますが、繰り返し構文で解決した方法がこちら
29
+ 関数と繰り返し構文は二者択一の関係にあります。
30
+
31
+ 下記は、繰り返し構文で解決したコードです。
26
32
 
27
33
 
28
34
 
@@ -136,4 +142,90 @@
136
142
 
137
143
 
138
144
 
145
+ ---
146
+
147
+
148
+
149
+ **(2018/09/24 10:35追記)**
150
+
151
+ input要素挿入時に合計値算出をする形に改善したコード。
152
+
153
+
154
+
155
+ - [for, for-of で同一コードをまとめる - JSFiddle](http://jsfiddle.net/L2otwpas/4/)
156
+
157
+
158
+
159
+ ```JavaScript
160
+
161
+ 'use strcit';
162
+
163
+ function atk (length) {
164
+
165
+ const results = new Map([['x', [0, 0]], ['y', [0, 0]]]), df = document.createDocumentFragment();
166
+
167
+
168
+
169
+ for (var i = 0; i < length; i++) {
170
+
171
+ df.appendChild(document.createTextNode('p' + i + '('));
172
+
173
+
174
+
175
+ for (let [key, entry] of results) {
176
+
177
+ const input = document.createElement('input'), name = key + i, value = Math.random() * 1000;
178
+
179
+
180
+
181
+ input.type = 'number';
182
+
183
+ input.size = 10;
184
+
185
+ input.name = name;
186
+
187
+ input.placeholder = name;
188
+
189
+ input.value = value;
190
+
191
+
192
+
193
+ df.appendChild(input);
194
+
195
+ df.appendChild(document.createTextNode(','));
196
+
197
+ entry[0] += value;
198
+
199
+ ++entry[1];
200
+
201
+ }
202
+
203
+
204
+
205
+ df.lastChild.data = ')';
206
+
207
+ df.appendChild(document.createElement('br'));
208
+
209
+ }
210
+
211
+
212
+
213
+ const form = document.getElementById('fm');
214
+
215
+
216
+
217
+ form.innerHTML = '';
218
+
219
+ form.appendChild(df);
220
+
221
+
222
+
223
+ alert([...results.values()].map(entry => entry[0] / entry[1]));
224
+
225
+ }
226
+
227
+ ```
228
+
229
+
230
+
139
231
  Re: hectopascal1013 さん

1

markdown

2018/09/24 01:35

投稿

think49
think49

スコア18156

test CHANGED
@@ -130,7 +130,7 @@
130
130
 
131
131
 
132
132
 
133
- `length` を可変に出来るのが配列,new Mapのメリットです。
133
+ **length を可変に出来る**のが配列,new Mapのメリットです。
134
134
 
135
135
  拡張性も視野に入れると、コードの幅が広がると思います。
136
136