Presented by Nishishi via Movable Type. Last Updated: 2016/10/14. 13:32:50.

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

JavaScriptには、実行するたびにランダムな数値を得るrandomメソッドが用意されています。これを使うと、指定範囲の中でランダムな数値を得ることができます。
ランダムに何かを選択するとか、おみくじを作るとか、何かの当選番号を決定するとか、いろいろ活用できそうです。

randomメソッドは、ただそれだけを実行すると、0以上1未満の小数を返します。これを使って、「ランダムな整数」を得るには以下のように記述します。

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

上記のJavaScriptを実行すると、変数randnumに「0~99」の範囲の整数がランダムに格納されます。

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

上記のJavaScriptでは、randomメソッドで得られた値に100をかけているため、0以上100未満の値が得られます。
このかける値を50にすれば、0以上50未満の整数が得られます。

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

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

※上記の後半「Math.floor( Math.random() * 61 )」で、0以上61未満の整数が得られます。それに30を加えているので、「30以上91未満」の範囲の整数が得られます。

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

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

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

<script type="text/javascript"><!--
function GetRandomNumber() {
   var randnum = Math.floor( Math.random() * 100 );
   document.getElementById("sample").innerHTML = randnum;
}
// --></script>
<p>
   <input type="button" value="ランダムな番号を選ぶ" onclick="GetRandomNumber();">
</p>
<p>
   ランダムに選ばれた番号: <span id="sample">***</span>
</p>

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

JavaScript TIPS 主要なカテゴリ

現在、以下のカテゴリに区分してTIPSを公開しています。

  • イベント : JavaScriptを実行するトリガーとなるイベントに関するTIPS
  • 入力フォーム : JavaScriptで入力フォームを扱う方法に関するTIPS
  • 情報取得 : JavaScriptで様々な情報を得る方法に関するTIPS
  • 操作・移動 : JavaScriptでブラウザを操作したり表示ページを移動したりする方法に関するTIPS
  • 日付・時刻 : JavaScriptで日付や時刻を扱う方法に関するTIPS
  • 機能 : JavaScriptで何らかの機能を実現する方法に関するTIPS
  • 装飾・内容変更 : JavaScriptで装飾や内容を変更する方法に関するTIPS
  • 計算・変換 : JavaScriptで様々な計算や変換処理を行う方法に関するTIPS

▲各カテゴリ毎に、TIPSのタイトルと概要を一覧できます。ぜひ、いろいろ覗いてみて下さい!

関連書籍・関連ソフトなど