JavaScript入門講座｜ランダム・乱数表示ついて学ぼう

うさタブ

今回はランダム・乱数表示について勉強していくッピ！

ユウキ

ランダム・乱数表示！？

ユウキ

・・・ってなに？

うさタブ

ランダムというのは、行動するごとに結果が変化することッピ！

その結果の中で、ランダムに結果が変化する数字のことを乱数というッピ！

うさタブ

占いやおみくじ、ゲームでよく使われるもの……

それが乱数やランダム表示ッピ♪

うさタブ

ユウキくんもゲームをやっていて、毎回結果が変わる経験があるんじゃないッピか？

同じ敵を倒してもアイテムを落としたり、落とさなかったり・・・
色違いのモンスターが出たり、たくさん景品がもらえたり・・・

ユウキ

あ～　アレか！

うさタブ

乱数やランダム表示を勉強することで、

毎回違う結果のゲームをつくることができるんだッピ！

ユウキ

へー！　すっげーじゃん

さっそく勉強していこうぜ！

この記事で学べること

乱数の使い方
小数点を切り捨てる方法
リストと乱数表示を組み合わせる
IF文と乱数表示を組み合わせる

ランダム・乱数表示ついて学ぼう
ランダム表示を応用してみよう

ランダム・乱数表示ついて学ぼう

必要なもの

うさタブ

メモ帳
ブラウザ

が必要ッピ！

元になるコード

<!-- 見えない部分 -->
<html>
<head></head>
<!-- ↓ここから見える部分↓ -->
<body>

<!-- ↓この下に入力してね！↓ -->
<script>






</script>
<!-- ここまで！ -->

</body>
</html>

うさタブ

それじゃあさっそく

【ランダムの数字】・・・乱数をつくってみるッピ！

うさタブ

今回は

１～３の中でランダムで表示される数字

をつくってみるッピ！

うさタブ

let N = Math.random() * 3;
	document.write(N);

と入力するッピ！

うさタブ

これは

let N変数Nをつくります = Math.randomランダムな数字をつくってください() * 30~2のあいだで;
document.ホームページにwrite書き出してください　(N　変数Nを);

という意味になるッピよ～

うさタブ

できたらブラウザで確認してみるッピ！

ユウキ

できた～！

ユウキ

でもなんかイッパイ数字が出てきてるぞ？

うさタブ

よく気づいたッピ！

実は、このままだと小数点以下の数字も表示されてしまうんだッピ！

ユウキ

えー！

なんかビミョーだなぁ

ユウキ

この点の後ろの数字を消す方法ってないの？？

うさタブ

もちろんあるッピ！

次はを小数点以下の数字を切り捨てる命令文を使って

もっとランダムな数字をシンプルにするッピよ～

Math.floor()を使って小数点以下の数字を消す

うさタブ

小数点以下の数字を切り捨てるには

Math.floor( 切り捨てしたい数字 )

をつかうッピ！

うさタブ

さっきの命令文に当てはめると、

let N = Math.floor(Math.random() * 3);
	document.write(N);

とすることで、小数点以下の数字を切り捨てることができるんだッピ！

ユウキ

できた～

ここまでのコード

<!-- 見えない部分 -->
<html>
<head></head>
<!-- ↓ここから見える部分↓ -->
<body>

<!-- ↓この下に入力してね！↓ -->
<script>

let N = Math.floor(Math.random() * 3);
	document.write(N);

</script>
<!-- ここまで！ -->

</body>
</html>

うさタブ

ついでに赤枠の

をクリックすると、毎回数字が変化することがわかるッピ！

ユウキ

すっげー！

全部結果が違う！

ユウキ

ってアレ？？

ユウキ

なんで１～３からの数字って設定したのに

０が出てくるんだ？

うさタブ

それはッピね～

コンピュータは０はじまりだからッピよ！

コンピュータは０はじまり

うさタブ

ユウキくんをはじめ、みんなが数を数えるときは

1 2 3 4 5 6 7 …..

と、ふだん１はじまりッピね？

うさタブ

でもコンピュータは０から数えるんだッピ！

0 1 2 3 4 5 6 7 8 9 …….

これがコンピュータの数のほんらいの数え方なんだッピ！

うさタブ

だからさっきの

let N = Math.floor(Math.random() * 3３つの数字);
document.write(N)

も１～３ではなく、０・１・２の３つの数字になるんだッピ！

ユウキ

えー！

なんだよそれ～

わかりにくいなぁ・・・

０はじまりを１はじまりにする方法

ユウキ

なあ、うさタブ

この０はじまりの数字を１はじまりにする方法はないのか？

ユウキ

やっぱり

１・２・３・４…

って数えたほうがわかりやすいじゃんか～

うさタブ

もちろんできるッピ！

うさタブ

方法はカンタンで

let N = Math.floor(Math.random() * 3);

に１をたすっぴ！

うさタブ

具体的には

let N = Math.floor(Math.random() * 3)+1;

と +1 を命令文に付け加えるッピよ～

ユウキ

ふーん・・・やってみるか

ユウキ

お！　結果が１～３になった！

ここまでのコード

<!-- 見えない部分 -->
<html>
<head></head>
<!-- ↓ここから見える部分↓ -->
<body>

<!-- ↓この下に入力してね！↓ -->
<script>

let N = Math.floor(Math.random() * 3)+1;
document.write(N);

</script>
<!-- ここまで！ -->

