random関数で取得した数字を再取得できないようにしたい

Question

前提・実現したいこと

JSの練習として簡単なゲームを作成しています。

1～13の数字の中で、自身が選択した数字とCOMが選択した数字を比べて
大きいほうが勝ち。
一度出した数字は再度選択することはできず、13セット繰り返して
勝利したセット数が多かったほうがゲームに勝つというシンプルなルールです

自身はセレクトボックスから数字を選択。
COMはrandom関数で数字を取得・選択させる方法をとっています。

発生している問題

表題のように、COMがranndom関数で一度出した数字を
再度出せないようにしたいのですがうまくいきません。
下記のコードでは同じ数字を選択してしまいます。

該当のソースコード

let history_com_num = [];

let selected_com_num = getRandomNum(13) + 1;

  for(let i = 0; i < history_com_num.length; i++){
      if(history_com_num[i] !== selected_com_num){
        break;
      } else {
        selected_com_num = getRandomNum(13) + 1;
    }
  }

if(selected_p_num > selected_com_num){
    setMessage(`第${current_set_num + 1}回目はあなたの勝ち！`);
  } else if(selected_p_num < selected_com_num){
    setMessage(`第${current_set_num + 1}回目はCOMの勝ち！`);
  } else{
    setMessage(`第${current_set_num + 1}回目はドロー！`);
  }

history_com_num.push(selected_com_num);

Javascript

試したこと

history_com_numの配列に選択したカードをpushで入れていき、
for文で回してrandom関数で選択した数字と配列内の値が一致しない
場合は抜ける、同じ場合は再取得というコードのつもりです。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Comments

[y_waiwai]

うまくいかないとはどうなるんでしょうか
そこらへん詳しく説明しましょう

Answer 1

質問にあるコードはダメとは言いませんが、そのやり方だとちょっと面倒な気がします。

とりあえず、プログラミングってのは『こう書けばいい』というものではなく、現実世界のシミュレーションです。

一旦、現在のコードを読んでみましょう。コードを読むコツは『一行レベルで、その行が何をしているかを考えながら読む』です。

// history_com_numを配列とする
let history_com_num = [];

// 1～13までの乱数をselected_com_num入れる
let selected_com_num = getRandomNum(13) + 1;

  // history_com_numの個数分、ループ
  for(let i = 0; i < history_com_num.length; i++){
      // 現在のhistory_com_numの値が乱数と同じでないなら
      if(history_com_num[i] !== selected_com_num){
        // ループから抜ける
        break;
      // それ以外なら(= 同じなら)
      } else {
        // 乱数を再発行!
        selected_com_num = getRandomNum(13) + 1;
    }
  }

