JavaScript

JavaScriptで配列からランダムに選択する方法を超わかりやすく解説

この記事は、初心者向けに配列やその配列からランダムに要素を取り出す方法について、わかりやすく解説する記事です。

筆者は、ITやプログラミングに詳しくはないので、詳しい人からすると「ちょっと違う!」とか「その説明では不十分」と思われるかもしれませんが、

その分、初心者の気持ちがわかりますので、初心者の目線でできるだけ簡単に説明しますのでお付き合いください。

【筆者はこんな人】

  • sora
  • 30歳代
  • 平凡なサラリーマン
  • 夢は海外でノマド生活
  • IT未経験で独学でプログラミングを勉強
  • 独学での勉強に限界を感じで先生に弟子入り
  • インプットマニアで毎日何かしないと落ち着かない
  • インプットしたものをアウトプット
  • プロフィールはこちら

JavaScriptの配列

JavaScriptなどのプログラミング言語を学習しはじめて少し経つと登場するのが配列。

正直、ここら辺から少し難易度が上がってわかりにくくなってきます。

 

なのでまずは、配列から要素を取り出す方法についておさらいします。

let array = [“りんご”,”れもん”,”ばなな”]

例えば、こんな配列があったとします。そしてこの中から「れもん」を取り出したい場合は・・・

array[1]

とすれば取り出すことが可能です。

ここで注意しなければならないいけないのが、配列は「0」から始まること。

なので、各要素の番号は、

りんご = [0]
れもん = [1]
ばなな = [2]  となります。

配列の要素数をカウントする「length」

もう一つおさらいですが、それが「length」です。

「length」は配列の要素数をカウントするんですが、

ややこしいのは「length」は要素数をカウントする時、きちんと1つ目の要素を1と数えるので、

console.log(array.length)

とすると「3」と答えが出てきます。

まあ、要素数なので当然なんですが、少し困惑してしまうので注意しましょう。

※「length」はこの後の説明でも使います。

JavaScriptの配列でランダムに要素を取得

ここまでで配列について簡単におさらいをしましたので、ここからは配列からランダムに要素を取得する方法について解説していきます。

最初にJavaScriptのコードを書くとこんな感じです。

array = [“りんご”,”れもん”,”ばなな”]
array[Math.floor(Math.random()*array.length)]

いきなり難易度が上がりましたね。

でも大丈夫です。少しずつ解体して解説していきます。

結局array[1]と同じことが書かれている

まず、長いコードで嫌になると思いますが、要は前述した配列の取得方法をしているだけなんです。

おさらいですが、「れもん」を取得する時は、array[1]でしたよね。

ここでみていただきたいのが、結局、配列から1つの要素を抜き出す方法は、ランダムに抜き出す場合でも一緒になっているということです。

つまり、

array[Math.floor(Math.random()*array.length)]

この赤い部分を消してみると

array[ ]

となります。こうやってみると「れもん」を取得した形と一緒ですね。

なので

Math.floor(Math.random()*array.length)

の部分が何を表しているかというと、この場合「0,1,2」のいずれかの数字になります。

Math.floor()は切り捨て整数

次に、「Math.floor(Math.random()*array.length)」の赤い部分を消してみます。

Math.floor()となります。

Math.floor()は何かというと、()の中の数値を切り捨てて整数にしてくれます。
※正確には違いますが、今はそんな感じだと思っておいてください。

つまり

Math.floor(1.55)=1
Math.floor(0.62)=0
Math.floor(38.44)=38 となります。

そうなると「Math.random()*array.length」は、小数点以下の数字を含む数ということです。

Math.random()は、数字をランダムに生成

最後に残った「Math.random()*array.length」ですが、

まずは、「*」は掛け算を意味しています。

つまり、「Math.random() × array.length」ということです。

また、「array.length」は、前述したとおり配列の要素数を表しています。

つまり、今回場合は、

「arrry」という配列の要素数(length) = 3です。

そして、最後に「Math.random()」ですが、これは「0~1」間の数字をランダムに生成します。

例えば「0.111」とか「0.37654」とかこんな感じで本当にランダムな数字です。

JavaScriptの配列でランダムに要素を取得をまとめると

以上が各要素の説明です。

1つ1つは理解いただけたと思うので、ここからは全てをつなげてみます。

繋げていく順番は、説明した順番と逆になります。

 

まず、Math.random()で「0~1」の間でランダムな数字が生成されます。

今回は、「0.553」という数字が生成されたとします。
そして「array.length」は [“りんご”,”れもん”,”ばなな”]で配列の要素が3つなので「3」となります。

つまり「Math.random()*array.length」=0.553×3=1.659となります。

次に「Math.floor(Math.random()*array.length)」ですが、Math.random()*array.length部分は1.659なので

Math.floor(1.659)となり、小数点以下は切り捨てるので

Math.floor(1.659)=1となります。

最後にarray[Math.floor(Math.random()*array.length)]ですが、

Math.floor(Math.random()*array.length)=1なので、

array[1]となり「れもん」が取り出されます。

まとめ

いかがでしたか?

プログラミングで長い構文を見た時に、ぎょっとしてしまうことがあると思いますが、

1つ1つの要素を分解してみると、実はそんなに難しくなかったりします。

 

初心者のうちは、長い構文をみたら、要素ごとに分解してみるようにしてみましょう。