teratail
回答率
85.47%
質問するログイン新規登録
トップに関する質問一つのメソッドを呼んだときと複数のメソッドを呼んだときの違いがわからない

編集履歴

質問編集履歴

1

質問内容の改変

2020/02/01 06:45

投稿

退会済みユーザー
test CHANGED
@@ -1 +1 @@
1
- setStateできない
1
+ 一つのメソッドを呼んだときと複数のメソッドを呼んだときの違いがわからない
test CHANGED
@@ -42,28 +42,76 @@
42
42
 
43
43
 
44
44
 
45
+ // defaultBoard[3][3] = BLACK_PIECE
46
+
47
+ // defaultBoard[4][3] = WHITE_PIECE
48
+
49
+ // defaultBoard[3][4] = WHITE_PIECE
50
+
51
+ // defaultBoard[4][4] = BLACK_PIECE
52
+
53
+
54
+
45
- // あえて検証のために石の置き方を変えてます。
55
+ // 検証のために石の置き方を変えてます。
46
-
56
+
47
- defaultBoard[0][0] = BLACK_PIECE
57
+ defaultBoard[3][0] = BLACK_PIECE
58
+
48
-
59
+ defaultBoard[3][1] = WHITE_PIECE
60
+
61
+ defaultBoard[3][2] = WHITE_PIECE
62
+
63
+ defaultBoard[3][3] = WHITE_PIECE
64
+
65
+ defaultBoard[3][5] = WHITE_PIECE
66
+
67
+ defaultBoard[3][6] = WHITE_PIECE
68
+
69
+ defaultBoard[3][7] = BLACK_PIECE
70
+
71
+ defaultBoard[3][7] = BLACK_PIECE
72
+
73
+ defaultBoard[0][4] = BLACK_PIECE
74
+
49
- defaultBoard[1][0] = WHITE_PIECE
75
+ defaultBoard[1][4] = WHITE_PIECE
50
-
76
+
51
- defaultBoard[2][0] = WHITE_PIECE
77
+ defaultBoard[2][4] = WHITE_PIECE
52
-
53
- defaultBoard[3][0] = WHITE_PIECE
78
+
54
-
55
- defaultBoard[4][0] = WHITE_PIECE
79
+ defaultBoard[4][4] = WHITE_PIECE
80
+
56
-
81
+ defaultBoard[5][4] = WHITE_PIECE
57
-
58
-
82
+
59
- defaultBoard[6][0] = WHITE_PIECE
83
+ defaultBoard[6][4] = WHITE_PIECE
84
+
85
+ defaultBoard[7][4] = WHITE_PIECE
86
+
87
+ defaultBoard[2][5] = WHITE_PIECE
88
+
89
+ defaultBoard[1][6] = WHITE_PIECE
90
+
91
+ defaultBoard[0][7] = BLACK_PIECE
92
+
93
+ defaultBoard[4][5] = WHITE_PIECE
94
+
95
+ defaultBoard[5][6] = WHITE_PIECE
96
+
97
+ defaultBoard[6][7] = BLACK_PIECE
98
+
99
+ defaultBoard[2][3] = WHITE_PIECE
100
+
101
+ defaultBoard[1][2] = WHITE_PIECE
102
+
103
+ defaultBoard[0][1] = BLACK_PIECE
104
+
105
+ defaultBoard[4][3] = WHITE_PIECE
106
+
107
+ defaultBoard[5][2] = WHITE_PIECE
108
+
109
+ defaultBoard[6][1] = WHITE_PIECE
60
110
 
61
111
  defaultBoard[7][0] = WHITE_PIECE
62
112
 
63
113
 
64
114
 
