ドットインストールおみくじを作ってランダム要素の使い方を学ぶ
いきなりですが、休日の時間は本当に有効に使いたいと感じる今日この頃です。
ドットインストールでJavaScriptを学んでいる最中ですが、今日はおみくじを作る事でランダム要素の使い方を学習しました。
ランダム要素の作り方は様々あるようで、コードの書き方次第では、本当にシンプルに書き換えることが可能です。
しかし、こうしたシンプルに書き換える上で、なぜこのような書き方をするのかを理解しない事には、全く覚えても意味がないように感じます。
とはいえ、まだ初心者レベルなので、上級者になればこういった考え方が変わるのかもしれませんが・・・。
初心者だからこそ、こうした、細かい理由も理解していく必要があるんではないかと思います。
おみくじを作るためのマークアップをするところから始めます。
HTML&CSSを使って、おみくじのデザインをしていきました。
ここは、JavaScriptというよりも、デザインのところになりますね。
プログラミングを学んでいくには必須の言語なので、覚えておいて損はないと思います。
とりあえず、おみくじのデザインをしていきました。
デザインだけでも、機能性や見栄えをこだわると無限大なアイデアが生まれそうです。
デザインが終了したら、JavaScriptでどんな動きをしてもらうのか指示出しをします。
どんなくじ引きにするのかは、動画を進めていくときにわかりますが、クリックをしておみくじの結果がわかるというゲームです。
なので、コードでは、クリック（'click'）したらどんな動きをしてもらうのかを書いていきます。
確か、constで定数を決めました。
HTMLで指示を出すクラス名をボタン（ 'btn' ）とし、それを定数にしたと記憶しています。
const btn = document.getElementById('btn');
という形で、この定数を動作させます的な感じの指示を出しました。
その下に少しずつどういった動きをしてもらうのかを細く指示していきます。
btn.addeventlistener ('click' . () => {
)};
とクリックしたら、どんな動きをしてもらうのかをコードしました。
このコード内にクリックしたときの動作の指示だしコードを書いていく感じでした。
ランダムな要素を出すには Math.random というのを使うようです。
その後に数字を代入する事で、その数字内でランダムに表示されるようになります。
Math.random () * 3 ;
というような感じですね。
どうもこれだと小数点以下の値も習得してしまうようで、整数だけを取得したい時は、こんな感じでコードを書く必要があります。
Math.floor ( Math.random () * 3 );
てな感じですね。
こうする事で、小数点以下の数字が含まれなくなります。
今回の数字「３」の場合、「３」が含まれない範囲、つまり２から小さい数字のみしか表示されません。
上の感じのコードだと
Math.floor( Math.random () * 3 ) ;
０、１、２
までが表示される感じですね。
Math.floor で小数点以下と限定しているので、この3つの数字におさまる事になります。
あとは、この数字にどんな文字を出力するかで、表示の仕方が変わってきます。
今回のおみくじでは「大吉」、「中吉」、「凶」という表示を出しました。
そうなると、まず定数に代入する必要があります。
const n = Math.floor ( Math.random () * 3 ) ;
btn.textContent = n ;
この見方だと、「n」に０〜２までの数値をランダムで表示するという指示ではないでしょうか。
で、この数字に文字を代入したいので、 switch というのを使って条件を振りました。
switch (n) {
case 0:
btn.textContent = '大吉' ;
break ;
これは、「nに０の数字が代入されたら、大吉という表示をしてください」という指示をしている感じですね。
これが、０の数字がでたら「break」というコードで、指示終了の命令を出します。
こんな感じの意味だと僕は解釈しました。
あとの残りも、こんな感じの指示で「中吉」と「凶」にも同じように与えていきます。
switch を使った事で、この１行が不要になります。
btn.textContent = n ;
まとめると、
{
const btn = document.getElementById('btn');
btn.addeventlistener ('click' . () => {
const n = Math.floor ( Math.random () * 3 ) ;
switch (n) {
case 0:
btn.textContent = '大吉' ;
break ;
case 1:
btn.textContent = '中吉' ;
break ;
case 2:
btn.textContent = '凶' ;
break ;
}
)};
}
てな感じですかね。
ざっくりと記憶の範囲内でまとめてみました。
よりカンタンに書けるコードがありましたが、これにて終了とします。