

学習のためReact＋Typescriptでブラウザで動くチェスのアプリを作成しています。駒を動かす動きは自分の想定通りに動くものができたのですが、キャスリングの動き（キングとルークという二つの駒を同時に動かす）を実装しようとした際に作ったメソッドが自分の想定通りに動きません。

[code]

    // --snip--
    export abstract class Piece {
      position: OptionalPosition;
      abstract readonly type: PieceKind;
      everMoved = false;
      constructor(readonly player: Player, file: File, rank: Rank) {
        this.position = new Position(file, rank);
      }
      equal(piece: Piece): boolean {
        return (
          !!piece.position &&
          !!this.position &&
          piece.type === this.type &&
          piece.position.equal(this.position)
        );
      }
    
      moveTo(position: Position, gameState: GameState) {
        this.position = position;
        if (!this.everMoved) {
          this.everMoved = true;
        }
      }
    
      removed() {
        this.position = null;
      }
    
      abstract canMoveTo(gameState: GameState): Position[];
    }
    
    export type GameState = Piece[];
    // --snip--
    
    export class King extends Piece {
      readonly type = "king";
      moveTo(position: Position, gameState: GameState) {    
        if (!this.everMoved && (position.file === "C" || position.file === "G")) {
          const rank = this.position?.rank;
          if (!rank) {
            return;
          }
          const rookPosition =
            position.file === "C"
              ? new Position("A", rank)
              : new Position("H", rank);
          const rook = gameState.find((piece) =>
            piece.position?.equal(rookPosition)
          );
          if (!rook) {
            return;
          }
          rook.position =
            position.file === "C"
              ? new Position("D", rank)
              : new Position("F", rank);
        }
        super.moveTo(position, gameState);
      }
    　// --snip--
    }
    // --snip--
    const useGame = () => {
      const [gameState, setGameState] = useState<GameState>(defaultGameState);
      // --snip--
      const handleClick = useCallback(
        (
          position: Position,
          gameState: GameState,
          player: Player,
          select: Select
        ) => {
         // --snip--
                  select.moveTo(position, gameState);
                  setGameState(gameState);
     
    // --snip--
    
[/code]

こちらのコードでキャスリングを実行すると、ルークのみ動きキングは動きません。`super.moveTo(position,
gameState);`このコードの下に`console.log(this.position)`を置くと、キングの想定通りの位置が表示されていますが、`console.log(gameState)`を置いてその中身を見ると想定通りの位置が表示されません。また

[code]

       rook.position =
            position.file === "C"
              ? new Position("D", rank)
              : new Position("F", rank);
    
[/code]

このコードをコメントアウトして実行すると、キングは想定通りの動きをします。以上のことから、配列やオブジェクトの操作に関して自分の認識不足があるのだと思いますが、何が問題なのか自力で解決出来ませんでした。問題点や解決策を教えていただけたらと思います。よろしくお願いします。

追記です。キャスリングは`class King`の`moveTo`のメソッドで実装しています。


CC BY-SA 4.0
2022-06-27T16:04:09.100
89634
2022-07-03T03:43:05.547
2022-06-27T16:22:40.540
53251
53251
question
javascript reactjs typescript class
Typescript で作成しているアプリのクラスのメソッドが自分の想定通りに動きません。


> 再現可能な短いサンプルコードを作成中に自己解決いたしました  
>  —— [コメント](https://ja.stackoverflow.com/questions/89634#comment101716_89634)
> より

とのことです。一般論として、[再現可能な短いサンプルコード](https://ja.stackoverflow.com/help/minimal-
reproducible-example) を作成する過程で問題の箇所が明確になり、デバッグが進みます。


CC BY-SA 4.0
2022-07-03T03:43:05.547
89732
2022-07-03T03:43:05.547
3054
89634
answer