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文をつかうことでランダムで結果をかえることができる

うさタブ
うさタブ

上手くできたッピか?

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

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

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

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

ユウキ
ユウキ

うーん・・・

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

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

アイカ
アイカ

そうね・・・わたしも

先生やうさタブさんにすぐに聞ける環境じゃないから

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

ユウキ
ユウキ

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

うさタブ
うさタブ

フムフム!

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

アイカ
アイカ

そんなのあるのか?

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

うさタブ
うさタブ

それなら、やっぱり一番安心自宅近所の教室がよいッピ!

うさタブ
うさタブ
テレビや雑誌に紹介された超有名教室
QUREOプログラミング教室とかどうッピか?

うさタブ
うさタブ

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

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

うさタブ
うさタブ

全国2500教室もあるから、

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

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

ユウキ
ユウキ

なんだこれ! スゲーなっ

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

アイカ
アイカ

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

うさタブ
うさタブ
キュレオプログラミング教室は、
アメーバブログやアベマTV・バンドリをプロディースしている
サイバーエージェント」のグループ会社で、確かな実績があるッピ!

うさタブ
うさタブ

オンラインで授業を受けるなら

Tech Kids Online Coachingがオススメッピ!

こっちもサイバーエージェントのグループ会社が運営してるッピ!

教室名 対象 学習言語 教室場所 無料体験・カウンセリング
 

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

小学2年生〜中学3年生 Scratch
HTML/CSS
JavaScript
全国各地
教室
無料体験◯
 

Tech Kids Online Coaching

小学1年生〜中学3年生 Scratch
C++
Unity
渋谷
またはオンライン
無料体験◯
 

Udemy

社会人 HTML/CSS
JavaScript
Python
講座購入
ブラウザ
アプリ
サンプル等◯
うさタブ
うさタブ

パパやママ、お兄ちゃんお姉ちゃん
就活や転職で役立つプログラミング知識を身につけたいなら
Udemy】で講座のコースを買ってみるのもオススメッピ!

動画付きの魅力的な教材が格安で、好きな時間に学べるッピ~

うさタブ
うさタブ

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

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

ユウキ
ユウキ

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

アイカ
アイカ

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

スポンサーリンク

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

ユウキ
ユウキ

うーん・・・

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

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

アイカ
アイカ

そうね・・・わたしも

先生やうさタブさんにすぐに聞ける環境じゃないから

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

ユウキ
ユウキ

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

うさタブ
うさタブ

フムフム!

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

アイカ
アイカ

プログラミング教室??

アイカ
アイカ

そんなのあるのか?

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

うさタブ
うさタブ

プログラミング教室は、やっぱり安心の近所の教室ッピ!

うさタブ
うさタブ

テレビや雑誌に紹介された超有名教室

プログラミング教室数国内No.1!「QUREOプログラミング教室」
とかどうッピか?

うさタブ
うさタブ

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

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

うさタブ
うさタブ

全国2500教室もあるから、

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

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

ユウキ
ユウキ

なんだこれ! スゲーなっ

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

アイカ
アイカ

そんなものがあるのね

うさタブ
うさタブ
「QUREOプログラミング教室」は、
アメーバブログやアベマTV・バンドリをプロディースしている
サイバーエージェント」のグループ会社で、実績があるッピ!

うさタブ
うさタブ

オンラインで授業を受けるなら

Tech Kids Online Coachingがオススメッピ!

こっちもサイバーエージェントのグループ会社が運営してるッピ!

教室名 対象 学習言語 無料体験・カウンセリング
 

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

小学2年生〜中学3年生
教室で授業を受けたい方
Scratch
C++
JavaScript
無料体験◯
 

Tech Kids Online Coaching

小学生~中学生
オンライン授業を受けたい方
Unity
C++
Scratch
無料体験◯
Udemy
社会人
講座コースで勉強したい人向け
HTML/CSS
JavaScript
Python
サンプル等◯

うさタブ
うさタブ

パパやママ、お兄ちゃんお姉ちゃん
就活や転職で役立つプログラミング知識を身につけたいなら
Udemy】で講座のコースを買ってみるのもオススメッピ!

動画付きの魅力的な教材が格安で、好きな時間に学べるッピ~

うさタブ
うさタブ

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

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

ユウキ
ユウキ

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

アイカ
アイカ

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

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