// selected_p_num が selected_com_numより大きいなら
if(selected_p_num > selected_com_num){
    // 第***回目はあなたの勝ち...のように出力
    setMessage(`第${current_set_num + 1}回目はあなたの勝ち！`);

// 以下略

これを疑似コードとして抜き出してみる。

1. history_com_numを配列とする
2. 1～13までの乱数をselected_com_num入れる
3. history_com_numの個数分、ループ
    3.1. 現在のhistory_com_numの値が乱数と同じでないなら
        3.1.1. ループから抜ける
    3.2. それ以外なら(= 同じなら)
        3.2.1. 乱数を再発行
4. selected_p_num が selected_com_numより大きいなら
    4.1. 第***回目はあなたの勝ち...のように出力
...

この疑似コードをもとに実際に手作業でシミュレーションしてみてください。つまり、数学の手順なり、料理のレシピとしてなりでやってみる。実際の値を入れてみたりとか。

まず、(1)で配列を用意。(2)で乱数を発行。で、selected_com_num = 3 だとする。
(3)でループしようとしますが、まだhistory_com_numには何も入っていません。空の状態です。なのでループせずに(4)へ。

(4)では、selected_p_numが何者かわかりませんが、ユーザが入力した値だと仮定して、比較する。

selected_p_num = 5 なら 5 > 3 を満たすので(4.1)を処理する。つまり『第**回目はあなたの勝ち』とか。

で、最後のやつで配列に追加。

で、仮にこのコードはlet history_com_num = [];以外は関数になっていて、その関数を何度も呼んでいると仮定すると、

history_com_num = { 3 }

となっている。

で、(2)に行き、selected_com_num = 3 とする。history_com_num には1個データが入っているので、(3)でループします。

(3.1) で一個目のデータ 3 と selected_com_num を比較する。 3≠3 は満たさないので処理せず。
その次の(3.2)で強制的に処理。つまり(3.2.1)で乱数を再発行。そこで selecteced_com_num = 3 だとする。

でもそのまま(4)へ。……となる。

そうすると history_com_num = { 3, 3, 3, 4, 1, 2, 2, 3,... } のように同じ数字が出てくる可能性がある。

乱数の再発行で別の数字が出ればなんとかなるかもしれませんが。

もし、そもそも関数にもせずに、完全にそのコードだけなら、複数回選択しないので…

で、私なら、『現実世界でならどうするか』を考えてみます。たとえば、『手作業でやるならどうするか』とか。

そう考えると、私なら、

0. 過去履歴として配列を持つ
1. 乱数発行し、selectedNum に入れる
2. 無限ループ
    2.1. 過去履歴にselectedNumと同じものが無いなら
        2.1.1. ループから抜ける
    2.2. 乱数を再発行
3. selecedNumの値を過去履歴として保存
4. ユーザ入力と比較して…

と言う風にやりますね。

乱数を再発行するのはいつですか? そう、数字を乱数として取り出すときと、「過去履歴にあるものと同じであったとき」ですね。

ということは、言い換えると『常に乱数を発行し続け、今までに無いものなら乱数発行を止める』ということが可能ですね。

よって、(2)では無限ループで、(2.1)で「同じものが無いなら無限ループから抜ける」と言う風にする。
そうすれば、違う値が出るまで何度もループすることになりますし。

さらに、(2.1)では、実際にはさらにhistory_com_num分ループしています。ですがこれは関数にまとめて、

if( hasSameValue( history_com_num, selectedNum ) )...のようにすればコンパクトにできます。
あえて関数にせずともできるとは思いますが、面倒なので私なら関数にする。

後はこれを実装するだけですね。

---

それと、他の方も仰っているように「配列として用意して、それをシャッフルする」という手も取れますね。

Fisher Yates Shuffleだったかな。

これのように、いったん、selectedNums = { 1, 2, 3, 4, 5, ..., 12, 13 } と入れていき、
それをシャッフルして selectedNums = { 2, 4, 12, 6, 1, ... } のようにランダムな並びにするっていうことも可能ですね。
ただし、これは今回のように「13回行う」とかみたいに回数が分かっている前提ですね。
起動ごとに乱数を発行して…とかだと厳しいです。(過去履歴はどこに保存しておくのかとか)

Answer 2

以下の順に回答します。

1. 配列のシャッフルにより、COMの出す数字の配列を作る案
2. ご質問にあるコードと同様のものを実装してみる案
3. ジェネレータを使う案

　　　3.1 ジェネレータを使ったコード例 (???? サンプル )

1. 配列のシャッフルでCOMの出す数字の配列を作る案

COMが1回目から13回目までの各セットに選択する数字の配列を、対戦開始時にあらかじめ作っておく、という方法が考えられます。この配列は1から13までの整数を1個ずつ含み、かつ並び順をランダムにしたもので、たとえば以下のようなものです。

[6,13,10,2,4,11,7,8,3,9,12,5,1]

このとき、COMは最初に6を出し、次に13を出し、３回目に10を出し・・・というように数字を出してきます。

このような配列を作るには、まず1から13までの整数を1個ずつ含み、かつ、並び順が昇順のもの

[1,2,3,4,5,6,7,8,9,10,11,12,13]

を作り、これをランダムに並び替えます。配列の順序をランダムに並び替えるのはシャッフル(shuffle)と呼ばれます。
シャッフルのアルゴリズム でググると上位のほうに

フィッシャー–イェーツのシャッフル

がヒットすると思います。これが有名です。これのお手本となるjavaScriptのコードも探せば色々と出てきますが、たとえばStackoverflowで高評価のベストアンサーとなっている、これあたりを拝借すればよいかと思います。

// ???? https://stackoverflow.com/a/2450976
function shuffle(array) {
  let currentIndex = array.length,  randomIndex;

  // While there remain elements to shuffle...
  while (currentIndex != 0) {

    // Pick a remaining element...
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex--;

    // And swap it with the current element.
    [array[currentIndex], array[randomIndex]] = [
      array[randomIndex], array[currentIndex]];
  }

  return array;
}

以下は、上記のshuffleを使ってCOMの出す数字の配列 comNumbersを作る例です。

const comNumbers = shuffle([...Array(13)].map((_, i) => i+1));
console.log(comNumbers);  // => .e.g. [6,13,10,2,4,11,7,8,3,9,12,5,1]

2. ご質問にあるコードと同様のものを実装してみる案

質問にある、

history_com_numの配列に選択したカードをpushで入れていき、

for文で回してrandom関数で選択した数字と配列内の値が一致しない
場合は抜ける、同じ場合は再取得というコード

と同じ趣旨のコード例を挙げると以下です。（selected_com_num が history_com_numに含まれていない値になるまで、selected_com_num = getRandomNum(13) + 1 を繰り返す部分のみです。history_com_numにpushで追加する部分は割愛しています。）

let selected_com_num = getRandomNum(13) + 1;

while (true) {  
  let index = -1;
  for (let i=0; i < history_com_num.length; i ++) {
    if (history_com_num[i] === selected_com_num) {
      index = i;
      break;
    }    
  }  
  if (index === -1) {
    break;
  }  
  selected_com_num = getRandomNum(13) + 1;
}

console.log(selected_com_num);

全体の構造は、while(true) という無限ループです。ここから抜けるのは

  if (index === -1) {
    break;
  }  

という breakです。ここでbreakされるのは、indexが-1のときですが、indexが-1のときというのは、selected_com_num が、配列history_com_numに含まれていないときです。含まれているときは、forループによって、一致したhistory_com_numの要素のインデクスiが index に代入されますが、それは0以上の整数です。
index が 0以上だった場合は、whileループ本体の最後で、再び

selected_com_num = getRandomNum(13) + 1;

を実行して、selected_com_num を取り直します。

ですが、これはあまりいいやり方ではありません。たとえば、history_com_numが[2, 8, 4]だったとして、万が一、 selected_com_num が 2 か 8 か 4 のどれかであり続けると、while からbreakしません。それでも実用上問題ないのは、

そう多くない試行回数で、selected_com_num は、history_com_num に含まれない数になるはず

という楽観的な見通しがほぼ間違いなく成り立つからです。しかし、実用上問題ないと言える根拠としては
selected_com_numの取り得る値の場合の数が高々13だから
というやや曖昧というかざっくりな理由によるものなので、私見としては正直あまりスッキリしないモヤモヤが残るコードという感じがします。

3. ジェネレータを使う案

最後に、ジェネレータを使うコードを紹介します。

ユーザーの対戦相手であるCOM が備えるべき仕組みとして、以下のようなものを考えます。対戦の開始時点で、COM は以下のような配列を内部に持っています。

• COM の内部にある配列の初期状態：

[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13]

第1セットに臨むにあたって、COMは上記の配列からランダムにひとつを選びます。例えば、6 が選ばれたとしましょう。これは、COMが内部にもつ配列から 6 が取り出されたことを意味します。

• 第1セットで選ばれた数： 6

このとき、COMの内部にある配列から、選ばれた6が削除されるような仕組みをCOMは持っているとします。そうすると、第1セット終了後のCOMの内部にある配列は以下になります。

• 第1セット終了後のCOM内部の配列：

[1, 2, 3, 4, 5, 7, 8, 9, 10, 11, 12, 13]

第2セットでCOMは上記の第1セット終了時の配列からランダムにひとつを選びます。例えば、11 が選ばれたとしましょう。以下のようになります。

• 第2セットで選ばれた数： 11
• 第2セット終了後のCOM内部の配列：

[1, 2, 3, 4, 5, 7, 8, 9, 10, 12, 13]

以降のセットも、COMは内部に持っている配列からひとつの要素をランダムに取り出して、それをユーザーとの対戦に使用します。取り出された要素は配列から削除されるようにすれば、13セット目の終了時には、以下のように空の配列になるはずです。

• 第13セット終了後のCOM内部の配列：

[]

このような仕組みを持つCOMが実装されたオブジェクトが、com という変数に入るとしましょう。com が備えるべき要件は以下です。

• com は初期状態で、[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13]という配列を内部に持っている。

• com には、次のセットで出す数字（またはその数字を持つオブジェクト）を得るためのメソッドがある。このメソッド名を仮に com.next() とする。

• com.next() が返す数（あるいは、返すオブジェクトがあるプロパティとして持つ数）はCOMが次に出す数とする。これはそれまでに出した数のどれとも重複してはならない。

• 上記の重複排除を実現するために com.next() するたびに内部の配列から、次に出す数に選ばれたものを削除する。

• 初期状態ではcomは1から13までの13個の数を持っているので、com.next() で、COMの出す数として有効な数値が返されるのは13回目までで、14回目以降は（対戦に使える有効な）数を返さないように構成されている必要がある。

このようなnextメソッドを持つcom を実装する方法として、何らかのクラスを自作してそれのインスタンスとしてcom を得ることもできるでしょう。けれども、もっと簡単な方法があります。それはジェネレータ関数を使って、これの返す値としてcomを得ることです。

com を得るためのジェネレータ関数は以下のようなものになります。

// 1以上n以下の整数をランダムな順序で各1回ずつ生成するジェネレータを返す。
function* randomSequenceFromOneTo(n) {
    const numbers = [...Array(n)].map((_, i) => i+1);
  
    while (numbers.length > 0) {
      const index = Math.floor(Math.random() * numbers.length);
      const value = numbers[index];
      numbers.splice(index, 1);
      yield value;
    }    
}

上記のジェネレータ関数randomSequenceFromOneTo(n)を使って、一対戦が13セットマッチに対応するcomを得るには以下のようにします。

const com = randomSequenceFromOneTo(13);

こうして得られた com を使って、COMが次に出す数を得るには以下のようにします。

const { value, done } = com.next();

こうすると、変数value には次にCOMが出す数が、変数doneにはtrueかfalseのブール値が入ってきます。done が true になっているときは、すでにcomが内部にもつ配列numbersが空になっており、次に出せる数が無いことを意味しています。そのときのvalue はundefined になります。

randomSequenceFromOneTo(13)で作った com が内部に持つ数字の配列は、初期状態で長さ13ですが、それが com.next()が呼ばれるたびに1ずつ減っていき、第13セットが終わったときには配列は空になります。その後にさらにcom.next()を呼んでも、返されるオブジェクトとしてはdoneがtrueで、valueの無いものが返ってきます。

3.1 ジェネレータを使ったコード例

以下のリンク先は、先のジェネレータ関数randomSequenceFromOneTo(n) を使ってゲームを実装してみた例です。

• サンプル ???? tera: 372199 - A Game with generator function

このサンプルでは、

• 初期表示では、全5セット対戦の第1セットを開始するところから始まります。
• 5セット対戦なので、ユーザーもCOMも出せる数は1以上5以下の整数です。
• 5セット目が終わると、ボタンが「総合成績を表示」になります。これをクリックすると全5セットの戦績が表示されます。
• 総合成績が表示されると、画面最上部は再度の対戦を受けつける状態になります。
• 再度の対戦では、対戦セット数を 5, 8, 13 の三通りから選べます。

このサンプルの主目的はジェネレータ関数の使用例を示すことですので、ゲームを構成するデータ構造だったりロジックだったりは、リファクタリングの余地が多々あると思われます。そのような観点で参考にしていただければと思います。

Answer 3

いちばん手っ取り早いのは、「1から13まで入った配列を用意しておいて、最初にシャッフルしたあとで先頭から順に使っていく」ような方法かと思います。