皆さん、こんにちは。どんぶラッコです。
今日は趣向を変えて、皆さんとどうやって実装する？というテーマで記事を書こうと思います。
今日のテーマは「おみくじ」。
おみくじのロジック
- ページを開く
- 大吉・中吉・小吉・凶 をランダムに選ぶ
- 0-3までの整数をランダムに生成する
- 数字に応じて 大吉・中吉・小吉・凶を割り当てる
- おみくじの結果がalert画面に表示される
ざっとこんな感じになると思います。
じゃあどうやって書くのか？まずは皆さんで考えてみてください！
最低限のHTML雛形を用意したので、それも活用してみましょう💪
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>おみくじ</title>
</head>
<body>
<!-- ここにJavaScriptを記述する -->
<script>
</script>
</body>
</html>
どんぶラッコ
まずは自分で考えてみてから、下に進んでみてください！
解法1 書き下し文的に書いていく方法 (IF文)
まずは、こういう書き方が思い浮かぶのではないでしょうか。
const randomNum = Math.floor(Math.random() * 4);
if(randomNum === 0){
alert('大吉');
}else if(randomNum === 1){
alert('中吉');
}else if(randomNum === 2){
alert('小吉');
}else {
alert('凶');
}実際に初めてプログラミングを触る方にはまずはこの書き方から教えていきます。
書き下し文的に書いていけばいいからわかりやすいですよね。
ただ、条件がどんどん増えてきたりするとちょっと見づらいのが難点。
解法2 書き下し文的に書いていく方法 (Switch文)
解法1 の別バージョンとして、switchで記述する方法もあります。
const randomNum = Math.floor(Math.random() * 4)
let result = ''
switch (randomNum) {
case 0:
result = '大吉'
break
case 1:
result = '中吉'
break
case 2:
result = '小吉'
break
case 3:
result = '凶'
break
}
alert(result)また、if文では毎回 alert() 文を条件式の中に書いていましたが、今回は結果の文章を result という変数に格納するようにしていますね！
解法3 配列を使う
配列の概念を学習したら、配列で記述することもできます。
const results = ['大吉', '中吉', '小吉', '凶']
const randomNum = Math.floor(Math.random() * 4)
alert(results[randomNum])み、短い！
解法4 関数にまとめる
解法3の書き方が一番すっきりすると思いますね。ということで、解法3の内容を関数にまとめましょう。
const getFortune = () => {
const results = ['大吉', '中吉', '小吉', '凶']
const randomNum = Math.floor(Math.random() * 4)
return results[randomNum]
}
const fortune = getFortune()
alert(fortune)どこでなんの動作をしているのかわかりやすくなりましたね！
今回は4つの書き方をご紹介しましたが、どの書き方を全部同じ答えを出すんです。答えは1つじゃないところがプログラミングの面白さですよね〜
皆さんはどんな書き方をしましたか？
