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

JavaScript
うさタブ
うさタブ

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

ユウキ
ユウキ

ランダム・乱数表示!?

ユウキ
ユウキ

・・・ってなに?

うさタブ
うさタブ

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

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

うさタブ
うさタブ

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

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

うさタブ
うさタブ

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

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

ユウキ
ユウキ

あ~ アレか!

うさタブ
うさタブ

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

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

ユウキ
ユウキ

へー! すっげーじゃん

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

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

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

必要なもの

うさタブ
うさタブ
メモ帳
  • メモ帳
  • ブラウザ

が必要ッピ!

元になるコード

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

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






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

</body>
</html>
うさタブ
うさタブ

それじゃあさっそく

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

うさタブ
うさタブ

今回は

1~の中でランダムで表示される数字

をつくってみるッピ!

うさタブ
うさタブ

<script></script>のなかに

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~3からの数字って設定したのに

が出てくるんだ?

うさタブ
うさタブ

それはッピね~

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

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

うさタブ
うさタブ

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

1 2 3 4 5 6 7 …..

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

うさタブ
うさタブ

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

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

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

うさタブ
うさタブ

だからさっきの

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

1~3ではなく、0・1・2の3つの数字になるんだッピ!

ユウキ
ユウキ

えー!

なんだよそれ~

わかりにくいなぁ・・・

0はじまりを1はじまりにする方法

ユウキ
ユウキ

なあ、うさタブ

この0はじまりの数字を1はじまりにする方法はないのか?

ユウキ
ユウキ

やっぱり

・2・3・4

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

うさタブ
うさタブ

もちろんできるッピ!

うさタブ
うさタブ

方法はカンタンで

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

をたすっぴ!

うさタブ
うさタブ

具体的には

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

+1命令文に付け加えるッピよ~

ユウキ
ユウキ

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

ユウキ
ユウキ

お! 結果が1~3になった!

ここまでのコード
<!-- 見えない部分 -->
<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>
うさタブ
うさタブ

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

<script></script>のあいだに

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]

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

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

ユウキ
ユウキ

おお! できた~!

うさタブ
うさタブ
読み込みマーク

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

ここまでのコード
<!-- 見えない部分 -->
<html>
<head></head>
<!-- ↓ここから見える部分↓ -->
<body>

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

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

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

</body>
</html>

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

うさタブ
うさタブ

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

ユウキ
ユウキ

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

うさタブ
うさタブ

if文

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

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

うさタブ
うさタブ

例えば

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

という命令文の場合、

