重複しないランダム表示について分からない箇所があります

Question

https://janken.asotetu.work/js_seiza_uranai/の星占いのゲームを作るコードですが、

とありますが、重複を避けるためのプログラム
let rank= [];//ランキングのための変数
n=0;//繰り返し用プログラム
while(n < seiza.length){
if (seiza[un_r] != rank[n]){n++;}
else {break;}
}
が分かりません。
nは最初は０が代入されているので、はじめは
if (seiza[un_r] != rank[0]){n++;}
という意味になると思うんですが、seiza[un_r]（配列seizaのランダム→仮にseiza[0]の”牡羊座”）と
rank（初めは空の配列）がイコールになる理由が分かりません
仮にn=0なので、rank[0]になりますが、それがどうやってseiza[0]の”牡羊座”やseiza[1]の"おうし座"とイコールになるんでしょうか？
rank[0]はrank[0]であって、seiza[0]の”牡羊座”やseiza[1]の"おうし座"という内容は含まれてないと思います
それとも、seiza[0]とrank[0]ならイコール、seiza[1]とrank[1]なら＝ということでしょうか？
意味が分からなくて困ってます

また、

も分かりません
「else登録しているものなら {break;プログラムを中断してください}」とありますが、プログラムを中断したら、途中でそこで終わりませんか？
どなたか解説お願いいたします

Answer 1

コードの説明

例えば、既に第1位に"さそり座"、第2位に"うお座"が選ばれていて、これから第3位を選ぶ場合を考えます。このとき、配列rankの中身は["さそり座", "うお座"]となっています。

まず、乱数un_rを使い、第3位となる星座の候補をランダムに選びます。ここでは、"うお座"が選ばれたとします。つまり、seiza[un_r]=="うお座"です。

次に、while文を使って配列rankの要素を先頭から順番に見ていき、size[un_r]と一致したらループを途中で抜けるようにします。この例ですと、

• n==0 … rank[0]=="さそり座"はsize[un_r]と一致しないので、nを1増やす
• n==1 … rank[1]=="うお座"はsize[un_r]と一致するので、while文を抜ける
  となります。

こうすることで、while文を回した後に、

• n < seiza.lengthなら、while文を途中で抜けた = 重複がある
• n == seiza.lengthなら、while文を途中で抜けなかった = 重複がない
  のように重複を判定することができます。

この例では重複があることが分かったので、何もせずにfor文の始めに戻り、再び星座の候補をランダムに選びます。ここでは"ふたご座"が選ばれたとします。そして先ほどと同様にwhile文を回すと、今度は重複がないと分かるので、iの値を1増やし、選んだ星座をrankに追加します。

以上のことを、iが12になるまでfor文を回すことで、第1位から第12位までの星座を重複のないように選んでいます。

 for (i=0 ;i < seiza.length;){ //第12位が選ばれるまで繰り返す

	n = 0;
	un_r = Math.floor( Math.random() * seiza.length);    //星座をランダムに選ぶ
	color_r = Math.floor( Math.random() * color.length); //ラッキーカラーをランダムに選ぶ

	//rankの先頭から順番に、重複がないか調べる
	while(n < seiza.length){
	  if (seiza[un_r] != rank[n]){n++;}
	  else {break;} //重複がある場合はループを抜ける
	}

	//重複がないならランキングに追加
	if (n >= seiza.length){
	  i++;
	  //(中略)
	  rank.push(seiza[un_r]);//配列に星座を追加
	 }
	}

補足

どのように動作しているのか分かりにくいという場合は、以下のようにプログラムの該当箇所でログを出力してみるとよいでしょう。重複がある場合に、while文が途中で終了していることが分かると思います。

コード例:

	console.group(`第${i+1}位`);
	console.log(`seiza[${un_r}]==${seiza[un_r]}`);
	while(n < seiza.length){
		console.log(`rank[${n}]==${rank[n]}`);
		if (seiza[un_r] != rank[n]){n++;}
		else {console.log('重複'); break;}
	}
	console.groupEnd();

ログ出力例(Chrome):

コードの問題点

さて、このコードには致命的な欠陥があります。それは、上記のログ出力例からも分かる通り、配列rankで範囲外参照が起きていることです。

while文の条件式を見ると、n < seiza.lengthとなっています。rankの長さはseizaの長さより小さいですから、重複が無い場合に、nはrankの末尾の要素の添え字よりも大きくなってしまい、範囲外参照が起きています。

JavaScriptは範囲外参照したときundefinedを返してくれますが、エラーやバグの原因になりかねないので、してはいけません。rankの各要素を調べるのですから、n < rank.lengthとしましょう。

修正例:

 for (i = 0; i < seiza.length;){
	un_r = Math.floor( Math.random() * seiza.length);
	color_r = Math.floor( Math.random() * color.length);

	n = 0;
	while(n < rank.length){ //修正
		if (seiza[un_r] != rank[n]){n++;}
		else {break;}
	}

	if (n == rank.length){ //修正
		i++;
		//(中略)
		rank.push(seiza[un_r]);
	}
}

Comments

[heat]

分かりやすくありがとうございました！！理解できました！！