65
-
66
-
67
115
  const Board = () => {
68
116
 
69
117
  const [squares, setSquares] = useState(defaultBoard)
@@ -74,16 +122,58 @@
74
122
 
75
123
 
76
124
 
125
+ const boardInit = () => {
126
+
127
+ if (!window.confirm('リセットしてもよろしいですか？')) {
128
+
129
+ return false
130
+
131
+ }
132
+
133
+
134
+
135
+ for (let x = 0; x < 8; x++) {
136
+
137
+ for (let y = 0; y < 8; y++) {
138
+
139
+ let newSquares = squares.concat()
140
+
141
+ newSquares[x][y] = null
142
+
143
+ setSquares(newSquares)
144
+
145
+ }
146
+
147
+ }
148
+
149
+ let newSquares = squares.concat()
150
+
151
+ newSquares[3][3] = BLACK_PIECE
152
+
153
+ newSquares[4][3] = WHITE_PIECE
154
+
155
+ newSquares[3][4] = WHITE_PIECE
156
+
157
+ newSquares[4][4] = BLACK_PIECE
158
+
159
+ setCurrentPiece(BLACK_PIECE)
160
+
161
+ setSquares(newSquares)
162
+
163
+ }
164
+
165
+
166
+
77
167
  const reversePiece = (currentX, currentY, x, y, prevSquares) => {
78
168
 
79
169
  const nextPiece = currentPiece === BLACK_PIECE ? WHITE_PIECE : BLACK_PIECE
80
170
 
171
+ const newSquares = squares.concat()
172
+
81
173
  let nextYIndex = currentY + y
82
174
 
83
175
  let nextXIndex = currentX + x
84
176
 
85
- let newSquares = squares.concat()
86
-
87
177
 
88
178
 
89
179
  if (newSquares[nextYIndex][nextXIndex] === nextPiece) {
@@ -96,7 +186,7 @@
96
186
 
97
187
  newSquares[currentY][currentX] = currentPiece
98
188
 
99
- setSquares(newSquares)
189
+ setSquares([...newSquares])
100
190
 
101
191
  setCurrentPiece(nextPiece)
102
192
 
@@ -112,9 +202,9 @@
112
202
 
113
203
  console.log('次が何もおいてないから元に戻したい')
114
204
 
115
- console.log(prevSquares)
205
+ console.log([...prevSquares])
116
-
206
+
117
- setSquares(prevSquares)
207
+ setSquares([...prevSquares])
118
208
 
119
209
  break
120
210
 
@@ -122,8 +212,6 @@
122
212
 
123
213
 
124
214
 
125
- newSquares[nextYIndex][nextXIndex] = currentPiece
126
-
127
215
  nextYIndex = nextYIndex + y
128
216
 
129
217
  nextXIndex = nextXIndex + x
@@ -136,9 +224,9 @@
136
224
 
137
225
  console.log('挟み撃ちできる自分のコマがないから元に戻したい')
138
226
 
139
- console.log(prevSquares)
227
+ console.log([...prevSquares])
140
-
228
+
141
- setSquares(prevSquares)
229
+ setSquares([...prevSquares])
142
230
 
143
231
  break
144
232
 
@@ -162,8 +250,32 @@
162
250
 
163
251
  prevSquares = JSON.parse(JSON.stringify(squares));
164
252
 
253
+ reversePiece(x, y, 1, -1, prevSquares) // 右上
254
+
255
+ prevSquares = JSON.parse(JSON.stringify(squares));
256
+
257
+ reversePiece(x, y, 1, 0, prevSquares) // 右
258
+
259
+ prevSquares = JSON.parse(JSON.stringify(squares));
260
+
261
+ reversePiece(x, y, 1, 1, prevSquares) // 右下
262
+
263
+ prevSquares = JSON.parse(JSON.stringify(squares));
264
+
165
265
  reversePiece(x, y, 0, 1, prevSquares) // 下
166
266
 
267
+ prevSquares = JSON.parse(JSON.stringify(squares));
268
+
269
+ reversePiece(x, y, -1, 1, prevSquares) // 左下
270
+
271
+ prevSquares = JSON.parse(JSON.stringify(squares));
272
+
273
+ reversePiece(x, y, -1, 0, prevSquares) // 左
274
+
275
+ prevSquares = JSON.parse(JSON.stringify(squares));
276
+
277
+ reversePiece(x, y, -1, -1, prevSquares) // 左上
278
+
167
279
  }
168
280
 
169
281
  }
@@ -204,53 +316,63 @@
204
316
 
205
317
  <>
206
318
 
319
+ <button
320
+
321
+ onClick={ boardInit }
322
+
323
+ >
324
+
325
+ 最初からやり直す
326
+
327
+ </button>
328
+
207
329
  <Status>{ status }</Status>
208
330
 
209
331
  <BoardRow>
210
332
 
211
- { renderSquare(defaultBoard, 0) }
333
+ { renderSquare(squares, 0) }
212
-
334
+
213
- </BoardRow>
335
+ </BoardRow>
214
-
336
+
215
- <BoardRow>
337
+ <BoardRow>
216
-
338
+
217
- { renderSquare(defaultBoard, 1) }
339
+ { renderSquare(squares, 1) }
218
-
340
+
219
- </BoardRow>
341
+ </BoardRow>
220
-
342
+
221
- <BoardRow>
343
+ <BoardRow>
222
-
344
+
223
- { renderSquare(defaultBoard, 2) }
345
+ { renderSquare(squares, 2) }
224
-
346
+
225
- </BoardRow>
347
+ </BoardRow>
226
-
348
+
227
- <BoardRow>
349
+ <BoardRow>
228
-
350
+
229
- { renderSquare(defaultBoard, 3) }
351
+ { renderSquare(squares, 3) }
230
-
352
+
231
- </BoardRow>
353
+ </BoardRow>
232
-
354
+
233
- <BoardRow>
355
+ <BoardRow>
234
-
356
+
235
- { renderSquare(defaultBoard, 4) }
357
+ { renderSquare(squares, 4) }
236
-
358
+
237
- </BoardRow>
359
+ </BoardRow>
238
-
360
+
239
- <BoardRow>
361
+ <BoardRow>
240
-
362
+
241
- { renderSquare(defaultBoard, 5) }
363
+ { renderSquare(squares, 5) }
242
-
364
+
243
- </BoardRow>
365
+ </BoardRow>
244
-
366
+
245
- <BoardRow>
367
+ <BoardRow>
246
-
368
+
247
- { renderSquare(defaultBoard, 6) }
369
+ { renderSquare(squares, 6) }
248
-
370
+
249
- </BoardRow>
371
+ </BoardRow>
250
-
372
+
251
- <BoardRow>
373
+ <BoardRow>
252
-
374
+
253
- { renderSquare(defaultBoard, 7) }
375
+ { renderSquare(squares, 7) }
254
376
 
255
377
  </BoardRow>
256
378
 
@@ -264,6 +386,8 @@
264
386
 
265
387
  export default Board;
266
388
 
389
+
390
+
267
391
  ```
268
392
 
269
393
 
@@ -342,9 +466,9 @@
342
466
 
343
467
 
344
468
 
345
- しかし以下の盤面の時、上下のコマを裏返そうとした時に
469
+ しかし以下の盤面の時、コマを裏返そうとした時に
346
-
470
+
347
- ![イメージ説明](460843f5b948b66cb9927ae0151b5f00.png)
471
+ ![イメージ説明](498961ac5cc54f19e2ee5accd5ba6c23.png)
348
472
 
349
473
 
350
474
 
@@ -360,11 +484,35 @@
360
484
 
361
485
  let prevSquares = JSON.parse(JSON.stringify(squares));
362
486
 
363
- reversePiece(x, y, 0, -1, prevSquares) // 上
487
+ reversePiece(x, y, 0, -1, prevSquares) // 上
364
-
488
+
365
- prevSquares = JSON.parse(JSON.stringify(squares));
489
+ prevSquares = JSON.parse(JSON.stringify(squares));
490
+
366
-
491
+ reversePiece(x, y, 1, -1, prevSquares) // 右上
492
+
493
+ prevSquares = JSON.parse(JSON.stringify(squares));
494
+
495
+ reversePiece(x, y, 1, 0, prevSquares) // 右
496
+
497
+ prevSquares = JSON.parse(JSON.stringify(squares));
498
+
499
+ reversePiece(x, y, 1, 1, prevSquares) // 右下
500
+
501
+ prevSquares = JSON.parse(JSON.stringify(squares));
502
+
367
- reversePiece(x, y, 0, 1, prevSquares) // 下
503
+ reversePiece(x, y, 0, 1, prevSquares) // 下
504
+
505
+ prevSquares = JSON.parse(JSON.stringify(squares));
506
+
507
+ reversePiece(x, y, -1, 1, prevSquares) // 左下
508
+
509
+ prevSquares = JSON.parse(JSON.stringify(squares));
510
+
511
+ reversePiece(x, y, -1, 0, prevSquares) // 左
512
+
513
+ prevSquares = JSON.parse(JSON.stringify(squares));
514
+
515
+ reversePiece(x, y, -1, -1, prevSquares) // 左上
368
516
 
369
517
  }
370
518
 
@@ -372,14 +520,74 @@
372
520
 
373
521
  ```
374
522
 
375
-
376
-
377
- `console.log`で出力した結果(下記画像の下にあります)と異なる状態で保存されてしまい、全て裏返ってしまいます。
523
+ 全て裏返ってしまいます。
378
-
524
+
525
+
526
+
379
- ![イメージ説明](427da54eba6882748b12966b5ac3bc64.png)
527
+ ![イメージ説明](0badbc4d3a82a5df83c507ca31f77f16.png)
528
+
529
+
530
+
380
-
531
+ しかし全ての方向に対して裏返す処理を行う(複数のメソッドを呼んだ時)のではなく、
381
-
382
-
532
+
383
- その原因が掴めていません。
533
+ 単一方向で呼んだ場合(一つのメソッドだけを呼んだ時)だと
534
+
535
+
536
+
537
+ ```js
538
+
539
+ const handleClick = (x, y) => {
540
+
541
+ if (squares[y][x] === null) {
542
+
543
+ let prevSquares = JSON.parse(JSON.stringify(squares));
544
+
545
+ // reversePiece(x, y, 0, -1, prevSquares) // 上
546
+
547
+ // prevSquares = JSON.parse(JSON.stringify(squares));
548
+
549
+ // reversePiece(x, y, 1, -1, prevSquares) // 右上
550
+
551
+ // prevSquares = JSON.parse(JSON.stringify(squares));
552
+
553
+ // reversePiece(x, y, 1, 0, prevSquares) // 右
554
+
555
+ // prevSquares = JSON.parse(JSON.stringify(squares));
556
+
557
+ // reversePiece(x, y, 1, 1, prevSquares) // 右下
558
+
559
+ // prevSquares = JSON.parse(JSON.stringify(squares));
560
+
561
+ reversePiece(x, y, 0, 1, prevSquares) // 下 // ---> ここだけ呼ぶ
562
+
563
+ // prevSquares = JSON.parse(JSON.stringify(squares));
564
+
565
+ // reversePiece(x, y, -1, 1, prevSquares) // 左下
566
+
567
+ // prevSquares = JSON.parse(JSON.stringify(squares));
568
+
569
+ // reversePiece(x, y, -1, 0, prevSquares) // 左
570
+
571
+ // prevSquares = JSON.parse(JSON.stringify(squares));
572
+
573
+ // reversePiece(x, y, -1, -1, prevSquares) // 左上
574
+
575
+ }
576
+
577
+ }
578
+
579
+ ```
580
+
581
+
582
+
583
+ 何も裏返ることなく、前回の盤面の状態(prevSquares)を保ったままです。
584
+
585
+ この、「一つのメソッドを呼んだときと複数のメソッドを呼んだときの違い」がよくわかってません。
586
+
587
+ ![イメージ説明](ef999c41fcf8209253c57a1dea9d21ea.png)
588
+
589
+
590
+
591
+
384
592
 
385
593
  よろしくお願いします。