Javascriptでランダムな

Question

Javascriptにてボタンを押したら0から9のランダムな数字が10個出るというものを作っていて下記のコードを書いたのですが、同じコードが何個も並んでいて見た目が美しくないとのことで止まっています。どうすればうまくまとめられますでしょうか。

button.addEventListener('click',function () {
  var random1 = Math.floor(Math.random() * 10);
  var random2 = Math.floor(Math.random() * 10);
  var random3 = Math.floor(Math.random() * 10);
  var random4 = Math.floor(Math.random() * 10);
  var random5 = Math.floor(Math.random() * 10);
  var random6 = Math.floor(Math.random() * 10);
  var random7 = Math.floor(Math.random() * 10);
  var random8 = Math.floor(Math.random() * 10);
  var random9 = Math.floor(Math.random() * 10);
  var random10 = Math.floor(Math.random() * 10);

まだ勉強を始めたばかりなのですが詰まってしまいました。
よろしくお願い致します。

Comments

[kei344]

タイトルもコードも途中で途切れています。見た目の話をするなら状況を再現できるようにHTML/CSSも提示してください。

[kei344]

すみません、「見た目」はコードの見た目なのですね、早とちりしました。

Answer 1

配列を作りましょう
基本的に繰り返し≒配列なので、配列の扱いを覚えればコピペが殆どなくなります。

button.addEventListener('click',function () {
  // 配列を宣言して10個の乱数を突っ込む
  var randomItems = [];
  for (var i = 0; i < 10; i++) {
    randomItems.push(Math.floor(Math.random() * 10));
  }

  console.log(randomItems);
  // [2, 6, 0, 3, 4, 4, 9, 1, 4, 7]

  // 作った配列を使って何かする
  for (var i = 0; i < randomItems.length; i++) {
    var random = randomItems[i];
    console.log(random);
    // 2 -> 6 -> 0 ...の順に表示される
  }
}

まぁ、あとで使わないなら配列の宣言も不要ですね。

button.addEventListener('click',function () {
  for (var i = 0; i < 10; i++) {
    var random = Math.floor(Math.random() * 10);

    // 作った乱数で何かする
    console.log(random);
  }
}

---

【おまけ】

var randomItems = Array(10).fill(0).map(Math.random).map(it => it * 10).map(Math.floor)
console.log(randomItems);
// [2, 5, 3, 7, 5, 7, 8, 8, 8, 6]

Comments

[1223013]

解決しました。
わかりやすく説明してくださりありがとうございます。

Answer 2

色々考えられますが

• 「0から9のランダムな数字を作る」関数を作る
• 採番が「数値的に順番である」ならforを利用する

いずれにしても変数は配列にして受け取るようにしたほうが良いでしょう。

• javascriptで任意個の変数を動的に生成する

Comments

[m.ts10806]

ちなみにこの手の質問は結構あがってますし、まとめ方を指南する記事もあります。質問前にまず探してください。提示の質問にあるような課題は質問者さんが世界で初めて出くわしたものでしょうか？

[1223013]

ありがとうございます。
これからはもっと調べてから質問するようにいたします。

[m.ts10806]

調べて試してくださいね。
失敗から身に付くことの方が多いです。

Answer 3

var a=Array(10).fill(null).map((x,y)=>[y+1,Math.random()]).sort((x,y)=>x[1]-y[1]).map(x=>x[0]);
console.log(a);

※ごめんなさい、0から9でしたね

var a=Array(10).fill(null).map((x,y)=>[y,Math.random()]).sort((x,y)=>x[1]-y[1]).map(x=>x[0]);

Comments

[1223013]

回答ありがとうございます。
解決できました。