マインスイーパの周囲の爆弾の数を数える関数count()について

Question

前提・実現したいこと

現在javascriptでマインスイーパーを作成しております。
しかし、参考にしている本のコード解説だけでは意味がわからない箇所があります。
for分の条件式let j= y-1; j<=y+1; j++
そして、cell[j] && cell[j][i]の部分です。

該当のソースコード

let cell: Cell[][]=[];
function count(x: number,y: number){
    let b =0; //爆弾の数
    for(let j= y-1; j<=y+1; j++){ 
        for(let i =x-1; i<=1; i++){
            if (cell[j] && cell[j][i]){ 
                    if(cell[j][i].bomb) b++; 
            }
        }
    }
    return b;
}

参考図

このような図とともに「if(cell[j]&&cell[j][i])」は、iとjがマス目の外になった場合、たとえば、jが1のような場合に、爆弾を数えないようにするための処理。という記述がありました。
しかしこの意味がわかりません。どうかご回答願います。

Answer 1

i = x-1; i<=1; i++ について

質問では

for分の条件式let j= y-1; j<=y+1; j++

がわからないとありますが、他の回答に対するコメントを読むとi = x-1; i<=1; i++の方のようなのでこちらについて。
参考にされている本にこれが書かれているのであれば、誤植です。正しくは

for (let i = x - 1; i <= x + 1; i++) {

です。

cell[j] && cell[j][i] について

3x3 のマインスイーパーを考えてみます。

cell[0][0], cell[1][0], cell[2][0]
cell[0][1], cell[1][1], cell[2][1]
cell[0][2], cell[1][2], cell[2][2]

そして cell[0][0]（左上のセル）の周囲の爆弾を数えるためにcount関数を呼び出してみます。

count(0, 0)

x=0, y=0ですから実際に走るコードとしては以下のようになります。

let b = 0;
for (let j = -1; j <= 1; j++) { 
  for (let i = -1; i <= 1; i++) {
    if (cell[j] && cell[j][i]) {
      if (cell[j][i].bomb) b++;
    }
  }
}
return b;

ここで if (cell[j] && cell[j][i])がない場合を考えます。つまり

let b = 0;
for (let j = -1; j <= 1; j++) { 
  for (let i = -1; i <= 1; i++) {
    if (cell[j][i].bomb) b++;
  }
}
return b;

だったとして、これが実行される場合を考えてみます。このとき if (cell[j][i].bomb) 文の中身は実行順に

1. j = -1, i = -1 => cell[-1][-1].bomb
2. j = -1, i = 0 => cell[-1][0].bomb
3. j = -1, i = 1 => cell[-1][1].bomb
4. j = 0, i = -1 => cell[0][-1].bomb
5. j = 0, i = 0 => cell[0][0].bomb
6. j = 0, i = 1 => cell[0][1].bomb
7. j = 1, i = -1 => cell[1][-1].bomb
8. j = 1, i = 0 => cell[1][0].bomb
9. j = 1, i = 1 => cell[1][1].bomb

となります。一番上のcell[-1][-1].bombは、そもそもcell[-1]がundefinedであるためにcell[-1][-1]を参照することができず、

Cannot read property '-1' of undefined` 

のようなエラーが発生します。上から4番目のcell[0][-1].bomb については、cell[0]自体はアクセス可能ですが、cell[0][-1]はundefinedなため、cell[0][-1].bombについて

Cannot read property 'bomb' of undefined

のようなエラーが発生します。

こうしたアクセスできないプロパティへの参照が起こらないようするために、undefinedとなっていないかどうかを先に確かめているのがif (cell[j] && cell[j][i])の条件式です。上記リストのうち、1,2,3についてはif文の中の&&の前の時点でfalseだと判定されてif文の中は実行されません（&&についてはMDN等を参照ください）。つまり上記のエラーが発生する前にループの次の処理にうつります。また4,7についてはif文の中の&&の後ろでfalseと判定され、やはりif文の中は実行されません。最終的には5, 6, 8, 9、つまり↓で●のついているところの爆弾の数がカウントされ、エラーで止まることなく欲しい情報が得られるようになっています。

●cell[0][0], ●cell[1][0], cell[2][0]
●cell[0][1], ●cell[1][1], cell[2][1]
cell[0][2], cell[1][2], cell[2][2]

Comments

[Tanakakko]

ご回答ありがとうございます。大変わかりやすく、理解できました！

Answer 2

全てのコードみないと分からないので、勘で回答します。
見た目上は3×3のマスしかないけど

□□□
□□□
□□□

実際にはその外側にマスを用意してるのでしょう。

■■■■■
■□□□■
■□□□■
■□□□■
■■■■■

爆弾のあるところと、外枠（黒いマス）は押せないマスとして判定しているのでしょう。
で、押せないマス＝爆弾としてカウントしてしまうと間違った数でカウントされてしまうから、
枠外（黒いマス）は爆弾としてカウントしないようにする
という意味かなと

Comments

[Tanakakko]

ご回答ありがとうございます。なるほど、外側に押せない仮想のマスを作成するのですね。大変丁寧な説明ありがとうございました。cell[j]&&cell[j][i]部分そして、i =x-1; i<=1; i++のコードがそれをどう実装しているのかの解説もしていただけませんでしょうか

Answer 3

端に来るとチェックすべき領域が減るためのの処理でしょうね

この手の処理はダミー領域をつくっておくといつも同じ処理ですみます。
つまり33の領域であれば55の範囲をもち端の１列（１行？）はさわれないように
しておけば済みます

Comments

[Tanakakko]

ご回答ありがとうございます。なるほど、外側に押せない仮想のマスを作成するのですね。大変丁寧な説明ありがとうございました。cell[j]&&cell[j][i]部分そして、i =x-1; i<=1; i++のコードがそれをどう実装しているのかの解説もしていただけませんでしょうか