ＪａｖａＳｃｒｉｐｔ講座
（メールマガジン編）
１２／０６日発行 ヨッシーの”ホームページを作ろう！（JavaScript編）”★Vol.22★
| 乱数 |
乱数とは、ランダムな数字のことで、プログラムを実行するたびに、違う数を得ることができるんだ。
だから、このランダムな数字とif文などの条件分岐を使えば、おみくじなどのようなちょっとしたゲームだって作れるんだ。
| ★ 乱数 ★ |
じゃあ、まず乱数(ランダムな数字)を呼び出す命令をやってみよう。
(０以上１未満の)乱数を発生させる |
Math.random() |
これを使うだけで、ランダムな数字を得ることができるんだ。
この命令は、０以上１未満の数字のうちランダムな数字(乱数)を出してくれる。
（※１未満とは１は含まない）
じゃあ、これを使ってプログラムを作ってみよう・・・・と言いたいんだけど、この命令によって得られる数字は０以上１未満の数字のうちのどれか。
つまり、0.12や0.56などのような小数になってしまうんだ。
プログラムでよく使用するのはどちらかというと整数(0,1,2,3,4・・・・等)だよね。
だから、この命令で得られた乱数じゃ使えないよね。
そこで、この出てきた乱数を整数に直したいよね。
これからプログラムの前に、整数の乱数を得る方法をやってみよう。
例えば、０以上１０未満の整数の乱数を得たい場合はどうすればいいだろう。
まず、整数ということを考える前に、単に０以上１０未満ということから考えよう。
これは簡単。ただ単にさっきの乱数を１０倍してやればいい。
そうすれば、０以上１０未満の乱数が得られるね。(まだ整数ではない)
〜よくわからない人は、こう考えよう。〜
元の乱数は０以上１未満だったよね。
つまり、元の乱数で得られる数字の最低は０だね。
だから、１０倍したあとも最低の数字は０だね。
次に、元の乱数の最高の数字は１だね(未満だから本当は１は入らないが、考えやすくするために１と考える)。
だから、１０倍すると最高の数字は１０になるね。
そして、最低が０、最高が１０なので、乱数の範囲は０以上１０未満になるんだ。
※数学的に考えると次のようになる。
求まる乱数をXとすると、
0<=X<1
それぞれを10倍
0<=10X<10
つまり、10X(元の乱数を10倍した数字)は０以上１０未満である。)
| ＜まとめ＞ １以上１０以下の乱数を得る。 Math.random()*10 |
これでまず、０から１０の間の乱数が求まったね。
あとは、少数で表されている乱数を整数に直せばいいので、
以前(Vol.13)にも少しやったMath.floor(値)というのを使って少数以下を切り捨てよう。
（※ついでにMath.ceil(値)についてもやっておこう）
少数を整数に切り捨てる(1.3→1 2.5→2) |
Math.floor(値) |
少数を整数に切り上げる(1.3→2 2.5→3) |
Math.ceil(値) |
なので、さっき作った１以上１０未満の乱数を使って、
Math.floor(乱数) ⇒ Math.floor(Math.random()*10)
これで、０以上１０未満の整数(つまり、０〜９の数字)のどれかを得る命令ができたんだ。
(※ちなみに、１〜１０の数字を得たい場合は、出てきた乱数に１を足せばよい)
じゃあ、ここで最終的なまとめをしよう。
| ＜まとめ＞ ０〜Ｎ−１までの整数をランダムに得る。 ※０〜Ｎ-1なので気をつけること。 Math.floor(Math.random()*Ｎ) 例） |
これで、乱数を得る命令がわかったので、
実際に乱数を使ったプログラムを作ってみよう。
<HTML>
<HEAD>
<TITLE>ランダム挨拶</TITLE>
<SCRIPT language="JavaScript">
comment = new Array(3);
comment[0]="HTMLでホームページを作ろう！";
comment[1]="スタイルシートでデザインしよう！";
comment[2]="JavaScriptでページに動きをつけよう！";
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT language="JavaScript">
n = Math.floor(Math.random()*3);
document.write(comment[n]);
</SCRIPT>
</BODY>≪結果≫
↑ランダムで表示する
--解説--
<HTML>
<HEAD>
<TITLE>挨拶</TITLE>
<SCRIPT language="JavaScript">
comment = new Array(3); ←配列の箱を３つ作った
comment[0]="HTMLでホームページを作ろう！";
comment[1]="スタイルシートでデザインしよう！";
comment[2]="JavaScriptでページに動きをつけよう！";
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT language="JavaScript">
n = Math.floor(Math.random()*3); ←０〜２までの乱数をnに代入
document.write(comment[n]); ←nを使ってコメントを表示
</SCRIPT>
</BODY>
まず、<HEAD>の中をやろう。
配列の作り方を思い出してね。
変数 = new Array(個数)
だったね。
あとは、順にコメントを設定しているだけだよ。次に<BODY>の中の表示部分。
n = Math.floor(Math.random()*3);
これはさっきやった方法で０,１,２の乱数を得て、それをnに代入しているんだ。
そして、
document.write(comment[n]);
これは、nによってコメントが変わるのはわかるかな。
例えばn=0ならcomment[0]が表示されるし、n=2ならcomment[2]が表示されるよね。
このようにして、乱数を使ってコメントをかえることができるんだ。
| ＜問題＞ ■命令■のところを埋めて、 画像をランダムに表示するプログラムを作れ。 ※余力があれば、下のLevel2もやってみよう。 〜Level.1〜 〜Level2〜 |