forEach()文において、配列の要素が意図した通り展開されません。

Question

実現したいこと

forEach()文が上手く作動しない原因を突き止めたい。

発生している問題・分からないこと

「line[0] is undefined」の原因を探っている過程で、以下の問題点が判明しました。
行番号103のforEach()文において、配列directionsからコールバック関数には、
1つ目の要素{ x: -1, y: -1 }しか渡されていないことが判明しました。

エラーメッセージ

19:52:58.756 Uncaught (in promise) TypeError: line[0] is undefined
getAllReverse https://upload0605.web.fc2.com/reversi_jan162025/js/reversi-mid.js:35
scanOneDirection https://upload0605.web.fc2.com/reversi_jan162025/js/reversi-mid.js:88
scan8Directions https://upload0605.web.fc2.com/reversi_jan162025/js/reversi-low.js:123
scan8Directions https://upload0605.web.fc2.com/reversi_jan162025/js/reversi-low.js:103
isActive https://upload0605.web.fc2.com/reversi_jan162025/js/reversi-mid.js:74
getAllActive https://upload0605.web.fc2.com/reversi_jan162025/js/reversi-mid.js:115
scanBoard https://upload0605.web.fc2.com/reversi_jan162025/js/reversi-low.js:26
getAllActive https://upload0605.web.fc2.com/reversi_jan162025/js/reversi-mid.js:112
init https://upload0605.web.fc2.com/reversi_jan162025/js/reversi-core.js:29
<anonymous> https://upload0605.web.fc2.com/reversi_jan162025/js/main.js:8
reversi-mid.js:35:3

該当のソースコード

// reversi-low.js

'use strict';

// reversiLow: { Object } 盤面の読み取り低レベル 名前空間
const reversiLow = {};


/*
 * description: 盤面走査・全マス目に対しての繰り返しの処理
 *            : 盤面上の位置情報{ x, y }をcallbackに送る関数
 * callback   : { Function } コールバック関数
 * returns    : no return values
 */
reversiLow.scanBoard = function(callback) {

  /*
   * variable:
   * 1. w    : { Number } 盤面の幅
   * 2. h    : { Number } 盤面高さ
   * 3. posX : { Number } 盤面上における水平方向の位置
   * 4. posY : { Number } 盤面上における鉛直方向の位置
   */
  for (let posY = 0, h = ReversiData.h; posY < h; posY++) {
    for (let posX = 0, w = ReversiData.w; posX < w; posX++) {
      callback({ posX, posY });
    }
  }
}; // reversiLow.scanBoard = function(callback) {}


/*
 * description: 1方向のマス目一覧を格納した配列を返す関数
 * board      : { Array  } 盤面
 * firstX     : { Number } 始めのマス目位置のX座標
 * firstY     : { Number } 始めのマス目位置のY座標
 * directionX : { Number } X座標の方向
 * directionY : { Number } Y座標の方向
 * returns    : { Array  } line 返り値となる配列
 *                         { x, y, stone }を要素として格納している
 *                           x    : { Number } X座標の方向
 *                           y    : { Number } Y座標の方向
 *                           stone: { Number } 0: 黒
 *                                             1: 白
 *                                             8: 空マス
 */
reversiLow.getLine = function({ board, firstX, firstY, directionX, directionY }) {

  // line: { Array } 返り値用の配列
  const line = [];


  for (let move = 1;; move++) {

    // x: { Number } X座標の方向
    // y: { Number } Y座標の方向
    const
    x = firstX + directionX * move,
    y = firstY + directionY * move;


    if (gameUtil.outRange({
          pixelX   : x,
          pixelY   : y,
          rectBoard: ReversiData
       }) === true
    ) break; // 範囲外

    line.push({
      x,
      y,

      /* stone: { Number } 0: 黒
       *                   1: 白
       *                   8: 空マス
       */
      stone: board[ y ][ x ]
    });
  } // for (let move = 1;; move++) {

  return line;
}; // reversiLow.getLine = function({ board, firstX, firstY, directionX, directionY }) {}


/*
 * description     : 基点の座標から8方向を走査する関数
 * board           : { Array    } 盤面
 * x               : { Number   } マス目の水平位置
 * y               : { Number   } マス目の垂直位置
 * scanOneDirection: { Function } コールバック関数
 * returns         : no return values
 */
reversiLow.scan8Directions = function({ board, x, y, scanOneDirection }) {

  // directions: { Array } 8方向を表したオブジェクトを格納した配列
  const directions = [
    { x: -1, y: -1 }, { x: 0, y: -1 }, { x: 1, y: -1 },
    { x: -1, y:  0 },                  { x: 1, y:  0 },
    { x: -1, y:  1 }, { x: 0, y:  1 }, { x: 1, y:  1 }
  ];


  directions.forEach(
    direction => { // 問題の箇所 @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
console.log(`direction:`, direction);
      // line: { Array } １方向のマス目の一覧
      //     : { x, y, stone }を要素として格納している
      const line = this.getLine({
        board,
        firstX    : x,
        firstY    : y,
        directionX: direction.x,
        directionY: direction.y
      });


      /*
       * description: 基点の座標から１方向を走査する関数
       * line       : { Array  } １方向のマス目の一覧
       * direction  : { Object } 方向を設定したオブジェクト
       * returns    : no return values
       */
      scanOneDirection({ line, direction });
    } // direction => {}
  ); // directions.forEach()
}; // reversiLow.scan8Directions = function({ board, x, y, scanOneDirection }) {}

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

コンソールのメッセージ

direction: Object { x: -1, y: -1 }
​

補足

https://upload0605.web.fc2.com/reversi_jan162025/idx.html

Answer 1

スタックトレースを見る限り、ループの1回目でエラー吐いて死んでるように見えますが、違いますか？

『配列directionsからコールバック関数には、1つ目の要素{ x: -1, y: -1 }しか渡されていない』という現象は、「line[0] is undefined」の原因ではなくて、結果だと思われます。

Comments

[Lhankor_Mhy]

読める範囲のコードで補足をすると、

const line = this.getLine(...);

とあり、

reversiLow.getLine = function({ board, firstX, firstY, directionX, directionY }) {
const line = [];
for (let move = 1;; move++) {
if (gameUtil.outRange(...)) break; // 範囲外
line.push(...);
}
return line;
}

となっていますから、if文が成立せずに早期リターンで空配列が返ってきてるのだろうな、というアタリはつけられるかと思います。

なので、ここに書かれていないgameUtil.outRange()が怪しいな、と考えられるかと思います。想像ですが。

[taka_oct092018]

回答ありがとうございます。
試したところ問題が解決しました！
ベストアンサーに選ばせていただきました。

Answer 2

当該部分だけを見ればとくに問題はなさそうです

const directions = [
    { x: -1, y: -1 }, { x: 0, y: -1 }, { x: 1, y: -1 },
    { x: -1, y:  0 },                  { x: 1, y:  0 },
    { x: -1, y:  1 }, { x: 0, y:  1 }, { x: 1, y:  1 }
  ];


directions.forEach( direction => {
  console.log(`direction:`, direction);
});