
スキルアップ
2021.03.02
プログラミングに向いている人の特徴5つ!向いていない人の特徴も紹介
未経験からプログラマーを目指しているものの「自分はプログラミングに向いているのかわからない」という不安から、プログラミング学習に踏み切れない人も多いでしょう。そこで本記事では、プログラミングに向いている人や向いていない人 […]
JavaScript
2017.10.26
JavaScriptで用意されているMathオブジェクトのrandomメソッドを使用すると、乱数を作ることができます。
今回は、このMath.randomメソッドを使って、配列からランダムに値を取り出す方法について紹介します。
1.randomメソッドの使い方
2.配列の値をランダムに取得
3.配列の値をシャッフル
Mathオブジェクトのrandomメソッドを使用して、乱数を作ってみます。
function ranNum() { var num = Math.random(); document.getElementById("dat").value = num; }
「 Math.random() 」という記述で、乱数が返ります。
上記のソースコードを実行すると、次のようになります。
乱数ボタンを何度かクリックしてみて下さい。
Math.randomメソッドを使用すると、小数による乱数を作ることができます。
整数の乱数を作りたい場合は、さらにMath.floorメソッドを組み合わせて使用します。
Math.floorメソッドは、小数点以下を切り捨てて、整数のみを返すメソッドです。
整数の乱数を作ってみます。
function ranNum() { var num = Math.floor( Math.random() * 10 ); document.getElementById("dat").value = num; }
「 Math.random() * (MAX+1) 」とすると、MAX以下の整数の乱数を作ることができます。
「 Math.floor( Math.random() * 10 ) 」で、1から9までの整数の乱数が返ります。
上限を意識しない場合でも、「Math.random()」自体の返り値は1未満の少数のため、「Math.floor( Math.random() )」とすると、返り値は常に0となってしまう点に注意します。
上記のソースコードを実行すると、次のようになります。
乱数ボタンを何度かクリックしてみて下さい。
上限と共に下限も設定して、ある範囲内で乱数を作ることもできます。
function ranNum() { var num = Math.floor( Math.random() * 6 ) + 5; document.getElementById("dat").value = num; }
「 Math.random() * ( (MAX+1) – MIN ) + MIN 」とすると、MINからMAXまでの乱数を作ることができます。
「 Math.floor( Math.random() * 6 ) + 5 」は、MIN が 5、MAX が 10( (10+1)-5=6 )となり、5から10までの乱数が返ります。
上記のソースコードを実行します。
乱数ボタンを何度かクリックしてみて下さい。
配列は、通常 インデックス番号を持っているので、インデックス番号に乱数を指定することで、配列の値をランダムに取得することができます。
配列の値をランダムに取得する場合は、次のように記述します。
var 配列変数 = [値1, 値2, 値3, ...];
配列変数 [ Math.floor( Math.random() * 配列変数.length )];
配列の値をランダムに表示します。
表示ボタンを何度かクリックしてみて下さい。
ソースコードは次の通りです。
<script type="text/javascript"> <!-- function ranAry() { var fruits = ["りんご", "みかん", "ぶどう", "メロン", "もも"]; document.getElementById("dat").value = fruits[Math.floor(Math.random() * fruits.length)]; } //--> </script> <div style="background-color : #CCC; padding : 20px 20px 1px;"> [りんご、みかん、ぶどう、メロン、もも]のどれかを表示します <form> <div style="display:inline-flex;"> <input type="button" value="表示" onClick="ranAry()"> <input type="text" id="dat" placeholder="ランダムに表示されます"> </div> </form> </div>
今度は、Math.randomメソッドを使用して、配列要素の並び順をシャッフルしてみます。
シャッフルボタンを何度かクリックしてみて下さい。
ソースコードは次の通りです。
<script type="text/javascript"> <!-- function ranAry() { var fruits = ["りんご", "みかん", "ぶどう", "メロン", "もも"]; var num = fruits.length; while (num) { var i = Math.floor(Math.random() * num); var str = fruits[--num]; fruits[num] = fruits[i]; fruits[i] = str; } document.getElementById("dat").value = fruits; } //--> </script> <div style="background-color : #CCC; padding : 20px 20px 1px;"> [りんご、みかん、ぶどう、メロン、もも]の並び順をシャッフルします <form> <div style="display:inline-flex;"> <input type="button" value="シャッフル" onClick="ranAry()"> <input type="text" id="dat" placeholder="シャッフルします"> </div> </form> </div>
フィッシャー – イェーツのシャッフルのアルゴリズムでシャッフルしています。
配列変数のインデックスの範囲内で乱数 i を発生させて、配列変数[i]と 配列変数[num]を入れ替えています。
変数numを、インデックス番号の最大値から1ずつデクレメントさせることで、上記のデータ入れ替え処理を配列要素の数だけ繰り返し行う仕組みです。
whileの条件文が「0」になると(while(0))、falseの評価となり、ループ処理が終了します(while(1)は無限ループです)。
while文ついては、JavaScript【 while 】をご参照下さい。
スキルアップ
2021.03.02
未経験からプログラマーを目指しているものの「自分はプログラミングに向いているのかわからない」という不安から、プログラミング学習に踏み切れない人も多いでしょう。そこで本記事では、プログラミングに向いている人や向いていない人 […]
スキルアップ
2021.02.25
プログラミング初心者で、最速で技術を身につけたいと考えている人の悩みを解決します。 後述しますが、「1000時間ルール」という法則がありプログラミング初心者の方はまず1000時間の学習を目標にしましょう。今回は、プログラ […]
スキルアップ
2021.02.22
「プログラミングスクールが多すぎて選び方の基準がわからない」「スクール選びに失敗してお金も時間も無駄にすることだけはしたくない」そんな初心者の方に向けて、この記事では自分に合ったプログラミングスクールの選び方を解説します […]
プログラマハック
2021.02.19
フリーターからプログラマーになろうとしている方の中には「未経験者でも正社員として採用してもらえるか?」「自分は職歴なしのフリーターだけど、本当にプログラマーになれるのだろうか?」と不安を感じている方も多いはず。そこで今回 […]
卒業生インタビュー
2021.02.17
受講スクール プログラマカレッジ 受講期間 昼間コース(3ヶ月間) 料金 無料 就職先 株式会社アールピーシー プログラマカレッジ卒業生の岡嶋さんにお話しをお伺いしました! 目次 仕事は楽しかったし、やりがいもあった。そ […]
お知らせ
2021.02.09
※※当イベントは、募集を終了いたしました。沢山のご応募ありがとうございました。 既にお申込みいただいている方には順次メールにて当日のご案内をお送りしております。当日15時までにメールが確認できない場合は、お問い合わせまで […]
INTERNOUS,inc. All rights reserved.