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

編集履歴

質問編集履歴

1

質問内容の改変

2020/02/01 06:45

投稿

退会済みユーザー
title CHANGED
@@ -1,1 +1,1 @@
1
- setStateできない
1
+ 一つのメソッドを呼んだときと複数のメソッドを呼んだときの違いがわからない
body CHANGED
@@ -20,34 +20,79 @@
20
20
  }
21
21
  }
22
22
 
23
- // あえて検証のために石の置き方を変えてます。
24
- defaultBoard[0][0] = BLACK_PIECE
23
+ // defaultBoard[3][3] = BLACK_PIECE
25
- defaultBoard[1][0] = WHITE_PIECE
24
+ // defaultBoard[4][3] = WHITE_PIECE
26
- defaultBoard[2][0] = WHITE_PIECE
27
- defaultBoard[3][0] = WHITE_PIECE
25
+ // defaultBoard[3][4] = WHITE_PIECE
28
- defaultBoard[4][0] = WHITE_PIECE
26
+ // defaultBoard[4][4] = BLACK_PIECE
29
27
 
28
+ // 検証のために石の置き方を変えてます。
29
+ defaultBoard[3][0] = BLACK_PIECE
30
+ defaultBoard[3][1] = WHITE_PIECE
31
+ defaultBoard[3][2] = WHITE_PIECE
32
+ defaultBoard[3][3] = WHITE_PIECE
33
+ defaultBoard[3][5] = WHITE_PIECE
34
+ defaultBoard[3][6] = WHITE_PIECE
35
+ defaultBoard[3][7] = BLACK_PIECE
36
+ defaultBoard[3][7] = BLACK_PIECE
37
+ defaultBoard[0][4] = BLACK_PIECE
38
+ defaultBoard[1][4] = WHITE_PIECE
39
+ defaultBoard[2][4] = WHITE_PIECE
40
+ defaultBoard[4][4] = WHITE_PIECE
41
+ defaultBoard[5][4] = WHITE_PIECE
30
- defaultBoard[6][0] = WHITE_PIECE
42
+ defaultBoard[6][4] = WHITE_PIECE
43
+ defaultBoard[7][4] = WHITE_PIECE
44
+ defaultBoard[2][5] = WHITE_PIECE
45
+ defaultBoard[1][6] = WHITE_PIECE
46
+ defaultBoard[0][7] = BLACK_PIECE
47
+ defaultBoard[4][5] = WHITE_PIECE
48
+ defaultBoard[5][6] = WHITE_PIECE
49
+ defaultBoard[6][7] = BLACK_PIECE
50
+ defaultBoard[2][3] = WHITE_PIECE
51
+ defaultBoard[1][2] = WHITE_PIECE
52
+ defaultBoard[0][1] = BLACK_PIECE
53
+ defaultBoard[4][3] = WHITE_PIECE
54
+ defaultBoard[5][2] = WHITE_PIECE
55
+ defaultBoard[6][1] = WHITE_PIECE
31
56
  defaultBoard[7][0] = WHITE_PIECE
32
57
 
