にしし ふぁくとりー(西村文宏 個人サイト)

"JavaScript Tips Factory" : Presented by Nishishi. Since 1997.

指定範囲の整数からランダムに1つを選ぶ方法 [計算・変換]

JavaScriptを使って指定範囲の中からランダムな整数を得るには、Math.random()を使って乱数を得て、欲しい最大値の数値(の1つ上)を掛けてから、Math.floor()で小数点以下を切り捨てます。とても簡単です。

指定範囲の整数からランダムに1つを選ぶ方法

JavaScriptには、実行するたびにランダムな数値を得るrandomメソッドが用意されています。これを使うと、指定範囲の中でランダムな数値を簡単に得ることができます。
ランダムに何かを選択するとか、おみくじを作るとか、何かの当選番号を決定するとか、いろいろ活用できそうです。
randomメソッドは、ただそれだけを実行すると、0以上1未満の小数を返します。これを使って、「ランダムな整数」を得るには以下のように記述します。

var randnum = Math.floor( Math.random() * 100 );

上記のJavaScriptを実行すると、変数randnumに「0~99」の範囲の整数がランダムに格納されます。この1行で実行している処理は、以下の3ステップです。

  • Math.random()0~1未満の乱数を得る。
  • * 100で、欲しい値の最大値より1つ上の数を掛ける。
  • Math.floor(......)で、小数点以下を切り捨てる。

上記のJavaScriptでは、randomメソッドで得られた値に100をかけているため、0以上100未満の値が得られます。
randomメソッドで得られた値に「欲しい値の最大値より1つ上の数」を掛けるのは、randomメソッドの返値に「1」は含まれないからです。1未満の値までが返されます。

この掛ける値を50にすれば、0以上50未満の整数が得られます。(つまり0~49の範囲でどれかが返される)
0~50の範囲で欲しいなら51を掛ける必要があります。

もし、30~90の範囲でランダムな整数が欲しいなら、以下のように記述します。

var randnum = 30 + Math.floor( Math.random() * 61 );

上記の後半Math.floor( Math.random() * 61 )で、0以上61未満の整数が得られます。それに30を加えているので、「30以上91未満」の範囲の整数が得られるわけです。
ですから、0を除いて1~100の範囲でランダムな整数を得たい場合は、以下のように記述します。

var randnum = 1 + Math.floor( Math.random() * 100 );

すると、0以上100未満の乱数に1を加えているので、1以上101未満の値が得られます。つまり1~100の値が得られるわけです。

0~99の範囲でランダムな整数を1つ得るサンプル

上記で紹介したJavaScriptを使って、ランダムな整数を表示するボタンを作ってみたのが、以下の例です。

ランダムに選ばれた番号: ***

ボタンをクリックすると、その下にランダムに選ばれた整数が表示されます。範囲は0~99です。
このボタンと表示機能を作るHTML&JavaScriptは、以下の通りです。

JavaScriptソース

function GetRandomNumber() {
   var randnum = Math.floor( Math.random() * 100 );
   document.getElementById("sample").innerHTML = randnum;
}

HTMLソース

<p>
   <input type="button" value="ランダムな番号を選ぶ" onclick="GetRandomNumber();">
</p>
<p>
   ランダムに選ばれた番号: <span id="sample">***</span>
</p>

得られたランダムな整数は、getElementByIdメソッドを使って、id名に「sample」と指定された要素内に表示させています。
idの値は他と重複してはいけないので、実際に使う際にはもう少し何かユニークな名称に書き換えて使った方が良いでしょう。

1~12の範囲でランダムな整数を1つ得るサンプル

0を含まずに、1から12までの範囲内でランダムな整数を表示するボタンを作ってみたのが、以下の例です。

ランダムに選ばれた番号: ***

ボタンをクリックすると、その下に1~12の範囲のランダムに選ばれた整数が表示されます。
このボタンと表示機能を作るHTMLは先程と同じです。JavaScriptソースは、以下の通りです。

JavaScriptソース

function GetRandomNumber() {
   var randnum = 1 + Math.floor( Math.random() * 12 );
   document.getElementById("sample").innerHTML = randnum;
}

ここでは、まずMath.random() * 12で0~11の範囲内のランダムな数値を得ています。それをMath.floor(...)で整数にしてから、1を加算しています。その結果、1~12の範囲でランダムな数値が得られます。(※0は含まれず、12は含まれています。)
このように、JavaScriptを使って指定範囲の数値をランダムに得るのはとても簡単です。

()

JavaScript TIPSふぁくとりーの主要なカテゴリ

下記のカテゴリに区分して、JavaScriptに関するTIPSを公開しています。カッコ内の数字は、該当する記事の件数です。

著者紹介


にしし(西村文宏)

にししでございます。本書いたり記事書いたりしてます。あと萌えたり。著書5冊発売中です(Web製作系4冊+小説1冊)。著書や記事は「西村文宏」名義。記事は主にAll Aboutで連載。本の最新刊は2011年3月に発売されたライトノベルでございますよ。

Twitter:にしし/西村文宏
にしし/西村文宏 on facebook にしし/西村文宏 on mixi にしし/西村文宏 on Google+ フォローはお気軽に!

にしし(西村文宏)連絡先
☕ コーヒーをおごる

著書一覧と詳細

関連するかもしれない情報など

▼このページに関連しそうな記事が約8本くらい自動表示されています。(たぶん)

--- 当サイト内を検索 ---