</body>
</html>

確認テスト

ランダム表示を応用してみよう

うさタブ

次からランダム表示の応用編ッピ！

リストと乱数で占いプログラム
if文で言葉のパターンを変える

などの情報がもりだくさんッピ！

うさタブ

ひといきついたら

さっそく応用編を勉強してみるッピよ～！

リストと乱数で占いをつくってみよう

うさタブ

次はリストと乱数をつかって

カンタンな【運勢占い】つくってみるッピ！

ユウキ

うらない～？

そんなのつくれるのかよ～？

うさタブ

もちろんだッピ！

JavaScriptのリスト命令文と乱数を使って立派な占いをつくることができるんだッピよ～

元になるコード

<!-- 見えない部分 -->
<html>
<head></head>
<!-- ↓ここから見える部分↓ -->
<body>

<!-- ↓この下に入力してね！↓ -->
<script>






</script>
<!-- ここまで！ -->

</body>
</html>

うさタブ

もとのコードをコピーしたら、

let uranai = ["超ラッキー","ふつう","メチャクチャ悪い"];
let R = Math.floor( Math.random() * uranai.length);
document.write("今日のあなたの運勢は・・・" + uranai[R] + "です！");

と入力するッピ！

うさタブ

これは

let uranai変数リストuranaiをつくります =　中身は　 [“超ラッキー”,”ふつう”,”メチャクチャ悪い”]; 　です
let R変数Rをつくります　 = Math.floor小数点以下切り捨て　( Math.random乱数をつくります　() * uranai.lengthリストuranaiの数ぶん);
document.ホームページにwrite書き出します　(“今日のあなたの運勢は・・・” + uranai変数uranaiの中の[Rランダムの番号] + “です！”);

という意味になるッピよ～

ユウキ

uranai[R] で

超ラッキー・ふつう・メチャクチャ悪いの

３つの中からランダムで表示される仕組みなんだな！

ユウキ

おお！　できた～！

うさタブ

をクリックすると、ランダムで結果が変わることがわかるッピよ～

ここまでのコード

<!-- 見えない部分 -->
<html>
<head></head>
<!-- ↓ここから見える部分↓ -->
<body>

<!-- ↓この下に入力してね！↓ -->
<script>

let uranai = ["超ラッキー","ふつう","メチャクチャ悪い"];
let R = Math.floor( Math.random() * uranai.length);
document.write("今日のあなたの運勢は・・・" + uranai[R] + "です！");

</script>
<!-- ここまで！ -->

</body>
</html>

if文を使って文章を変化させてみよう

うさタブ

最後はif文を使って結果を変えるプログラムの例だッピ！

JavaScript入門講座｜プログラムの分かれ道　～if文・条件分岐について学ぼう～

JavaScript入門｜if文・条件分岐について学ぼう｜会話形式で楽しく学べる｜if文（プログラムの分かれ道）｜else文（条件外の設定）

ユウキ

if文・・・ってなんだっけ？

うさタブ

if文は

もし■■がXXだったら、◯◯を実行して

といった、条件をクリアすると実行するプログラムをつくることができるッピ！

うさタブ

例えば

パンが１個あったら、このプログラムを実行して

という命令文の場合、

ifもしも (pan == 1パンが１つなら) { 命令文 }を実行します

という感じであらわすことができるッピ！

うさタブ

今回はこのif文をつかって乱数の値によって変化する文章を書いてみるッピ！

元になるコード

<!-- 見えない部分 -->
<html>
<head></head>
<!-- ↓ここから見える部分↓ -->
<body>

<!-- ↓この下に入力してね！↓ -->
<script>






</script>
<!-- ここまで！ -->

</body>
</html>

うさタブ

元のコードをコピーして<script></script>

let rain = Math.floor( Math.random() * 100)+1;
 document.write("今日降水確率は" +rain+ "%<br/>");

if (rain > 81){
 document.write("高い確率で雨が降りそうです");
 }else if (rain > 30 && rain < 80) {
 document.write("もしかしたら雨が降るかもしれません");
 }else {
 document.write("今日は快晴です");
 }

と入力してみるッピよ～

うさタブ

これは

let rain変数rainを作成　 = Math.floor小数点を切り捨て　( Math.random乱数をつくります() * 1000~99まで)+1;
document.write(“今日降水確率は” +rain+ “%
“);

ifもしも (rain > 81　rainが81を超えたら){
document.write(“高い確率で雨が降りそうです”);
}else ifそれ以外の条件で (rain > 30rainが30を超え &&　かつ　 rain < 80rainが80未満) {
document.write(“もしかしたら雨が降るかもしれません”);
}else それ他すべて{
document.write(“今日は快晴です”);
}

とい意味になるッピ！

ユウキ

できた～！

全体のコードの確認

<!-- 見えない部分 -->
<html>
<head></head>
<!-- ↓ここから見える部分↓ -->
<body>

<!-- ↓この下に入力してね！↓ -->
<script>

let rain = Math.floor( Math.random() * 100)+1;
 document.write("今日降水確率は" +rain+ "%<br/>");

if (rain > 81){
 document.write("高い確率で雨が降りそうです");
 }else if (rain > 30 && rain < 80) {
 document.write("もしかしたら雨が降るかもしれません");
 }else {
 document.write("今日は快晴です");
 }

</script>
<!-- ここまで！ -->

</body>
</html>

学習のまとめ