33
-
34
58
  const Board = () => {
35
59
  const [squares, setSquares] = useState(defaultBoard)
36
60
  const [currentPiece, setCurrentPiece] = useState(BLACK_PIECE)
37
61
  const status = 'Next player: ' + (currentPiece === BLACK_PIECE ? '黒の番' : '白の番');
38
62
 
63
+ const boardInit = () => {
64
+ if (!window.confirm('リセットしてもよろしいですか？')) {
65
+ return false
66
+ }
67
+
68
+ for (let x = 0; x < 8; x++) {
69
+ for (let y = 0; y < 8; y++) {
70
+ let newSquares = squares.concat()
71
+ newSquares[x][y] = null
72
+ setSquares(newSquares)
73
+ }
74
+ }
75
+ let newSquares = squares.concat()
76
+ newSquares[3][3] = BLACK_PIECE
77
+ newSquares[4][3] = WHITE_PIECE
78
+ newSquares[3][4] = WHITE_PIECE
79
+ newSquares[4][4] = BLACK_PIECE
80
+ setCurrentPiece(BLACK_PIECE)
81
+ setSquares(newSquares)
82
+ }
83
+
39
84
  const reversePiece = (currentX, currentY, x, y, prevSquares) => {
40
85
  const nextPiece = currentPiece === BLACK_PIECE ? WHITE_PIECE : BLACK_PIECE
86
+ const newSquares = squares.concat()
41
87
  let nextYIndex = currentY + y
42
88
  let nextXIndex = currentX + x
43
- let newSquares = squares.concat()
44
89
 
45
90
  if (newSquares[nextYIndex][nextXIndex] === nextPiece) {
46
91
  while(true) {
47
92
  if (newSquares[nextYIndex][nextXIndex] === currentPiece) {
48
93
  console.log('正常')
49
94
  newSquares[currentY][currentX] = currentPiece
50
- setSquares(newSquares)
95
+ setSquares([...newSquares])
51
96
  setCurrentPiece(nextPiece)
52
97
  break
53
98
  }
@@ -55,20 +100,19 @@
55
100
  if (newSquares[nextYIndex][nextXIndex] === null) {
56
101
  // breakする前に元の配列に戻す
57
102
  console.log('次が何もおいてないから元に戻したい')
58
- console.log(prevSquares)
103
+ console.log([...prevSquares])
59
- setSquares(prevSquares)
104
+ setSquares([...prevSquares])
60
105
  break
61
106
  }
62
107
 
63
- newSquares[nextYIndex][nextXIndex] = currentPiece
64
108
  nextYIndex = nextYIndex + y
65
109
  nextXIndex = nextXIndex + x
66
110
 
67
111
  if (nextYIndex > 7 || nextYIndex < 0 || nextXIndex > 7 || nextXIndex < 0) {
68
112
  // breakする前に元の配列に戻す
69
113
  console.log('挟み撃ちできる自分のコマがないから元に戻したい')
70
- console.log(prevSquares)
114
+ console.log([...prevSquares])
71
- setSquares(prevSquares)
115
+ setSquares([...prevSquares])
72
116
  break
73
117
  }
74
118
  }
@@ -80,7 +124,19 @@
80
124
  let prevSquares = JSON.parse(JSON.stringify(squares));
81
125
  reversePiece(x, y, 0, -1, prevSquares) // 上
82
126
  prevSquares = JSON.parse(JSON.stringify(squares));
127
+ reversePiece(x, y, 1, -1, prevSquares) // 右上
128
+ prevSquares = JSON.parse(JSON.stringify(squares));
129
+ reversePiece(x, y, 1, 0, prevSquares) // 右
130
+ prevSquares = JSON.parse(JSON.stringify(squares));
131
+ reversePiece(x, y, 1, 1, prevSquares) // 右下
132
+ prevSquares = JSON.parse(JSON.stringify(squares));
83
133
  reversePiece(x, y, 0, 1, prevSquares) // 下
134
+ prevSquares = JSON.parse(JSON.stringify(squares));
135
+ reversePiece(x, y, -1, 1, prevSquares) // 左下
136
+ prevSquares = JSON.parse(JSON.stringify(squares));
137
+ reversePiece(x, y, -1, 0, prevSquares) // 左
138
+ prevSquares = JSON.parse(JSON.stringify(squares));
139
+ reversePiece(x, y, -1, -1, prevSquares) // 左上
84
140
  }
85
141
  }
86
142
 
@@ -101,36 +157,42 @@
101
157
 
102
158
  return (
103
159
  <>
160
+ <button
161
+ onClick={ boardInit }
162
+ >
163
+ 最初からやり直す
164
+ </button>
104
165
  <Status>{ status }</Status>
105
166
  <BoardRow>
106
- { renderSquare(defaultBoard, 0) }
167
+ { renderSquare(squares, 0) }
107
168
  </BoardRow>
108
169
  <BoardRow>
109
- { renderSquare(defaultBoard, 1) }
170
+ { renderSquare(squares, 1) }
110
171
  </BoardRow>
111
172
  <BoardRow>
112
- { renderSquare(defaultBoard, 2) }
173
+ { renderSquare(squares, 2) }
113
174
  </BoardRow>
114
175
  <BoardRow>
115
- { renderSquare(defaultBoard, 3) }
176
+ { renderSquare(squares, 3) }
116
177
  </BoardRow>
117
178
  <BoardRow>
118
- { renderSquare(defaultBoard, 4) }
179
+ { renderSquare(squares, 4) }
119
180
  </BoardRow>
120
181
  <BoardRow>
121
- { renderSquare(defaultBoard, 5) }
182
+ { renderSquare(squares, 5) }
122
183
  </BoardRow>
123
184
  <BoardRow>
124
- { renderSquare(defaultBoard, 6) }
185
+ { renderSquare(squares, 6) }
125
186
  </BoardRow>
126
187
  <BoardRow>
127
- { renderSquare(defaultBoard, 7) }
188
+ { renderSquare(squares, 7) }
128
189
  </BoardRow>
129
190
  </>
130
191
  );
131
192
  }
132
193
 
133
194
  export default Board;
195
+
134
196
  ```
135
197
 
136
198
  ①挟み撃ちすることができる場合
@@ -170,8 +232,8 @@
170
232
  }
171
233
  ```