ifもしも (pan == 1パンが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>
学習のまとめ
  • ランダム・乱数は行動するごとに結果が変わること
  • 乱数は【Math.random() * 数字】でつくることができる
  • Math.floorで小数点を切り捨て
  • リスト let 変数=[リスト1,リスト2,]と、リスト名[乱数]でリストの中身をランダム表示できる
  • IF文をつかうことでランダムで結果をかえることができる

うさタブ
うさタブ

上手くできたッピか?

これからも色んなゲーム作りやプログラムの解説をしていくッピ!

次回も楽しみにしているッピよ~~!

スポンサーリンク
スポンサーリンク
スポンサーリンク

どうしてもわからない、そんなときは?

ユウキ
ユウキ

うーん・・・

やっぱり、どうしてこーなるか良くワカンナイな~

説明を聞いたすぐはわかったつもりなんだけどさ

アイカ
アイカ

そうね・・・わたしも

すぐに復習できる環境じゃないから

宿題とか困っちゃうわ・・・

ユウキ
ユウキ

他に気軽に教えてくれる先生とかいるといいんだけどな~

うさタブ
うさタブ

フムフム!

そんなときは、プログラミング講座がオススメッピね~

アイカ
アイカ

そんなのあるのか?

ていうかドコいけばいいんだよ

うさタブ
うさタブ

それなら、やっぱり一番安心自宅でできる動画教材がよいッピ!

うさタブ
うさタブ
テレビCMでも話題の有名教材
Udemyとかどうッピか?

 

うさタブ
うさタブ
Udemyは、HTMLからJavaScript
人気の機械学習からUnityゲーム講座まで選び放題ッピ!

うさタブ
うさタブ

買い切り講座だから
いつでも勉強し放題、動画制作や難しいマーケティングなんかも勉強できるッピ~!

ユウキ
ユウキ

へえ~、こんなのがあるのか

うさタブ
うさタブ

ちびっこのみんなは、キュレオプログラミング教室がオススメッピ!

実際の教室で自分以外の同い年と一緒に勉強することで、自分も負けないゾ!と思えておサボりを防ぐことができるッピ!
さらに、クラスのみんなと差をつけてすごいプログラムが作れちゃうッピ

教室名 対象 学習言語 教室場所 無料体験・カウンセリング
Udemy 学生~社会人 Unity
HTML/CSS
JavaScript
MySQL
Python等
オンライン講座
コース買い切り
講座によってサンプル○
Unityゲーム講座アリ
 

「QUREOプログラミング教室」

小学2年生〜中学3年生 Scratch 全国各地
2500教室
無料体験◯
【LITALICOワンダー】 小学1年生〜高校生 Scratch
Unity C#
HTML / CSS
JavaScript
東京都,神奈川,埼玉県,千葉
オンライン
無料体験◯
3Dプリントなどの講座によっては別途料金

ユウキ
ユウキ

よーし、ちょっと体験だけでもやってみるか!

アイカ
アイカ

わたしもさっそくチェックしてみようかな♪

スポンサーリンク

どうしてもわからない、そんなときは?

ユウキ
ユウキ

うーん・・・

やっぱり、どうしてこーなるか良くワカンナイな~

説明を聞いたすぐはわかったつもりなんだけどさ

アイカ
アイカ

そうね・・・わたしも

すぐに復習できる環境じゃないから

宿題とか困っちゃうわ・・・

ユウキ
ユウキ

他に気軽に教えてくれる先生とかいるといいんだけどな~

うさタブ
うさタブ

フムフム!

そんなときは、プログラミング講座がオススメッピね~

アイカ
アイカ

そんなのあるのか?

ていうかドコいけばいいんだよ

うさタブ
うさタブ

それなら、やっぱり一番安心自宅でできる動画教材がよいッピ!

うさタブ
うさタブ
テレビCMでも話題の有名教材
Udemyとかどうッピか?

うさタブ
うさタブ
Udemyは、HTMLからJavaScript
人気の機械学習からUnityゲーム講座まで選び放題ッピ!

うさタブ
うさタブ

買い切り講座だから
いつでも勉強し放題、動画制作や難しいマーケティングなんかも勉強できるッピ~!

ユウキ
ユウキ

へえ~、こんなのがあるのか

うさタブ
うさタブ

ちびっこのみんな、キュレオプログラミング教室を受けて
自分以外の同い年と一緒に勉強することで、自分も負けないゾ!と思えて
おサボりを防ぐことができるッピ!
さらに、クラスのみんなと差をつけてすごいプログラムが作れちゃうッピ

先生やパパママにほめられて、学習効率が最高にグングン↑↑ッピよ~~♪

うさタブ
うさタブ

未来都市キュレオを舞台に、魅力的なキャラクターがたくさん登場する・ゲーム感覚で楽しく学べるプログラミング教室ッピ!

困ったことも先生に直接聞けるのが最高ッピ~!

うさタブ
うさタブ

全国2500教室もあるから、

きっとみんなの近くにも教室があるッピ。

公式サイト近くに教室があるかチェックしてみるとよいッピ!

ユウキ
ユウキ

なんだこれ! スゲーなっ

ゲームみたいにやってるうちに、自然と勉強できてるみたいな感じ?

アイカ
アイカ

そんなものがあるのねっ!

うさタブ
うさタブ

ロボットをプログラミングしてみるなら

LITALICOワンダーがオススメッピ!

JavaScriptも勉強できるッピよ~!

教室名 対象 学習言語 無料体験/教室場所
Udemy 学生~社会人 Unity
HTML/CSS
JavaScript
MySQL
Python等
オンライン講座
講座によってサンプル○
「QUREOプログラミング教室」
小学2年生〜中学3年生 Scratch 教室によって無料体験◯
全国各地の教室
【LITALICOワンダー】 小学1年生〜高校生 Scratch
Unity C#
HTML / CSS
JavaScript
無料体験◯
3Dプリントなどの講座によっては別途料金
東京周辺
オンライン

ユウキ
ユウキ

よーし、ちょっと体験だけでもやってみるか!

アイカ
アイカ

わたしもさっそくチェックしてみようかな♪

JavaScriptJS基礎プログラミング
学んで遊んでジャンケンポン!
タイトルとURLをコピーしました