こんにちは朱夏です。
今回はJavaScriptを使ってランダム整数を取得する方法を学習していきます。
目標としては数当てゲームを作成する事なのですが、最初の一歩で躓いてしまいました。
ランダムの命令文1行だけなら簡単でしょ？
そんな風に油断していたらとんだ落とし穴がありました・・・。
そんな失敗談も踏まえながら書いていきます。
ランダムの数字を取得する
ランダムな数字を取得するには、以下の関数を使います。
Math.random()
これを使って、ランダムに取得した数字を変数に代入してみます。
var randomnumber = Math.random();
randomnumberという変数にランダムの数字を代入するコードです。
次に、取得した数字を表示してみます。
<div class="p-3">
<p>数字は<span id="number"></span></p>
</div>
<script>
var randomnumber = Math.random();
document.getElementById('number').innerText = randomnumber + 'です';
</script>
こんな感じです。
実行してみると、こんな結果になりました。
数字は取得出来たけど・・・思ってたのと違いますね(；・∀・)
Math.random()は、0～1の間の、小数点以下の数字をランダムで取得するものだったみたいです。
では、整数を取得するにはどうしたら良いのでしょうか？
整数の取得方法
整数を取得するには、Math.floor()を使います。
これは、数値の小数点以下を切り捨てる関数です。
これを使ってみましょう。
var randomnumber = Math.floor(Math.random());
これを組み込んだ時の実行結果はこんな感じになりました。
整数になりました。
が、何度更新してもずっと0になりました・・・(´・ω・｀)
そうか、Math.random()は1以上の数字を取得できないんだった。
私が作りたかった数当てゲームでは1～100の間で整数が欲しいので、100をかけてやります。
var randomnumber = Math.floor(Math.random() * 100 + 1);
100をかけるだけだと0～99なので、更に+1を追加しました。
これで1～100までの数字をランダムで取得できるようになりました。
要注意！な失敗談
私が今回の学習で躓いたところは以下の2つ。
解決してみれば些細な事でしたが、はまっていた時は何故想定通りに動いてくれないのか夜通し考えていました。
- jsファイルを<head>タグ内で読み込み
- 関数の後ろの()を書き忘れ
1.jsファイルを<head>タグ内で読み込み
初心者でやってしまいがちな失敗ですね。
今回の私もやっていました。
HTMLの仕組み上、コードの上から順に処理が進むので、ページの情報が何も読み込まれていない状態でjsファイルが先に処理されると、JavaScript側が「参照先のidどこ？」ってエラーを出してしまいます。
jsファイルの読み込みは、HTMLコードの一番下、</body>の直前にひっそりと書いておきましょう。
2.関数の後ろの()を書き忘れ
昨日上手く結果が出なかった原因がこれでした。
機能は全く気づけなかったのですが、こんなコードを書いていました。
var randomnumber = Math.floor(Math.random * 100 + 1);
これを実行しても、結果はこんな感じになってしまいます。
正しくはこちらです。
var randomnumber = Math.floor(Math.random() * 100 + 1);
この何も入っていないカッコ、無くてもエラーは出ませんが、無いと正しく動いてくれない曲者なので気を付けてください。
関数の後ろにはカッコ、お約束です。
あとがき
というわけで、今回は無事にランダム整数を取得することに成功しました。
ようやく自分の足で一歩踏み出せたかなと思います。
今回の学習のまとめはこちら。
- Math.random()は小数点以下の数字しか取れない
- Math.floor()は小数点以下を切り捨てる
- 関数は()とセット
- jsファイルは</body>の直前に書く
こんな感じです。
次回は、フォームに入力した数字をJavaScriptで取得するところをやっていきたいと思います。
こんかいはここまでです。
次回もよろしくお願いします。