172
234
 
173
- しかし以下の盤面の時、上下のコマを裏返そうとした時に
235
+ しかし以下の盤面の時、コマを裏返そうとした時に
174
- ![イメージ説明](460843f5b948b66cb9927ae0151b5f00.png)
236
+ ![イメージ説明](498961ac5cc54f19e2ee5accd5ba6c23.png)
175
237
 
176
238
  ```js
177
239
  const handleClick = (x, y) => {
@@ -179,15 +241,57 @@
179
241
  // concatだと同じ配列と認識されてしまうので別のものとして処理するために前の盤面をコピーして
180
242
  // メソッドに渡しています。
181
243
  let prevSquares = JSON.parse(JSON.stringify(squares));
182
- reversePiece(x, y, 0, -1, prevSquares) // 上
244
+ reversePiece(x, y, 0, -1, prevSquares) // 上
183
- prevSquares = JSON.parse(JSON.stringify(squares));
245
+ prevSquares = JSON.parse(JSON.stringify(squares));
246
+ reversePiece(x, y, 1, -1, prevSquares) // 右上
247
+ prevSquares = JSON.parse(JSON.stringify(squares));
248
+ reversePiece(x, y, 1, 0, prevSquares) // 右
249
+ prevSquares = JSON.parse(JSON.stringify(squares));
250
+ reversePiece(x, y, 1, 1, prevSquares) // 右下
251
+ prevSquares = JSON.parse(JSON.stringify(squares));
184
- reversePiece(x, y, 0, 1, prevSquares) // 下
252
+ reversePiece(x, y, 0, 1, prevSquares) // 下
253
+ prevSquares = JSON.parse(JSON.stringify(squares));
254
+ reversePiece(x, y, -1, 1, prevSquares) // 左下
255
+ prevSquares = JSON.parse(JSON.stringify(squares));
256
+ reversePiece(x, y, -1, 0, prevSquares) // 左
257
+ prevSquares = JSON.parse(JSON.stringify(squares));
258
+ reversePiece(x, y, -1, -1, prevSquares) // 左上
185
259
  }
186
260
  }
187
261
  ```
262
+ 全て裏返ってしまいます。
188
263
 
189
- `console.log`で出力した結果(下記画像の下にあります)と異なる状態で保存されてしまい、全て裏返ってしまいます。
190
- ![イメージ説明](427da54eba6882748b12966b5ac3bc64.png)
264
+ ![イメージ説明](0badbc4d3a82a5df83c507ca31f77f16.png)
191
265
 
266
+ しかし全ての方向に対して裏返す処理を行う(複数のメソッドを呼んだ時)のではなく、
192
- その原因が掴めていません。
267
+ 単一方向で呼んだ場合(一つのメソッドだけを呼んだ時)だと
268
+
269
+ ```js
270
+ const handleClick = (x, y) => {
271
+ if (squares[y][x] === null) {
272
+ let prevSquares = JSON.parse(JSON.stringify(squares));
273
+ // reversePiece(x, y, 0, -1, prevSquares) // 上
274
+ // prevSquares = JSON.parse(JSON.stringify(squares));
275
+ // reversePiece(x, y, 1, -1, prevSquares) // 右上
276
+ // prevSquares = JSON.parse(JSON.stringify(squares));
277
+ // reversePiece(x, y, 1, 0, prevSquares) // 右
278
+ // prevSquares = JSON.parse(JSON.stringify(squares));
279
+ // reversePiece(x, y, 1, 1, prevSquares) // 右下
280
+ // prevSquares = JSON.parse(JSON.stringify(squares));
281
+ reversePiece(x, y, 0, 1, prevSquares) // 下 // ---> ここだけ呼ぶ
282
+ // prevSquares = JSON.parse(JSON.stringify(squares));
283
+ // reversePiece(x, y, -1, 1, prevSquares) // 左下
284
+ // prevSquares = JSON.parse(JSON.stringify(squares));
285
+ // reversePiece(x, y, -1, 0, prevSquares) // 左
286
+ // prevSquares = JSON.parse(JSON.stringify(squares));
287
+ // reversePiece(x, y, -1, -1, prevSquares) // 左上
288
+ }
289
+ }
290
+ ```
291
+
292
+ 何も裏返ることなく、前回の盤面の状態(prevSquares)を保ったままです。
293
+ この、「一つのメソッドを呼んだときと複数のメソッドを呼んだときの違い」がよくわかってません。
294
+ ![イメージ説明](ef999c41fcf8209253c57a1dea9d21ea.png)
295
+
296
+
193
297
  よろしくお願いします。